Learn how to navigate through different views of a design specs link.

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.

Grid view and flow view

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. 

Grid view
Grid view
Flow view
Flow view

In Grid view, you can:

  • View the thumbnail representation of all the screens,
  • Number of comments on a given artboard,
  • Search for a particular artboard by its name, and
  • View the linked screens for a given artboard.

In the Flow view, you can:

  • Communicate the design and layout hierarchy, and
  • Hover over an artboard to view its linked artboards.

Do feel free to share your feedback on the new experience using Adobe XD user voice.

Specs view

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.

Note:

You can view the custom labels only if the designer has given the color label names in the Assets panel.

Specs view
Specs view

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy