Feature summary | Adobe XD | 2018 releases

August 2018, September 2018, October 2018, December 2018, January 2019, February 2019, March 2019, April 2019, May 2019, June 2019 and July 2019 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 21

From XD 21.0, the share for development link has been made richer by including interactive prototype information along with design specs. Click the View specs toggle icon  in the shared link to toggle between a design specs and prototype view. 

In the previous versions of XD,  designers shared two different links for prototype and design spec, developers were forced to jump back and forth between the two to interpret the designer’s intent leading to inefficient collaboration.

Designers can now efficiently communicate their design intent and provide all the resources developers need with a single shared link. Developers can understand interactions and intended behaviors better and save time by avoiding constant switching between separate prototype and design spec links. 

Toggle between design specs and prototype from a single link
Toggle between design specs and prototype from a single link

A. View specs toggle icon 

Grid view in shared links

With XD 21.0,  the UX flow view design spec has been replaced by the all new and efficiently navigable grid view in Adobe XD.  Grid view in prototypes and design specs makes it easier for your stakeholders or developers to quickly navigate to the most relevant artboard.

In previous versions of XD, anyone viewing prototypes needed to click through each of its individual artboard until they found the one they were looking for. 

Grid view in shared links
Comparison of UX flow vs grid view for design spec link

In the grid view, reviewers can:

  • View the thumbnail representation of all the screens,
  • Count of comments on a given artboard,
  • Search for an artboard by its name, and
  • Click the linked screen icon to view all the linked screens for a given artboard.

These changes are beneficial to a developer as well as a stakeholder in the following ways:

  • Developer: replace the UX flow with a simplified unified view of all the artboards.
  • Stakeholder: navigate through XD prototypes with multiple screens and jump to the parts of the prototype most relevant to them
Grid view
Grid view

A. Number of comments on an artboard B. Click the linked screen icon to view the linked screens C. Linked screens of the artboard First Cards 

Document presence

To avoid conflicting edits and effort duplication on a cloud document, XD introduces a visual indicator that indicates when other designers are collaborating on the same cloud document. Designers can view a profile avatar of other designers working on the  same cloud document.

Cloud document presence
Document presence

For more information on document presence, see Cloud documents in XD.

Commenting on mobile web prototypes

Often, reviewers access prototypes from a mobile device and want to add comments and view others’ input while on the go. 

With this latest release of XD, you can now view and comment on web prototypes from your mobile device as well a desktop web browser.  This helps you to accelerate review cycles and makes it easier for your stakeholders to provide timely and just in time feedback. 

For more information, see Work with prototypes in Adobe XD

Commenting on mobile web prototypes

View and inspect sub-range text

From XD 21.0, if you have a text element with multiple styles, you can hover over sub-ranges within a text element. Design specs then highlights similar sub-ranges inside the text element with the same styles and lets you access their individual properties as earlier. Previously, when using multiple text styles within a text element, you were unable to isolate those styles and understand which sub-ranges used the same style.

For more information, see Inspect design specs in XD

Sub-range attributes within a large text
Sub-range attributes within a large text

New Features in Adobe XD 20

The June 2019 release of XD has the following enhancements:

Property inspector in prototype mode

Adobe XD 20.0 has moved the prototype head-up-display from the canvas to a property inspector in prototype mode. This new UI improvement  helps you select multiple artboards and define complex prototype attributes in one go.

New Prototype Inspector to define and manage prototype attributes; replaces the Trigger panel
New prototype Property Inspector (replaces the Trigger head-up-display) to define and manage prototype attributes

Viewing time: 1 minute.

Plugins panel

The new plugins panel brings the power of plugins to your fingertips, with quick access to the plugin functionality from within the XD application. Alongside the Assets and Layers panels, the Plugins panel allows you to quickly access installed plugins, and launch the Plugin Manager to discover and install new ones.

Plugin launch panel
Plugin launch panel

Superscript and subscript

The latest release of Adobe XD extends text transformation to include superscript and subscript options in the property inspector. You can use these options to creatively transform your registered marks, trademarks, and copyrights in your designs and view them web and mobile as well.

For more information, see Drawing and text tools.

Superscript and subscript text transformations
Superscript and subscript text transformations

Viewing time: 1 minute.

JIRA 2.0 support

JIRA 2.0 integration improves the collaborative ecospshere by providing additional information about XD documents such as number of artboards or avatars available.

For more information, see Jira integration for XD

Design systems in XD

Design systems in XD
Design systems in XD

When designing digital products at scale, it becomes increasingly challenging and critical to remain consistent. Under the increased pressures of content velocity, organizations are searching for ways to move faster when designing and building customer experiences – maintaining consistency and increasing efficiency across an increasingly complex ecosystem of platforms and devices.

A design system unites multi-disciplinary product teams (designers, developers, and stakeholders) around a common visual language by providing a consistent and robust design patterns that can be reused in different combinations. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life. For more information on design systems in XD, see Design systems.

To learn more about design systems in XD, do check this video.

Viewing time: 1 minute.

Linked assets

With the ever-increasing design surfaces, designers need an easy way to create and maintain consistent designs at scale. 

With XD 19.0, you can easily share and consume not only components — or what was formerly known as symbols — but colors and character styles as well. This is incredibly handy if  you are sharing sticker sheet with your team or reuse design elements across projects.

Linked Assets complement the workflow of linked components. When you modify a linked asset in the source document, all the  consuming documents with those linked assets receive update notifications. From there, you can choose preview and accept the updates. For more information, see Work with linked assets.

To learn more about linked assets, do check this video.

Viewing time: 1 minute.

Components with overrides

 The latest release of Adobe XD has just taken a quantum leap forward when it comes to building out a complex user experiences with the introduction of components in the application. Components replace what has been symbols in the past, and make the task of building out repeated design elements infinitely more streamlined and powerful. Now, it’s quick and easy to create multiple variations of a component (formerly called a symbol), change its properties, and override all the common properties at the same time. For more information on working with overrides in components, see Component overrides.

To learn more about components in XD, do check this video.

Viewing time: 1 minute.

Keyboard and gamepad triggers

Adobe XD now let’s you use keyboard shortcuts and gamepad triggers to simulate native desktop applications and prototype an enriched game experience or design. When wiring a prototype, you can select Keys/Gamepad from the Trigger options and assign any key. You can use these triggers with Tap, Drag, Time, and Voice to prototype for different use cases like desktop apps, games, and presentations. For more information on using keyboard and gamepad triggers, see Prototype using keyboard and gamepad triggers.

To learn more about keyboard and gamepad triggers, do check this video.

Viewing time: 1 minute.

Artboard guides

Custom artboard guides let you align elements and objects effortlessly across artboards without the need to rely on rulers. You can create guides, tweak their position, copy-paste guides across multiple artboards or remove them. You can also lock or hide the visibility of the guides. For more information on creating custom artboard guides, see Working with artboards and grids.

To learn more about artboard guides, do check this video.

Viewing time: 1 minute.

Polygon tool

With the latest release of Adobe XD, you have even more ways to express your vision with the new polygon tool with up to 100 sides. You can also edit the shapes of these polygons to achieve the desired shape. You can now be more expressive when creating common UI elements such as buttons, pointers, ratings and other basic icons and graphics.  For more information on creating custom artboard guides, see Drawing and text tools in XD.

To learn more about polygon tool, do check this video.

Viewing time: 1 minute.

Uppercase, lowercase, title case and strikethrough

The latest release of Adobe XD includes greater creative expression with regards to text transformations. You can change text styles to uppercase, lowercase, use strikethrough, and titling case not just in XD design application, but in web and mobile previews as well. This would be useful for aligning styles for different text areas such as section titles, error messages, or labels, and you no more need to rely on visual hacks to achieve these text transformations. For more information on text transformations, see Text tools.

To learn more about text transformations, do check this video.

Viewing time: 1 minute.

Responsive resize for components

With the latest release of Adobe XD you  can combine the best of components (formerly symbols) and responsive resize to work with groups of objects on the design canvas.  Responsive resize allows you to resize groups of objects while keeping their placement and scalability. All you have to do is resize the group on the design canvas, and XD retains the relative spacing in place. Components are also resizeable, and come with the powerful capabilities of responsive resize baked right in. For more information on working with responsive resize in components, see Resize components.

To learn more about responsive resize for components, do check this video.

Viewing time: 1 minute.

Request access to private prototypes and design specs

Adobe XD makes it easy for you to share your designs using sharable prototypes and design specs links. Now you can request access to a privately shared prototype or design spec and the design owner can approve or deny access. For more information, see Request access for private links.

To learn more about the request access to private prototypes and design specs, do check this video. 

Viewing time: 1 minute.

Voice prototype notifications

When a prototype does not respond to a voice command, you can troubleshoot that interaction from the desktop preview app — with a visual preview of what Adobe XD hears. For more information, see Troubleshoot voice interactions

To learn more about the voice prototype notifications, do check this video. 

Viewing time: 1 minute.

Resolve missing fonts

Activating from Adobe fonts
Activating from Adobe fonts

With the latest release of Adobe XD, we’ve streamlined the task of loading missing fonts from the Adobe Font Library along with managing non-Adobe fonts, all directly within the application. 

To ensure a seamless experience when working with Adobe fonts, XD automatically activates the missing fonts available in Adobe Fonts Library on your machine without your intervention.

As long as you are online, opening a document that has missing fonts which are available in Adobe Fonts (to which you have access to via your Creative Cloud Subscription), XD automatically activates them on your machine.

Fonts that are activated from Adobe Fonts are highlighted with a blue activation icon, and as soon they are ready to use, they are available in your document, with no intervention from your end.

Auto-activate Adobe fonts
Auto-activate Adobe fonts

A. Missing fonts B. Activating fonts 

Check out this video on working with missing fonts.

For more information, see Manage assets and components

Drag gesture support in a prototype web browser

You can now optimally experience your prototype behavior as you designed it for drag effects when viewing or sharing web prototypes. In previous releases, drag gestures were supported on desktop and defaulted to tap on web; but with this update you can actually drag them on a web browser.

Drag gesture in a browser
Drag gesture in a browser

For more information, see Create prototypes using auto-animate.

Copy/paste vector content to Illustrator

Vector content to Illustrator
Vector content to Illustrator

You can now copy XD vector content to the clipboard and then paste it as editable layers into Adobe Illustrator. In previous versions, Illustrator was pasting flattened images for content copied from XD and this has now been upgraded to an SVG based vector transfer.

This feature is compatible with Illustrator version 23.0.2 or later.

Check out this video on how to copy/paste vector content to Illustrator.

For more information, see Working with external assets.

Hide navigation controls in web prototypes

You can now control the visibility of pagination and navigation controls in your web prototype to create a more controlled environment for user testing.

Show and hide navigation controls
Show and hide navigation controls

You can enable or disable Show Navigation Controls within the Share option, and if the controls are:

  • Enabled (default setting): the prototype web app shows the same Home, Back and Next buttons.
  • Disabled: prototype web app navigation controls and the artboard numbers are not visible. You can use the defined hotspots to interact with prototypes and click the Home button to navigate to the home screen. In case of a mobile experience, when you open a prototype link, you can view the onboarding screen, the left/right chevrons are hidden, and the swipe gesture is disabled.

If prototype flows have wires, you can also choose to show navigation controls when publishing your prototypes. 

Note:

if you’d like to take advantage of this new feature even for your existing links, re-publish your prototype with Show Navigation Controls turned off.

Navigation controls disabled
Navigation controls disabled

Improvements in mark for export

Mark for export
Mark for export

You can select any object on the design canvas and mark it for export by clicking the new Mark for Export check box in the Property Inspector or right-clicking and selecting it from the menu as well.

From this release onwards, all bitmap images imported into XD are automatically marked for export. When you import or open Illustrator or Photoshop document with images, XD automatically marks all bitmap images for export. 

You can either select File > Export > Batch to export all the layers marked for export, or alternatively, Share > Share for Development and include assets in Design Specs. 

Note:

Mark for Batch Export option is now renamed as Mark for Export.

Check out this video on marking assets for export.

Enhancements to the selection tool

Object selection across multiple groups
Object selection across multiple groups

