July and August 2019 release of Adobe XD.

For a summary of features introduced in earlier releases of Adobe XD, Feature summary | earlier releases.

xd-mnemonic

Adobe XD is a vector-based tool for designing and prototyping user experience 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.


Overview

New Features in Adobe XD 22

Edit in Photoshop

Edit in Photoshop

XD enhances its integration with Adobe Photoshop by allowing you to open and edit XD images directly in Photoshop and update them in real time. As you edit and save the images in Photoshop, XD saves the flattened file, and places the bitmap in XD instead of the edited file. 

For more information, see Working with external assets

Viewing time: 3.20minutes.


Improved plugins panel

Plugins panel

The latest release of XD lets you launch and interact with XD plugins from right within XD user experience, alongside the design canvas. Like the Layers and Assets panel, the new Plugins panel provides easy access to view and modify plugins from within XD. This helps you to maintain the creative flow while working on your XD designs. 

For more information, see View and install plugins.

Viewing time: 4.30 minutes.


CSS snippets in design specs

To aid translating designs into a functional website, you can copy the CSS code snippets from design specs and paste it into your code.

The CSS code is automatically generated when you select Web as an output destination in the Share for Development window when publishing design specs. When you publish your design specs, XD automatically shows the CSS code snippet for the selected layer. 

CSS snippets
CSS snippets

For more information, see Inspect design specs in XD.

Viewing time: 2.58 minutes.


Improvements in component bounds

Components support a variety of overrides, and resize seamlessly for various screen sizes, but can be difficult to use when applying effects or reorganizing objects. In previous XD versions, the content was clipped if you added an object outside the bounds of their original master component.

To fix issues with component bounds, select the master component, right-click to select Fit Bounds to Content. The component bounds are adjusted to show all the clipped objects in the master components as well as the instances.

If you create new components:

  • Shadows and blurs are rendered outside the component bounding box, and
  • Bound area fits all the content within the component.
Fit bounds to content
Fit bounds to content

Viewing time: 4 minutes.


Reduction of fractional pixels

When designing for HiDPI screens, fractional pixels cause distorted content. From XD 22.0, to eliminate design friction and image distortion, XD rounds the pixel values when resizing groups of objects, components, and image masks. However, XD preserves the fractional values of content created before XD 22.0.  

Viewing time: 3.20 minutes.



Toggle between grid view and flow view

To get a holistic view of your design flow with artboard layout information, click the name of the prototype or design specs at the top-left corner of your screen. From the default Grid view, you can also choose to toggle between Grid and Flow views to display the following:

  • The Grid view displays all the artboards laid out in a grid format that you can inspect or navigate through to an artboard.
  • The Flow view lays out the artboard to represent the design and layout hierarchy.
Grid view
Grid view
Flow view
Flow view

For more information, see Navigate design specs in XD.

New Features in Adobe XD 21

Unified share for development links

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 

Viewing time: 2.55 minutes.


For more information, see Navigate design specs in XD.

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 

Viewing time: 2.13 minutes.


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

Viewing time: 3 minutes.


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

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online