Inspect design specs

On receiving design specs, you can view and inspect attributes such as colors, text, measurements, and hotspots of different objects in an artboard.

Select an object in the artboard to inspect its measurements and styles.

To find out the spacing between objects, select an object and hover the pointer over other objects in the artboard.

When you select an artboard in the design specs link, all the unique colors used in that artboard are shown in the Colors section. You can view the available color formats and use the drop-down list to select the format of your choice. For example, if you prefer to work in HSLA, use the drop-down list to convert the color format to HSLA. This change is persistent across the entire session and the same color formats are used when you view other artboards.

Similarly, you can view all the unique character styles of an artboard in the Character Styles section.

If you have marked any layers in the artboard for export, you can view the colors and character styles of those layers in the Assets section.

To inspect the text properties in an artboard, select a line of text. You can also copy text and its color from the Properties panel.

Adobe XD is unit-less and focuses on the relationships between objects. For example, if you design an iPhone 6/7 artboard at 375 x 667 units, and it uses text with a 10 unit font size, that relationship remains the same, no matter what physical size the design is scaled to.

However, design specs append the default units like px, pt, and dp to the base unitless measurements, according to the platform, so that you can understand the measurements with the platform you are developing for. You can also change the unit of measurements from one unit to another in design specs.

If you have a text element with multiple styles, you can hover over sub-ranges within a text element. Design specs then highlights similar sub-ranges inside the text element with the same styles and lets you access their individual properties from the Properties Inspector.  

You can view and copy the CSS code of your design from the CSS snippets section. The CSS code is automatically generated when you select Web as an output destination in the Share for Development window when publishing design specs.

To copy and paste the code snippet into your CSS files, press and drag the CSS snippets, switch to your code editor, and paste it.

To view layout grids, toggle on Layout Grids in the Property Inspector. This option activates the layout grids for all artboards in the design specs.

Use the toggle button to remove layout grids from the artboard. Use the Opacity slider to control the transparency of the layout grid.

If you have set the parameters within Layout Grids, hover the pointer over those parameters to highlight them in the displayed artboard.

Before you publish a design specs link, ensure to enable layout grids in the relevant artboards. By default, if you have not used layout grids in your designs, they do not appear in the design specs link.

In the design specs view, you can inspect the overlay connections in the UX flow screen.

To inspect the applied overlays, navigate to the Interactions section in the Properties Inspector and click the displayed artifact, or press Shift and click the hotspot in the design specs. 

You can inspect artboard details, styles, and target information for the applied overlay:

• Viewport size: Displays the dimensions of the visible area, which changes based on the size of the device used to access the page.
• Design size: Displays the design dimensions of the artboard.
• Overlay position: Displays the position of the overlay with reference to the source artboard in px, pt, and dp formats. 
• Colors: Displays the colors in RGBA, Hex, and HSLA formats.
• Character Styles: Displays the character styles in px, pt, and dp sizes. The format of the overlay position changes based on the character style you set.
• Interactions: Displays information about the interactions and actions associated with the target artboard.

To revert to the source artboard, press Esc or click Close Overlay on the screen.

In design specs, fixed objects show a pin icon in their upper-left corner when you click them in the artboard. 

To view hotspots defined in the artboard, press and hold the Shift key. To inspect a hotspot, click the displayed artifact in the Interactions section, or Shift-click the hotspot.