For a summary of features introduced in earlier releases of Adobe XD, Feature summary | earlier releases.
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.
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
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.
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.
For more information, see Inspect design specs in XD.
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.
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.
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.
For more information, see Navigate design specs in XD.
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.
A. View specs toggle icon
For more information, see Navigate design specs in XD.
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.
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
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
For more information, see Navigate design specs in XD and Work with prototypes in XD.
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.
For more information on document presence, see Cloud documents in XD.
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.
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.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.