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. The new experience provides the following advantages:
- 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.
- Developers can easily switch between grid and flow view to view the design specs.
To get a holistic view of your design flow with all the artboard layout information, you can choose to switch between Grid and Flow views.
Efficient to navigate, the Grid view is a simple grid format of the artboard layout information, where as the Flow view preserves the artboard layout and its architecture.
To navigate to default Grid view, click the link name or the grid icon in the upper left corner. To toggle between Grid view and Flow view, click the Flow view icon in the upper-right corner of the screen.
Do feel free to share your feedback on the new experience using Adobe XD user voice.
The specs view shows the artboard details, colors, character styles, and targets used. You can use the collapsible arrow to expand and collapse individual sections.
In the Properties panel, you can view:
- Artboard details, unique colors and character styles used in that artboard, and the target artboard it is linked to.
- CSS code snippets for your designs developers can copy-and-paste right into their code.
- Instances where the colors and character styles have been used when you hover the pointer over
- Hexadecimal color codes and custom labels for the colors used in the artboard.
- Details of various interactions such as transitions, overlays, voice, and auto-animate.
- Comments related to the artboard.
At the bottom of the screen, there are arrow keys, and a Home icon. The left arrow key takes you to previous artboard, the right arrow key takes you to the next artboard while the Home icon takes you to the Home artboard.
For keyboard shortcuts specific to design specs, see Keyboard shortcuts.
You can view the custom labels only if the designer has given the color label names in the Assets panel.