View design specs published from Adobe XD, which enable you to inspect the flows, measurements, and styles.

The Design Specs (Beta) feature is an early look at improving the communication between designers and developers. A designer can generate a public URL in XD for sharing with a developer. On accessing the link, a developer can inspect the flows, measurements, and styles of the design.

Note:

Design Specs is currently a Beta feature. A feature labeled Beta means that:

  • The feature addresses a subset of use cases within a larger workflow (that is, designers handing off designs to developers).
  • We expect requests for additional depth and breadth in functionality which we’ll look to tackle before removing the Beta label.
  • The feature’s availability and delivery are subject to change.
  • You can expect the same quality and performance as you would of any other feature we deliver.

Before you start

To view a design spec, you need the following:

  • A link to the design spec (that you receive from the designer)
  • Desktop browser and internet connection. For more information on supported browser versions, see System requirements.

Note: Mobile browsers are not supported/recommended for viewing design specs.

  • Adobe ID

If you don't have an Adobe ID, click Sign up and provide your email address and password. If you have an account, go ahead and sign in with your Adobe ID, or with your Facebook or Google credentials.

Signing in to view design specs
Signing in to view design specs

View end-user experience workflow

After logging in, developers can view the sequence and flow of artboards in the UX flow view.

This view of all the screens in the design specs is really useful. It allows the developer to understand:

  • The number of screens that need to be developed (useful for planning the development work) 
  • The sequence and flows in the design specs (useful for understanding the end-user workflow)
  • The date when the design specs was last updated
The UX flow view that provides you an overview of the project
The UX flow view that provides you an overview of the project

In this view, you can perform the following actions: 

  • Search for a specific screen by name and view it. If the screen is within the viewport, the screen is highlighted. If the screen is not within the viewport, the design spec scrolls to the screen.
  • Hover the mouse over individual screens to see how they are connected to each other. 
  • Zoom and pan to view specific details. In UX flow view, after all the screens in the design specs are displayed in the viewport, you cannot pan further. 
  • Click on the artboard to see the detailed view of the artboard.

In-app help is available to guide you while using the design specs. Notifications appear at the bottom of the screen providing hints on the pan and zoom, the click to copy, and the retaining connections features. 

Notifications also appear to let you know if the 2x images are not loaded in the design specs. 

Inspect design specifications

The default view shows the colors and character styles used on the screen. Click the artboard to view the artboard dimensions.

To the right of the screen, you can see all the unique colors and character styles used on that screen. When you hover the mouse over the colors or the character styles on the right, you can see the instances where they have been used on the screen.

Click a color or character style to copy it.

Inspect text properties, copy character styles, and content, and view measurements
Inspect text properties, copy character styles, and content, and view measurements

Change color formats

You can change the color formats. So, for example, if you prefer to work in HSLA, use the drop-down list to convert the color format into HSLA. This change is persistent across the entire session - the same color formats are used when you view other screens.

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

Inspect measurements

You can inspect the measurements of elements on the screen. Select an element on the screen, and view its height and width co-ordinates.

To find out the spacing between objects, select the element, then hover the mouse over other elements on the screen to see the relative distances.

Inspecting the measurements of objects
Inspecting the measurements of objects

Inspect text properties

You can also inspect the properties of text on the screen. Select a line of text, and see its character styles. You can also copy the character styles, color values, and the content from the design specs.

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

However, in the design specs, height and width measurements, and X and Y co-ordinates are displayed in px, dp, or dt. You can also change the unit of measurements from one unit to another in the design specs. This feature allows you to copy and paste the number value along with the unit of measurement (px, dp, or pt) that you need.

Changing the unit of measurements
Changing the unit of measurements

After logging in to view the design specs, you can see an overview of all the screens in the spec. From there you can click on individual screens and navigate through them.

Navigating between screens
Navigating between screens

At the bottom of the screen, click the Home icon to go to the Home screen. You can also use the left and right arrows to move from one screen to the other. 

If you click linked objects on the screen, you can see the target screen on the right. Click the target screen to navigate to it.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy