Adobe XD is a vector-based tool for designing and prototyping user experiences for web and mobile apps. Switch easily from wire framing, visual design, interaction design, prototyping, previewing, and sharing, all in one powerful tool.
XD is made for all types of creators - UX/UI designers, interaction designers, experience designers, product designers, web designers, app designers, visual designers, entrepreneurs, and more.
The September 2018 release of XD has the following new exciting features:
When designing for a multi-device landscape today, it's important to consider the wide variety of screen sizes available across mobile, tablet, and desktop resolutions. Since not all designers use similar devices, we should consider how content works across multiple screen sizes.
To solve this user problem, Adobe XD has developed a feature called responsive resize that allows you to resize objects while maintaining spatial relationships at different sizes to best adapt to multiple screen sizes. For more information on responsive resize and constraints, see Responsive resize.
To learn more about responsive resize, do check this video.
Timed transitions apply a combination of Delay and Duration as a new type of Time Trigger to transition between artboards and create quick onboarding flows or loops.
With the addition of Time, you can now transition between artboards based on a specific time delay. This is helpful to prototype onboarding or decision flows.
When creating a transition between two artboards in Prototype mode, you're now able to select Time instead of Tap, define duration of the delay, and the transition you want it to take. XD then saves the attributes from that same screen and offers them as the default for further screens. For more information on timed transitions, see Use timed transitions.
To learn more about timed transitions, do check this video.
A. Set Trigger to Time B. Set Delay in Seconds C. Set Action to Transition D. Set Duration to Seconds
Adobe XD introduces a built-in spell check feature that provides real-time spell checking directly on a design canvas. This feature relies on the OS-level language to suggest corrections. You also have the ability to add new words to the dictionary.
Traditionally, users had to copy or paste their content into a seperate application to check spellings and typos.
From this release onwards, you can run spell check on the selected text and, view and fix any spelling errors.
Before initiating spell check, ensure that you have enabled the spell check feature in the Edit menu.
For more information on spell check, see Use spell check.
Adobe XD introduces improved full screen mode behavior that provides an enhanced user experience when viewing designs in the browser.
Web and custom artboards are now displayed from the top of the browser without black padding issues. However, mobile artboards continue to be centered on the screen in full screen mode.
These enhancements provide a more realistic experience when viewing a web sized artboard in the browser.
To learn more about improvements in full screen viewing of a web prototype, do check this video.
This mimics true browser behavior, as background color of the browsers is always white and does not add a black background color by default.
Improvements in standard and full screen view:
- If the artboard width is greater than the available horizontal space, the prototype scales to fit the width with no horizontal scrolling.
- If you have defined the viewport height (set in the Property Inspector), the prototype fits to the height first and proportionally scales width to maintain the aspect ratio. You can also scroll vertically to view content that is below the viewport height.
- If the designed prototype is a web or a custom artboard, the published link in the web browser in full screen mode renders the content from the top of the browser window. Mobile and tablet designs continue to be center aligned in the screen.
- The background color in full screen mode is white instead of black. This mimics true browser behavior where browsers do not add a black background color by default.
Improvements in mobile artboard view:
- Content fits height wise and adjusts width to maintain aspect ratio.
- If you view the published link in a full screen mode on a web browser, the content renders in the middle of the browser window.
From XD 11.0 onwards, you can include layers marked for batch export as assets in design specs, and developers can download all such marked layers from the design specs link.
Developers can then opt to download vector assets as SVG, PNG, PDF, and bitmap assets as PNG and PDF.
For more information, see Extract assets for Design Specs.
With this release of Adobe XD, you can organize and reorder your assets by dragging single or multiple assets across the Asset panel.
For more information, see Reorder elements in the Asset Panel.
Adobe XD enables you to share secure named-only invites (public and private links) for design specs and prototypes from within the web interface. When a designer publishes a secure named invite, the designer can use the Invite option to invite more internal and external reviewers.
The Invite option is visible only to the document owner, and the invited stakeholders cannot invite others unless the designer permits to do so.
For more information, see Using private invites on web.
You can use @ mention to view names of the users invited to access a private design invite. In case of public prototypes and design specs, only users who have commented at least once, appear in the reviewer list. The reviewer @ mentioned by name, receives a mail or a notification from the Creative Cloud desktop application. When you click the notification, it directs you to the referenced artboard.
For more information, see Reviewer workflow.
From XD 11.0 onwards, users can select any object in the shared design specs and click its borders to display the strokes used in the screen.
For more information, see Inspect design specifications.
From XD 10.0 onwards, you can comment on design specs, use a commenting pin to pin the exact location of the comment, and move the pin if necessary. When navigating a link, the comment and their responses are retained in context. A commenting notification email sent to the author provides a direct contextual link to the artboard. Your responses are reflected when the developer refreshes their browser.