Adobe XD: New updates Responsive Resize, Timed Transitions, and more | Web Designing

Adobe has recently announced huge news with the introduction to their Open Platform. With the month of September, Adobe XD has released new tools to help you design multiple screen sizes, timed transition elements. With responsive design of being now an industry standard, I am more interested in the new timed transitions. It will allow us to simulate the effects of loading states, looping animations and more. I would definitely think that you should take some moment to watch the short tutorial videos below.

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.

Responsive Resize

“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.

Timed Transitions

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.

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.

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.

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.

More Links

• Get the Starter plan for Adobe XD for free
• #MadeWithAdobeXD