XD has enhanced the selection tool, making selecting content across groups much more powerful. You can select objects within multiple groups on the canvas using Cmd/Ctrl+Shift+Click independent of which groups they're part of. Once selected, you can easily change common attributes in the Properties Inspector, you can duplicate the content by Alt-dragging, or using Cmd/Ctrl+D.

Check out this video on selecting objects across multiple groups.

JIRA server integration

Adobe XD integration with Jira Software streamlines collaboration between designers and developers with instant access to shared XD prototypes and design specs right in your Jira issue.

Extending support to Jira Software Server and Jira Software Data Center bring these benefits to enterprise customers that need a custom solution with special data governance requirements. For information on how Jira admins can enable this integration, see Jira integration for XD.

Record voice interactions with audio narration

Adobe XD introduces the ability to add narration using your microphone when you record a desktop preview interaction. As you click through, any voice narration is also included with the recording. This is especially useful for a remote client application walkthrough without being physically present with a client or stakeholder.

While this feature has been accessible to Windows users through an OS-level control in Gamecenter, this new functionality extends to Mac users. 

Check out this video on how to add narration to a prototype when recording.

Record interactions
Record interactions

For more information on how to record voice interactions and add them to your narration, see Add a voice narration to a prototype.

Eyedropper keyboard shortcut to change colors

Adobe XD introduces a shortcut for the eyedropper that makes it easier to change object colors. Select the object or group of objects that you'd like to change the color of, and use i on the keyboard to load the eyedropper cursor and select any color on the design canvas to modify the color of an object. The color picker allows you to select absolute colors only; you cannot use the tool to select linear or radial gradients.

Check out this video on how to use the eyedropper tool.

Eyedropper tool shortcut
Eyedropper tool shortcut

For more information on how to use the eyedropper tool shortcut, see Keyboard shortcuts in XD.

Utility navigation components in prototype and design specs

When accessing XD published prototypes or design specs on the web, you have a unified experience to access the utility navigation controls. This ensures a unified experience when you interact with other Adobe web applications.

For more information, see Work with prototypes in XD.

UI improvements pertaining to switching between public and private sharing

To improve the discoverability and usage of the Share feature and its workflows, XD provides the following options to share a prototype.

  • Anyone with the link can view
  • Only invited people can view

For more information, see Share embed designs and prototypes.

Auto-animate support in browsers

With Auto-animate in Adobe XD, you're able to create prototypes with immersive animated transitions that are fully functional and interactive on devices and view them in the preview window as well as your web browser.

Now, you can view animation in prototypes and the animation property values in design specs on a supported web browser, which should make it easier to showcase your designs to stakeholders and other partners.

For more information, see Create prototypes with auto-animate and Supported and un-supported properties for auto-animate in XD artboard transitions.

You can also check out this video to see how auto-animate dissolves in a web browser.

Auto-animate support in browsers
Auto-animate output in a web browser

Voice languages and accent support

Voice now supports all Adobe XD languages for both commands and speech playback. Whether you're designing for users that speak English, French, German, Korean, or Japanese, you're able to prototype voice experiences in their native language, with support for more languages in the future.

The latest release of XD also supports regional accents for voice commands, so for example, whether you're in the U.S. or the UK, Canada or Australia, you will be able to successfully prototype an effective, localized voice experience. For more information, see Voice design and prototyping in Adobe XD.

You can also check out this video for information on voice language and accent support.

View all comments across multiple artboards

The view all comments feature in Adobe XD makes it much easier to manage stakeholder feedback in prototypes and design specs. You can now view all comments in a single list, and click an individual comment to go right to the affected artboard and reply, resolve, or delete comments. 

For more information, see View all comments

You can also check out this video for information on all comments across multiple artboards.

View all comments
View all comments

New Features in Adobe XD 19

Design systems in XD

Design systems in XD
Design systems in XD

When designing digital products at scale, it becomes increasingly challenging and critical to remain consistent. Under the increased pressures of content velocity, organizations are searching for ways to move faster when designing and building customer experiences – maintaining consistency and increasing efficiency across an increasingly complex ecosystem of platforms and devices.

A design system unites multi-disciplinary product teams (designers, developers, and stakeholders) around a common visual language by providing a consistent and robust design patterns that can be reused in different combinations. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life. For more information on design systems in XD, see Design systems.

To learn more about design systems in XD, do check this video.

Viewing time: 1 minute.

Artboard guides

Custom artboard guides let you align elements and objects effortlessly across artboards without the need to rely on rulers. You can create guides, tweak their position, copy-paste guides across multiple artboards or remove them. You can also lock or hide the visibility of the guides. For more information on creating custom artboard guides, see Working with artboards and grids.

To learn more about artboard guides, do check this video.

Viewing time: 1 minute.

Keyboard and gamepad triggers

Adobe XD now let’s you use keyboard shortcuts and gamepad triggers to simulate native desktop applications and prototype an enriched game experience or design. When wiring a prototype, you can select Keys/Gamepad from the Trigger options and assign any key. You can use these triggers with Tap, Drag, Time, and Voice to prototype for different use cases like desktop apps, games, and presentations. For more information on using keyboard and gamepad triggers, see Prototype using keyboard and gamepad triggers.

To learn more about keyboard and gamepad triggers, do check this video.

Viewing time: 1 minute.

Components with overrides

 The latest release of Adobe XD has just taken a quantum leap forward when it comes to building out a complex user experiences with the introduction of components in the application. Components replace what has been symbols in the past, and make the task of building out repeated design elements infinitely more streamlined and powerful. Now, it’s quick and easy to create multiple variations of a component (formerly called a symbol), change its properties, and override all the common properties at the same time. For more information on working with overrides in components, see Component overrides.

To learn more about components in XD, do check this video.

Viewing time: 1 minute.

Linked assets

With the ever-increasing design surfaces, designers need an easy way to create and maintain consistent designs at scale. 

With XD 19.0, you can easily share and consume not only components — or what was formerly known as symbols — but colors and character styles as well. This is incredibly handy if  you are sharing sticker sheet with your team or reuse design elements across projects.

Linked Assets complement the workflow of linked components. When you modify a linked asset in the source document, all the  consuming documents with those linked assets receive update notifications. From there, you can choose preview and accept the updates. For more information, see Work with linked assets.

To learn more about linked assets, do check this video.

Viewing time: 1 minute.

Polygon tool

With the latest release of Adobe XD, you have even more ways to express your vision with the new polygon tool with up to 100 sides. You can also edit the shapes of these polygons to achieve the desired shape. You can now be more expressive when creating common UI elements such as buttons, pointers, ratings and other basic icons and graphics.  For more information on creating custom artboard guides, see Drawing and text tools in XD.

Uppercase, lowercase, title case and strikethrough

The latest release of Adobe XD includes greater creative expression with regards to text transformations. You can change text styles to uppercase, lowercase, use strikethrough, and titling case not just in XD design application, but in web and mobile previews as well. This would be useful for aligning styles for different text areas such as section titles, error messages, or labels, and you no more need to rely on visual hacks to achieve these text transformations. For more information on text transformations, see Text tools.

Responsive resize for components

With the latest release of Adobe XD you  can combine the best of components (formerly symbols) and responsive resize to work with groups of objects on the design canvas.  Responsive resize allows you to resize groups of objects while keeping their placement and scalability. All you have to do is resize the group on the design canvas, and XD retains the relative spacing in place. Components are also resizeable, and come with the powerful capabilities of responsive resize baked right in. For more information on working with responsive resize in components, see Resize components.

Request access to private prototypes and design specs

Adobe XD makes it easy for you to share your designs using sharable prototypes and design specs links. Now you can request access to a privately shared prototype or design spec and the design owner can approve or deny access. For more information, see Request access for private links.

Voice prototype notifications

When a prototype does not respond to a voice command, you can troubleshoot that interaction from the desktop preview app — with a visual preview of what Adobe XD hears. For more information, see Troubleshoot voice interactions

To learn more about the voice prototype notifications, do check this video. 

Viewing time: 1 minute.

Resolve missing fonts

Activating from Adobe fonts
Activating from Adobe fonts

With the latest release of Adobe XD, we’ve streamlined the task of loading missing fonts from the Adobe Font Library along with managing non-Adobe fonts, all directly within the application. 

To ensure a seamless experience when working with Adobe fonts, XD automatically activates the missing fonts available in Adobe Fonts Library on your machine without your intervention.

As long as you are online, opening a document that has missing fonts which are available in Adobe Fonts (to which you have access to via your Creative Cloud Subscription), XD automatically activates them on your machine.

Fonts that are activated from Adobe Fonts are highlighted with a blue activation icon, and as soon they are ready to use, they are available in your document, with no intervention from your end.

Auto-activate Adobe fonts
Auto-activate Adobe fonts

A. Missing fonts B. Activating fonts 

Check out this video on working with missing fonts.

For more information, see Manage assets and components

Drag gesture support in a prototype web browser

You can now optimally experience your prototype behavior as you designed it for drag effects when viewing or sharing web prototypes. In previous releases, drag gestures were supported on desktop and defaulted to tap on web; but with this update you can actually drag them on a web browser.

Drag gesture in a browser
Drag gesture in a browser

For more information, see Create prototypes using auto-animate.

Copy/paste vector content to Illustrator

Vector content to Illustrator
Vector content to Illustrator

You can now copy XD vector content to the clipboard and then paste it as editable layers into Adobe Illustrator. In previous versions, Illustrator was pasting flattened images for content copied from XD and this has now been upgraded to an SVG based vector transfer.

This feature is compatible with Illustrator version 23.0.2 or later.

Check out this video on how to copy/paste vector content to Illustrator.

For more information, see Working with external assets.

Hide navigation controls in web prototypes

You can now control the visibility of pagination and navigation controls in your web prototype to create a more controlled environment for user testing.

Show and hide navigation controls
Show and hide navigation controls

You can enable or disable Show Navigation Controls within the Share option, and if the controls are:

  • Enabled (default setting): the prototype web app shows the same Home, Back and Next buttons.
  • Disabled: prototype web app navigation controls and the artboard numbers are not visible. You can use the defined hotspots to interact with prototypes and click the Home button to navigate to the home screen. In case of a mobile experience, when you open a prototype link, you can view the onboarding screen, the left/right chevrons are hidden, and the swipe gesture is disabled.

If prototype flows have wires, you can also choose to show navigation controls when publishing your prototypes. 

Note:

if you’d like to take advantage of this new feature even for your existing links, re-publish your prototype with Show Navigation Controls turned off.

Navigation controls disabled
Navigation controls disabled

Improvements in mark for export

Mark for export
Mark for export

You can select any object on the design canvas and mark it for export by clicking the new Mark for Export check box in the Property Inspector or right-clicking and selecting it from the menu as well.

From this release onwards, all bitmap images imported into XD are automatically marked for export. When you import or open Illustrator or Photoshop document with images, XD automatically marks all bitmap images for export. 

You can either select File > Export > Batch to export all the layers marked for export, or alternatively, Share > Share for Development and include assets in Design Specs. 

Note:

Mark for Batch Export option is now renamed as Mark for Export.

Check out this video on marking assets for export.

Enhancements to the selection tool

Object selection across multiple groups
Object selection across multiple groups

XD has enhanced the selection tool, making selecting content across groups much more powerful. You can select objects within multiple groups on the canvas using Cmd/Ctrl+Shift+Click independent of which groups they're part of. Once selected, you can easily change common attributes in the Properties Inspector, you can duplicate the content by Alt-dragging, or using Cmd/Ctrl+D.

Check out this video on selecting objects across multiple groups.

New Features in Adobe XD 18

The April 2019 release of XD has the following exciting enhancements:

Language switcher

XD provides a robust in-app language switching experience to modify the language XD is used in. With this new addition, you can control the language you want to use XD in, and not be tied to the OS language selection. The new language preferences will persist across all XD updates.

Note:

Language switching options are disabled for Creative Cloud team users in China.

Language switcher
Language switcher

UI improvements in the commenting panel

