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, click the icon in the right rail.
Upon switching to the specs tab, you can hover over 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.
Use the Opacity slider to control the transparency of the colors.
Currently, if you mark a component for export, only the active state of the component is available for download. As a workaround, you can export and share the assets from XD.
To learn more about inspecting design specs in XD, watch this video.
Viewing time: 8 minutes