Navigate design specs
- Adobe XD User Guide
- What's new in Adobe XD
- Common questions
- Design, prototype, and share with Adobe XD
- System requirements
- Workspace basics
- Change app language in Adobe XD
- Access UI design kits
- Accessibility in Adobe XD
- Keyboard shortcuts
- Tips and tricks
- Adobe XD subscription options
- Changes to XD Starter Plan
- Artboards, guides, and layers
- Shapes, objects, and path
- Text and fonts
- Components and states
- Masking and effects
- Videos and Lottie animations
- Create interactive prototypes
- Animate prototypes
- Object properties supported for auto-animate
- Create prototypes with keyboard and gamepad
- Create prototypes using voice commands and playback
- Create timed transitions
- Add overlays
- Design voice prototypes
- Create anchor links
- Create hyperlinks
- Preview designs and prototypes
- Share, export, and review
- Share selected artboards
- Share designs and prototypes
- Set access permissions for links
- Work with prototypes
- Review prototypes
- Work with design specs
- Share design specs
- Inspect design specs
- Navigate design specs
- Review and comment design specs
- Export design assets
- Export and download assets from design specs
- Group sharing for enterprise
- Back up or transfer XD assets
- Design systems
- Cloud documents
- Integrations and plugins
- Work with external assets
- Work with design assets from Photoshop
- Copy and paste assets from Photoshop
- Import or open Photoshop designs
- Work with Illustrator assets in Adobe XD
- Open or import Illustrator designs
- Copy vectors from Illustrator to XD
- Plugins for Adobe XD
- Create and manage plugins
- Jira integration for XD
- Slack plugin for XD
- Zoom plug-in for XD
- Publish design from XD to Behance
- XD for iOS and Android
- Known and fixed issues
- Installation and updates
- Launch and crash
- Cloud documents and Creative Cloud Libraries
- Prototype, publish, and review
- Import, export, and working with other apps
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.
In the Flow view, you can:
- Communicate the design and layout hierarchy, and
- Hover over an artboard to view its linked artboards.
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.
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, blend mode properties, overlays, voice, interactions, 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.