Simplify design-to-development workflows using Adobe XD.
The Design Specs feature in Adobe XD is changing the game for designer-to-developer workflows.
XD can maintain the editability and visual integrity of your original designs while giving you the ability to create design specs faster. And developers can get exactly what they need for their code, every time—from colors and typography to image dimensions and padding measurements.
Adobe XD lets you do the following:
- Create design specs by selecting the artboards you want, and then share out to the web via a public or private URL.
- Easily download assets in the format and resolution needed, with the ability to view, inspect, and comment on each.
- View workflows for the end-user experience with insight into the sequence and flow of all artboards.
Here are just a few of the ways you can use XD to simplify design and development.
1. Create and share design specs.
You can publish all artboards that are wired to form a prototype flow.
With the Mark for Batch Export feature, you can choose the layers that are intended to be coded as images. These layers can be exported as SVG, PDF, or PNG and made available for download from their respective artboards.
Click the Share icon on the upper right of the screen, and then click Share for Development. In the Title field, type a relevant link name, and then select the platform you want using the Export For drop-down options. When you’re ready to publish, click Create Public Link.
You can select Copy Link to share the link with the developer. XD automatically uploads all artboards that are wired, either directly or indirectly, to the Home screen. Watch this video to learn more.
2. Download assets in the format and resolution you need.
Developers now can get exactly what they need, along with the ability to view, inspect, and comment on published assets. Start by clicking the link to open your file in a browser window. You can see all the selected assets along with other artboard details.
Select an individual asset or multiple assets to download. You can use Cmd/Ctrl+A to select all the assets, or use the Shift key to multi-select. You can change the format of vector assets to SVG, PDF, and PNG, and the format of bitmap assets to PNG and PDF. The assets are downloaded as a .zip file in your Downloads folder.
In addition, each platform — Web, iOS, and Android — has a separate set of resolution settings for export. Learn more.
3. View the experience workflow.
Developers can view the sequence and flow of artboards using UX flow view. This view shows how many screens need to be developed; the sequence of the design specs; and the date of the most recent update. With UX flow view, you can:
- Search for a specific screen by name to view it.
- Hover the mouse over individual screens to see how they are connected to each other.
- Zoom and pan to view specific details.
- Click an artboard to see a detailed view of it.
- Click View Comments to see user comments, or view the interactions set on the elements in the artboard.
There are also a number of keyboard shortcuts you can take to zoom, set the focus on a screen, and more. Find out more.
