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

The Design Specs 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 and comment on the flows, measurements, and design styles.

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.

Nota:

Design Spec links are public and accessible to anyone with a link. To make accessing Design Specs more seamless, effective as of March 21, 2018, viewing a published Design Specs no longer requires a sign-in with an Adobe ID.

For more information, see Change to Design Specs for Adobe XD.

View end-user experience workflow

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 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 were 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. 
    Zoom keyboard shortcuts:
    • CMD/Ctrl + Mousewheel
    • CMD/Ctrl + +/- keys to zoom
    • CMD+0 to reset zoom

Pan keyboard shortcuts:
Space + click and drag, or Shift + arrow key (for a faster pan).

  • Other keyboard shortcuts you can use:
    • Set the focus on a screen, and use left and right arrow keys to go through the screens in the UX flow view.
    • Press Enter to go to Spec view. Press Esc to return to UX flow view.
  • Click the artboard to see the detailed view of the artboard.
  • Click View Comments to view user comments on the Design Specs screen.

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. 

Inspect design specifications

The default view shows the screen details, colors, character styles, and targets used on the screen. You can use the collapsible arrow to expand and collapse the individual sections.

You can also click the artboard to view the artboard dimensions. 

In the Properties panel located to the right of the screen, you can:

  • View the screen details, unique colors and character styles used on that screen, and the target artboard it is linked to.
  • Expand or collapse the listed options in the Properties panel. 
  • When you hover the mouse over the colors or the character styles on the right pane, you can see the instances where they have been used on screen.
  • View the hexadecimal color codes and custom labels for the colors used on the screen.
  • View details of the various interactions such as transitions, overlays, voice and auto-animate on the screen.
  • You can click View comments to view comments related to the artboard. To copy a color or character style, click it.

Nota:

You can view the custom labels only if the designer has renamed the color label names in the Asset panel.

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

Reviewing and commenting design specs

From XD 10.0 release onwards, Design Specs has the same commenting features as Prototypes. You can comment on design specs, use a commenting pin to pin the exact location of the comment, and move the pin if necessary. When navigating a link, the comment and their responses are retained in context. A commenting notification email sent to the author provides a direct contextual link to the artboard. Your responses are reflected when the developer refreshes their browser. 

You can also pin or move your comments to indicate specific areas in the artboard. To pin a comment, click Place a pin, and then click a specific location on the artboard. Then type in your comment, and click Submit to submit the comment.

 You can also use Cancel to cancel an added comment in the comment field.

You can also switch from a regular comment to a pinned comment. A commenting notification email provides a direct link to the artboard where a comment is made, and not just the home artboard.

Commenting options
Commenting options
Commenting
Commenting options

XD assigns a number to every pinned comment. The comments in the comments panel also reflect these numbers, allowing designers to easily identify the context of the comment.

The author can view the comments and mark them as resolved when done. You can check your resolved comments by clicking View Resolved Comments.  If you think your comment has been wrongly marked as resolved, you can click Move to Unresolved to keep the comment open.

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, the Design Specs appends the default units like px, pt, and dp as per the platform to the base unitless measurements, so that you better understand the measurements with the platform you are developing for. You can also change the unit of measurements from one unit to another in the Design Specs.

Changing the unit of measurements
Changing the unit of measurements

View and inspect layout grid properties

If the designer chose to use layout grids in the design, you can view and inspect it when viewing a screen in Design Specs. 

The values listed are the values set by the designer. If you hover over property labels, they are highlighted on the displayed screen.

To view layout grids, move the layout grid slider to the right. This option turns on the layout grids for all the screens in the Design Specs. To switch off layout grids, move the slider to the left. You can also control the transparency of the layout grid by moving the Opacity slider.

Before you publish the Design Specs link, ensure to leave the layout grids enabled in the artboards where you want the developer to view it. By default, layout grids which are not used in your design do not appear in the Design Specs link.

Inspect overlays

In the Design Specs view, developers can inspect the overlay connections in the UX flow screen and call the overlay on top of the source screen or artboard.

