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.
From XD 23.0, you can apply non-destructive blend effects to style your images or graphic assets. Use the blend effects to transform your designs by varying how the colors of objects blend with the colors of its underlying objects and watch your designs come alive!
For more information on applying blend effects, see Apply blend effects.
From XD 23.0, you can combine these keyboard shortcuts with the arrow keys to precisely control the position and size of the UI elements in grid size increments.
- Shift + Arrows: moves the selection in 10px increments.
- Cmd + Arrows: resizes selection in 1px increments (element is pinned in upper-left corner).
- Cmd + Shift + Arrows(Mac) and Alt +Shift +Arrows (Win): resizes selection in 10px increments (element is pinned in upper-left corner).
When the square grid is enabled:
- Shift + Arrows: moves the selection to snap to the grid first and then moves it in grid size increments.
- Cmd + Shift + Arrows(Mac) and Alt +Shift +Arrows (Win): resizes the selection to snap to the grid and then resizes the selection in grid size increments (element is pinned in upper-left corner).
XD 23.0 extends the behavior of the keyboard shortcut Cmd+Click or Ctrl+Click to drill down into the Z-order of objects on design canvas as well as design specs.
If there are several layers stacked above each other, Cmd+Click or Ctrl+Click selects the next object below the selected layer. On reaching the last layer below, use the same keyboard shortcut to traverse back to the topmost layer.
To view and inspect layers hidden below an overlapping layer in design specs, hover and right-click over the specific area on the artboard. This displays the list of layers and its contextual details at that pixel point. You can also use cmd+click to sequentially drill down and view the layer properties.
For more information on accessing overlapping layers, see Resize and rotate objects.
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.