If you have a question to ask or an idea to share, come and participate in Adobe XD Community. We would love to hear from you and see your creations.
Learn how to view and inspect attributes such as colors, text, measurements, component states, interaction highlights, and more in design specs.
In a shared design specs link, you can view and experience the prototype, add comments and feedback contextually, and choose to get measurements and specs information for the design.
Design specs link opens in the prototype mode by default. To get the properties and specs info, switch to the design specs tab by clicking the icon in the right rail.
Upon switching to the design specs tab, you can select elements and inspect them on canvas to get attributes such as colors, text, measurements, states, and other properties displayed in the Property Inspector.
Click the {} icon to switch to the variables tab. This tab is available when the designer publishes a design specs link for web. When the designer defines variable names for colors and character styles in a design, you can view the design token information in the variables tab.
Read on to learn how to view and match the attributes in a design specs.
When you click outside an artboard, you are in its screen details view. In this view, you can inspect the screen and details like interaction highlights.
A. Screen details: View dimensions of the screen.
B. Colors: View colors marked for export.
C. Layout grid properties: Toggle to view the grids.
Use the Opacity slider to control the transparency of the colors.
If you mark a layer for export in the XD app, colors used in that layer won't appear in the screen details view.
Click Interaction highlights to view artboard details, styles, design and viewport size, overlay position, colors, character styles, and target information for the applied overlay.
Press and hold the shift key to view the interaction highlights. To inspect them, click the displayed artifact in the Interactions section, or Shift-click the interaction highlights.
When you select a layer on an artboard, you switch to the layer details view. In the Property Inspector, you can view the layer name, and properties like dimensions and appearance.
A. Text properties: Select a line of text to view text properties appended with default units such as px, pt, and dp.
B. Appearance: View colors that are used in an object or text in the Appearance section.
Select a shape to inspect its following attributes:
Select an image to inspect its following attributes:
Select a video to inspect its following attributes:
Hover over subranges within a text element to highlight similar subranges within the text element.
To learn about hyperlinks in XD, see Create hyperlinks.
You can download all the states of a downloadable component. In the XD app, if the designer marks multiple instances of a component for export, only the last instance in the Layers panel will be exported.
To learn more about inspecting design specs in XD, watch this video.
Viewing time: 8 minutes
We've got you started on how to view and inspect design specs. Take a step forward and learn how to review design specs and extract assets from design specs.
If you have a question to ask or an idea to share, come and participate in Adobe XD Community. We would love to hear from you and see your creations.
تسجيل الدخول إلى حسابك