To ensure consistency with other Creative Cloud products, Adobe XD introduces enhanced readability of comments and replies within the commenting panel interface. This enhancement improves readability across multiple comments with invisible captcha (automated) for guest commenting, new indentation in the commenting pane, timestamp adjacent to the reviewer name, and so on.

For more information, see Work with prototypes in XD.

Commenting improvements
Commenting improvements

New Features in Adobe XD 17

Resolve missing fonts

Activating from Adobe fonts
Activating from Adobe fonts

With the latest release of Adobe XD, we’ve streamlined the task of loading missing fonts from the Adobe Font Library along with managing non-Adobe fonts, all directly within the application. 

To ensure a seamless experience when working with Adobe fonts, XD automatically activates the missing fonts available in Adobe Fonts Library on your machine without your intervention.

As long as you are online, opening a document that has missing fonts which are available in Adobe Fonts (to which you have access to via your Creative Cloud Subscription), XD automatically activates them on your machine.

Fonts that are activated from Adobe Fonts are highlighted with a blue activation icon, and as soon they are ready to use, they are available in your document, with no intervention from your end.

Auto-activate Adobe fonts
Auto-activate Adobe fonts

A. Missing fonts B. Activating fonts 

Check out this video on working with missing fonts.

For more information, see Manage assets and components

Drag gesture support in a prototype web browser

You can now optimally experience your prototype behaviour as you designed it for drag effects when viewing or sharing web prototypes. In previous releases, drag gestures were supported on desktop and defaulted to tap on web; but with this update you can actually drag them on a web browser.

Drag gesture in a browser

For more information, see Create prototypes using auto-animate.

Copy/paste vector content to Illustrator

Vector content to Illustrator
Vector content to Illustrator

You can now copy XD vector content to the clipboard and then paste it as editable layers into Adobe Illustrator. In previous versions, Illustrator was pasting flattened images for content copied from XD and this has now been upgraded to an SVG based vector transfer.

This feature is compatible with Illustrator version 23.0.2 or later.

Check out this video on how to copy/paste vector content to Illustrator.

For more information, see Working with external assets.

Hide navigation controls in web prototypes

You can now control the visibility of pagination and navigation controls in your web prototype to create a more controlled environment for user testing.

Show and hide navigation controls
Show and hide navigation controls

You can enable or disable Show Navigation Controls within the Share option, and if the controls are:

  • Enabled (default setting): the prototype web app shows the same Home, Back and Next buttons.
  • Disabled: prototype web app navigation controls and the artboard numbers are not visible. You can use the defined hotspots to interact with prototypes and click the Home button to navigate to the home screen. In case of a mobile experience, when you open a prototype link, you can view the onboarding screen, the left/right chevrons are hidden, and the swipe gesture is disabled.

If prototype flows have wires, you can also choose to show navigation controls when publishing your prototypes. 

Note:

if you’d like to take advantage of this new feature even for your existing links, re-publish your prototype with Show Navigation Controls turned off.

Navigation controls disabled
Navigation controls disabled

Check out this video on hiding navigation controls in web prototypes.

Improvements in mark for export

Mark for export
Mark for export

You can select any object on the design canvas and mark it for export by clicking the new Mark for Export check box in the Property Inspector or right-clicking and selecting it from the menu as well.

From this release onwards, all bitmap images imported into XD are automatically marked for export. When you import or open Illustrator or Photoshop document with images, XD automatically marks all bitmap images for export. 

You can either select File > Export > Batch to export all the layers marked for export, or alternatively, Share > Share for Development and include assets in Design Specs. 

Note:

Mark for Batch Export option is now renamed as Mark for Export.

Check out this video on marking assets for export.

Enhancements to the selection tool

Object selection across multiple groups
Object selection across multiple groups

XD has enhanced the selection tool, making selecting content across groups much more powerful. You can select objects within multiple groups on the canvas using Cmd/Ctrl+Shift+Click independent of which groups they're part of. Once selected, you can easily change common attributes in the Properties Inspector, you can duplicate the content by Alt-dragging, or using Cmd/Ctrl+D.

Check out this video on selecting objects across multiple groups.

JIRA server integration

Adobe XD integration with Jira Software streamlines collaboration between designers and developers with instant access to shared XD prototypes and design specs right in your Jira issue.

Extending support to Jira Software Server and Jira Software Data Center bring these benefits to enterprise customers that need a custom solution with special data governance requirements. For information on how Jira admins can enable this integration, see Jira integration for XD.

New Features in Adobe XD 16

Record voice interactions with audio narration

Adobe XD introduces the ability to add narration using your microphone when you record a desktop preview interaction. As you click through, any voice narration is also included with the recording. This is especially useful for a remote client application walkthrough without being physically present with a client or stakeholder.

While this feature has been accessible to Windows users through an OS-level control in Gamecenter, this new functionality extends to Mac users. 

Check out this video on how to add narration to a prototype when recording.

Record interactions
Record interactions

For more information on how to record voice interactions and add them to your narration, see Add a voice narration to a prototype.

Eyedropper keyboard shortcut to change colors

Adobe XD introduces a shortcut for the eyedropper that makes it easier to change object colors. Select the object or group of objects that you'd like to change the color of, and use i on the keyboard to load the eyedropper cursor and select any color on the design canvas to modify the color of an object. The color picker allows you to select absolute colors only; you cannot use the tool to select linear or radial gradients.

Check out this video on how to use the eyedropper tool.

Eyedropper tool shortcut
Eyedropper tool shortcut

For more information on how to use the eyedropper tool shortcut, see Keyboard shortcuts in XD.

Utility navigation components in prototype and design specs

When accessing XD published prototypes or design specs on the web, you have a unified experience to access the utility navigation controls. This ensures a unified experience when you interact with other Adobe web applications.

For more information, see Work with prototypes in XD.

Utility navigation
Utility navigation

UI improvements pertaining to switching between public and private sharing

To improve the discoverability and usage of the Share feature and its workflows, XD provides the following options to share a prototype.

  • Anyone with the link can view
  • Only invited people can view
UI improvements
UI improvements

For more information, see Share embed designs and prototypes.

New Features in Adobe XD 15

The January 2019 release of XD has the following exciting new features:

Enhancements include the ability to View all comments across multiple artboards.

Auto-animate support in browsers

With Auto-animate in Adobe XD, you're able to create prototypes with immersive animated transitions that are fully functional and interactive on devices and view them in the preview window as well as your web browser.

Now, you can view animation in prototypes and the animation property values in design specs on a supported web browser, which should make it easier to showcase your designs to stakeholders and other partners.

For more information, see Create prototypes with auto-animate and Supported and un-supported properties for auto-animate in XD artboard transitions.

You can also check out this video to see how auto-animate dissolves in a web browser.

Auto-animate support in browsers
Auto-animate support in browsers

Voice languages and accent support

Voice now supports all Adobe XD languages for both commands and speech playback. Whether you're designing for users that speak English, French, German, Korean, or Japanese, you're able to prototype voice experiences in their native language, with support for more languages in the future.

The latest release of XD also supports regional accents for voice commands, so for example, whether you're in the U.S. or the UK, Canada or Australia, you will be able to successfully prototype an effective, localized voice experience. For more information, see Voice design and prototyping in Adobe XD.

You can also check out this video for information on voice language and accent support.

View all comments across multiple artboards

The view all comments feature in Adobe XD makes it much easier to manage stakeholder feedback in prototypes and design specs. You can now view all comments in a single list, and click an individual comment to go right to the affected artboard and reply, resolve, or delete comments. 

For more information, see View all comments

You can also check out this video for information on all comments across multiple artboards.

New Features in Adobe XD 14

Improved collaboration with cloud-native documents

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 components 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 components, 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 component on canvas

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

For more information, see Preview linked component updates.

Preview linked component updates
Preview linked component updates

UI changes pertaining to share workflows

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-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 components

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 Components, designers can share components across documents and ensure that they are always up to date.

Linked Components 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 Component in the source document, XD notifies documents with instances of that Linked Component with those updates. From there, you can preview the changes and choose to accept or reject them. For more information, see Work with linked components.

To learn more about Linked Components, check this video.

Design tooling innovation through plugins

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

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.

Previous behavior

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.

 Adobe

Get help faster and easier

New user?