When you hover the mouse over the artboards or when you Shift+click an artboard or screen, a dotted line connection appears in the UX flow to indicate that overlays have been applied.

Inspect overlays
Inspect overlays
Dotted connection to identify overlays
Dotted connection to identify overlays

To inspect the applied overlays, navigate to the Overlays section in the Properties panel and click the thumbnail in the Overlays section, or press Shift and click the hotspot in the Design Specs. 

Applied overlays
Applied overlays

You can inspect and infer screen details, styles, and target information for the specific overlay that has been applied:

  • 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 screen.
  • Overlay position: Displays the position of the overlay with reference to the source screen on the base artboard in px, pt, and dp formats. 
  • Colors: Displays the colors used 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.
  • Targets: Displays information about the target artboards.

Press Esc or Close Overlay to revert to the base artboard.

Inspect fixed elements

To inspect the fixed elements in a design, click the pin icon in the upper-left corner of the Design Specs. This icon indicates that design elements is fixed on the artboard. 

Inspect fixed elements
Inspect fixed elements
Fixed position
Fixed position

View and inspect hotspots

To inspect hotspots in Design Specs, click the displayed artifact in the Overlays or the Target sections, or press Shift-click the hotspot in the Design Specs. 

In the UX flow view, you can see an overview of all the screens in the spec. From there you can click 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 click 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. To navigate it, click the target screen.

To get back to UX flow view from the Spec view, press Esc on the keyboard.

Extract assets for design specs

You can save time and provide developers with the ability to extract and download assets from design specs. Use the feature to mark layers as assets for export and send as a design specs link. Developers can download all the vector assets as SVG, PNG, PDF, and bitmap assets as PNG and PDF.

Mark your assets in design specs

  1. Open the Layers panel and select an artboard. Hover over a layer and click the Mark for batch export icon. 

    Mark for batch export
    Mark for batch export

    Nota:

    If you want to select specific assets from groups, click the group icon to expand the group content and then select the assets.

Share and download assets on the web

In Design specs, you can provide developers with a central location to download all the selected assets and other details of your artboard. You can pick and choose the assets. When you share a design specs link with the developer, all the assets you mark for export are available on the web for the developer. The design specs include both bitmaps and vector assets.

  1. Follow the instructions in the Mark your assets in design specs section.

  2. Click the Share icon on the upper right of the screen and select Publish Design Specs.

    Select Publish Design Specs
    Select Publish Design Specs
  3. In the Publish dialog, select the Include Assets option, and view the number of assets marked. From the Export for drop-down, select the platform for the design export, and click Create Public Link.

    Settings to create public link
    Settings to create public link

    Based on the platform you create the design for, each platform has a separate set of resolutions settings:

    • Web: Assets are exported at 1x and 2x resolutions.
    • iOS: Assets are exported at 1x, 2x, and 3x resolutions. 
    • Android: Assets are optimized and exported for the following Android screen densities:
      • ldpi - Low density (75%)
      • mdpi - Medium density (100%)
      • hdpi - High density (150%)
      • xhdpi - Extra high density (200%)
      • xxhdpi - Extra extra high density (300%)
      • xxxhdpi - Extra extra extra high density (400%)
  4. Click the Open in Browser icon to open the project in the browser. Select an artboard to view the assets. The browser displays the selected assets along with other artboard details.

    Selected assets display in the browser
    Selected assets display in the browser

    When you hover over the assets, contextual selection highlights the selected asset in blue.

    Contextual selection
    Contextual selection
  5. To download, select an individual asset or multiple assets. You can also use Cmd/Ctrl+A to select all the assets or use the Shift key to multi-select. At the bottom of the screen, assets are categorized as vector and bitmap.

    Download the selected assets
    Download the selected assets
  6. You can change the format of vector assets to SVG, PDF, and PNG and the format of bitmap assets to PNG and PDF. The assets are downloaded as a .zip file in the downloads folder.

  7. To download individual assets, when you select a layer marked as an asset, the Design Specs panel in the web includes an asset section, which provides a download option.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online