August 2018, September 2018, and October 2018 releases of Adobe XD
xd-mnemonic

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.


New Features in Adobe XD 14

Improved collaboration with cloud-native documents

Cloud-Doc

Adobe XD introduces cloud documents, a new cloud-native document type that provides you with a fast and convenient method to manage, share, and retain documents up to date across various devices. 

You can save your XD designs as cloud documents to ensure that they are up to date and accessible even when you're offline. You can then share them with other Creative Cloud users and invite them to collaborate. Once you get back online, your work is automatically saved to the cloud.

Cloud documents also support cross-document assets and allow you to link symbols from a cloud document.

To learn more about working with cloud documents, check out this video.


Introduction of cloud documents also impacts how you save and access documents on XD mobile. For more information, see Working with cloud documents on mobileCloud documents in XD and Managing cloud documents.

To learn more about the mobile experience when working with cloud documents, check out this video.


Faster and precise designs with object flip

XD introduces the option to flip objects vertically or horizontally. Flip works on all basic elements except artboard, repeat grid, and symbols, and accounts for the current rotation of the object when applied.

For more information, see Flip objects.

Flip objects
Flip objects

Productivity gains using search in layers panel

You can use the Search and Filter  in the layers panel to search by layer names or filter layers by text, shapes, and images categories. The search experience is optimized to show only relevant layers and artboards containing the keyword, without the layers structure (for example, expanded groups). This can be helpful when auto-animating layers between artboards.

For more information, see Work with layers.

Search in Layers panel
Search in Layers panel

Preview linked symbol on canvas

Roll over the linked symbol update icon in the Assets panel to preview linked symbol updates on canvas before committing them.

For more information, see Preview linked symbol updates.

Preview linked symbol updates
Preview linked symbol updates

UI changes pertaining to share workflows

14_0-release-share
Old nomenclature New nomenclature Workflows.
NA Share Document Share cloud documents for review.
Publish prototype Share for Review Publish and share prototypes for review.
Publish design specs Share for Development Publish and share design specs with the developers for review.
Manage published links Manage Links Manage links from assets.adobe.com.
Record Video Record Video Record a video of interactions between artboards when working with auto-animate. If there's an interactive prototype, all interactions are recorded as an .mp4 file.

Improved visual fidelity with retained layers from Adobe Illustrator

With improved copy and paste from Adobe Illustrator into XD, the visual fidelity of the layers, its structure, and effects are retained as they were designed in Adobe Illustrator. This workflow is now on par with importing from Illustrator.

Improved integration with Photoshop, Illustrator, and After Effects

Use the new File > Import option to add Photoshop or Illustrator content into an existing XD document when converting an Illustrator or Photoshop content. When you convert smart objects, they remain fully editable (instead of being flattened), and preserve the Photoshop adjustment layers.

For more information, see Working with external assets.

Prototype viewing on mobile devices

Several improvements have been added to viewing prototypes in a mobile web browser including a full screen default mode, pinch to reveal navigation arrows, home button, prototype information, and report a concern. For more information, see Preview on mobile devices.

To learn more about the enhanced experience on mobile, check out this video.


Improved SVG export

When exporting .svg elements from XD or from design specs, you can now export with Presentation Attributes that improves styling and compatibility for common development scenarios such as SVGs exported from XD in Android Studio.

For more information, see Working with external assets.

Improved Wacom and touch support

Adobe XD now supports two-finger rotation of selected objects on touch-screen Windows devices, Mac trackpads, Wacom tablets, touchpad, and touch ring.

Improved web comments UI affordance

On opening either a web prototype or design spec, you can view a gray marker with comment count above the comment icon in the right rail. The count represents total number of unresolved comment threads on an artboard. The comment count is automatically updated if you add a new comment or mark an existing comment as resolved.

Web comments UI affordance
Web comments UI affordance

New Features in Adobe XD 13

Design and prototype using voice commands and speech playback

Voice commands and speech playback
Voice commands and speech playback

Adobe XD provides an easy-to-use solution that lets you use voice commands to trigger an interaction between artboards. Like using a Click or a Tap as a Trigger, you can use Voice to trigger a prototype interaction and Speech Playback as a triggered action. Speech playback gives you access to a powerful text-to-speech engine that helps you design for new platforms like voice assistants and smart speakers. For more information, see Voice design and prototyping.

To learn more about using voice commands and speech playback, check this video.


Authoring and playback with auto-animate and drag gestures

Auto-aminamte--1(source)
Auto-Animate at work

Auto-Animate allows you to easily create prototypes with immersive animated transitions. Simply duplicate an artboard, modify object properties, such as size, position, rotation, and apply an Auto-Animate action to create an animated transition between artboards. To use Auto-Animate, ensure that the objects you want to animate have the same layer name between two artboards. For more information, see Create prototypes using auto-animate.

Drag Gesture in XD takes the Auto-Animate feature one step further by allowing you to simulate the drag experience of touch-enabled devices. For more information, see Drag gestures at work.

To learn more about Auto-Animate, check this video.


Cross-document asset sharing with linked symbols

Linked-Symbol-Concept

As design teams grow within organizations coupled with the ever-increasing design surfaces, designers need to collaborate to create consistent and scalable designs. With Linked Symbols, designers can share symbols across documents and ensure that they are always up to date.

Linked Symbols allow you to create and maintain a single source of truth for UI kits, sticker sheets or style guides, and use them in other Adobe XD documents. When you modify a Linked Symbol in the source document, XD notifies documents with instances of that Linked Symbol with those updates. From there, you can preview the changes and choose to accept or reject them. For more information, see Work with linked symbols.

To learn more about Linked Symbols, check this video.


Design tooling innovation through plugins

Plugins-updated

Adobe XD launches the first wave of plugins that helps you automate tasks, integrate with other tools, leverage data in your designs, and much more. This also includes integrations with some of the best collaboration and productivity apps in the market, including Slack, JIRA, and Microsoft Teams.

For information on getting started with plugins, see Plugins for XD.

Seamless asset transfer with Illustrator and After Effects

Import from Illustrator
Import from Illustrator

From Adobe XD 13.0, you can transfer layout designs and assets from Illustrator by opening. ai files from within Adobe XD. The new fast and convenient workflow helps you to seamlessly transfer assets with native mapping of layers, artboards, artwork, and vectors with best visual fidelity, and streamline collaborative environments in different stages of UX process. For more information, see Open Illustrator files in XD.

Feature benefits:

  • Seamless usage of Illustrator assets in prototypes: transfer icons, logos, and other vector assets into XD and use UI Kits or full libraries created in Illustrator yet retain layers, with full editability and visual fidelity.
  • Collaborate to create interactive designs: open Illustrator files in XD and use XD’s powerful prototyping and collaboration features.

To learn more about Illustrator integration, check this video.


Animate with After Effects
Animate with After Effects

With Adobe XD 13.0, you can easily export XD designs (selected layers or whole artboards) into After Effects to create custom UI animations and micro-interactions. You can seamlessly export layers, artboards, artwork, and vectors with equal visual fidelity and use After Effect’s powerful plugin ecosystem to streamline your collaboration with the developers. For more information, see Exporting assets to After Effects.

Feature benefits:

  • Get full control of your animations: Designers can use After Effects to create custom animations and micro-interactions, tweak transitions, or use video assets in your designs.
  • Seamless asset transfer: With this integration, you can enjoy quick asset transfer and native mapping of layers, vectors, and artwork resulting in faster turnaround from design to custom animations.
  • Leverage plugins: You can extend your animations and collaboration with developers by using After Effects’ plugin ecosystem tailored for UX design process.

Win10 live device preview on iOS

Mobile-Preview

From XD 13.0 onwards, designers with Windows OS can use a USB connection to preview their designs on iOS. For more information, see Preview on mobile devices.

New Features in Adobe XD 12

 The September 2018 release of XD has the following new exciting features:

Enhancements include:

Read on to know more.

Responsive resize and constraints

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.


Responsive resize
Responsive resize output
Setting up constraints on group of objects
Setting up constraints on group of objects

Timed transitions

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.


Set timed transitions
Set timed transitions

A. Set Trigger to Time B. Set Delay in Seconds C. Set Action to Transition D. Set Duration to Seconds 

Built-in spell check

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.

Note:

Before initiating spell check, ensure that you have enabled the spell check feature in the Edit menu.

Spell check
Spell check

For more information on spell check, see Use spell check.

Improvements in full screen viewing of web prototypes

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.


Full-screen-(Before)
Previous behavior
Improved full screen mode scaling for web prototypes
Improved behavior

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. 

New Features in Adobe XD 11

The August 2018 release of XD has the following new exciting features:

Enhancements include:

Read on to know more.

Extract assets for Design Specs

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.

Export assets
Batch export
Batch export

For more information, see Extract assets for Design Specs.

Reorder assets in the Asset Panel

With this release of Adobe XD, you can organize and reorder your assets by dragging single or multiple assets across the Asset panel. 

Reorder assets
Reorder assets

For more information, see Reorder elements in the Asset Panel.

Private invites on web

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.

Send private invites to users from the browser
Send private invites to users from the browser

Note:

The Invite option is visible only to the designer who owns the document, and the invited stakeholders cannot invite others unless the designer permits to do so.

For more information, see Using private invites on web.

@ mention support for comments

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 either receives an email or a notification from the Creative Cloud desktop application. When you click the notification, it directs you to the referenced artboard.

@ mention
@ mention

For more information, see Reviewer workflow.

Design Spec support for stroke types

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. 

Stroke types
A. Stroke types 

For more information, see Inspect design specifications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy