September 2018 Release of Adobe XD: Responsive Resize, Timed Transitions, and More
September brings an exciting update to Adobe XD, as we’re now releasing new tools to help you easily design for multiple devices at different screen sizes, and introducing timed transition elements to add an extra realisms to your prototypes. With Responsive Resize, you’re able to resize your design canvas and the elements on it (when creating a design for both an iPhone and an iPad, for example), while keeping the placement and scale of your design in place. Meanwhile, new Timed Transitions will allow you to simulate the effects of loading states, looping animations, and more. Add to that a new and improved full-screen viewing experience (and the always popular addition of spell check), and XD has never been more powerful for designers who need to easily create prototypes that are as effective as they are easy to create.
New to XD: Responsive Resize
We live in a world where designing for multiple devices is not only important, it’s essential. Adobe XD has now added a Responsive Resize feature that allows you to resize groups of objects while keeping their placement and scalability. All you have to do is resize the group right there on the design canvas, and XD will keep the relative spacing in place.
“When building new components, to add to our ever-growing library, our team must account for devices of all sizes starting from the truly early stages of ideation,” said Greg Pilawa, UX/UI design manager for Wyndham Hotels and Resorts. “XD’s new responsive resize feature gives us the power to rapidly conceive, design, and test across multiple devices without having to rebuild each component from scratch or adjust every element individually. This will undoubtedly allow us to build more, faster.” Check out responsive resize in the video below.
While XD will do its best to recreate the placement of your elements on a larger or smaller canvas as you resize them, you can also switch to manual mode to edit constraints manually for more control. This way you’ll be able to control the exact scalability of an object’s height and width, along with its alignment within the group.
There are many ways Responsive Resize can be used to speed up the process of designing for multiple devices, including the ability to pin a button or icon to a corner, fix elements to the edges of your design, and fix the padding of a design to keep an icon’s size and position intact.
New to XD: Timed Transitions
With the addition of time as a new trigger, you can now transition between artboards based on a specific delay. This is helpful while prototyping onboarding or decision flows. You’ll be able to create looping animations using delays for auto-fade effects, spinners, loaders, progress bars, and more.
When creating a transition between two artboards in Prototype mode, you’re now able to select Time instead of Tap as your trigger, and you can define how long you want your delay to be and the transition you want it to take. XD will save your attributes from that same screen and offer them as the default on further screens. Watch the video below to see Timed Transitions in action, and see how they can be used to simulate an onboarding experience in an app.
New to XD: Spell Check
Now, the great lifesaver of digital copywriting is officially part of Adobe XD. Spell check is integrated in XD, meaning you’ll have access to real-time spell checking directly on the design canvas. All you have to do is enable spell check in XD (it’ll be on by default), and once you select text in your design, you’ll see any potential spelling errors right there. Check out what spell check looks like in Adobe XD in the video below.
Of course, you’ll be able to access a list of suggestions for any potentially misspelled words, and, to save you time, XD will suggest spellings of any words you’ve possibly misspelled as you’re typing them. There are also grammatical suggestions, as well.
Improved in XD: Web prototype full-screen viewing
We’ve made a number of improvements to the full-screen options in Adobe XD, meaning you’ll be able to show others a much more accurate representation of your work and provide a more realistic experience when viewing a web-sized artboard in the browser. Web and custom artboards are now displayed from the top of the browser, without black padding issues, while mobile artboards continue to be centered on the screen in full-screen mode.
If the artboard width is greater than the available horizontal space, then the prototype scales to fit the width with no horizontal scrolling. You can check out a video of the new full screen viewing options below.
The background color in full-screen mode is now white instead of black. This will eliminate any user confusion — most browsers have a default white background, and black doesn’t provide an accurate representation of a real web experience.
Additionally, we’re excited to announce that HCL Technologies has chosen Adobe XD CC as its standard tool to design, prototype and share engaging experiences. Learn more here.
Reading this in the future? Check out all of the major updates to Adobe XD in 2018.
We’d love to continue the dialogue. Help us shape the future of Adobe XD by submitting feature requests or file bugs. You can follow our handle @AdobeXD for updates, or reach the team on Twitter using the #AdobeXD. You can also talk to us using Facebook, where we share videos and updates as well as answer questions during live sessions.