Learn how to inspect design specs in XD.

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

View and inspect measurements

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.

Inspecting the measurements of objects
Inspect the measurements of objects

View colors, character styles, and assets

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.

הערה:

When you select an object in the artboard, colors used for that object are shown in the Appearance section.

Convert colors from one format to another
Convert colors from one format to another

View, inspect, and copy text properties

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.

Changing the unit of measurements
Changing the unit of measurements

View and inspect sub-range text

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.  

Subtext attributes within large text
Sub-range attributes within a large text

View and copy CSS snippets

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.

CSS snippets
CSS snippets

View and inspect layout grid properties

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.

הערה:

Design specs do not display square grids.

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.

Layout grid properties
Layout grid properties

View and inspect overlays

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. 

View and inspect overlays
View and inspect overlays

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.

View and inspect fixed objects

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

Inspect fixed objects
Inspect fixed objects

View and inspect hotspots

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. 

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת