Design Specs in Adobe Xd CC

Design Specs in Adobe Xd CC

One of the most exciting new features in Adobe Xd CC is Design Specs (Beta) which is available starting with November 2017 update. This feature is introduced to solve the problem and save time in communication between designers and developers. Although the feature is labeled as Beta, because it is only a start, you can use Design Specs (Beta) as any other feature in Xd CC. Adobe is promising to add more functionality, like code snippets and asset extraction, based on users feedback.

Video tutorial

Here is video tutorial with all details how to publish design specs, how to update design specs, how to generate a brand new link for published design specs, and how to manage published design specs (how to delete published design specs).


How Design Specs works in Xd CC

Designers can generate public URL from Adobe Xd CC. Design specs will be uploaded to web and developers can inspect in real time (via link) flows, measurements, and styles of the design.

Once published, design specs are not carved in stone. Designers can update design in Xd CC and more important, designers can update published work what will update uploaded design including all specifications which are needed by developers.

Another option is to generate a brand new link in which case design will be re-uploaded and developers can access new design and specifications via the newly generated link.

Note: currently design specs are available only in English.

How to publish Design Specs from Adobe Xd CC

The process of publishing design specs is similar to the process of publishing prototype.

  • Click on Share Online icon to see the pop-up. 
  • In the Share Online dialog click on Publish Design Specs.
  • In the Publish Design Specs dialog, you can type a name for reference below Title. Click Create Public Link button and wait a couple of seconds.
  • The next step is to click Copy Link and to send URL to the developer(s). There is also Open Link... button to open published work in the browser and to check if everything works as expected.

Publish design specs from Adobe Xd CC
Steps to publish design specs from Adobe Xd CC

How to update published Design Specs

After updating design you can update and published (uploaded) design. To update published design which will be available to developers via exactly same link already generated as explained above, do the following:

  • Click on Share Online icon to see the pop-up. 
  • In the Share Online dialog click on Publish Design Specs.
  • Click on Update Link button and wait a couple of seconds.

Update published design specs from Adobe Xd CC
Steps to update published design specs.

How to generate new Design Specs link for already published design 

Sometimes you will want to generate brand new link after making some changes. Here are the steps:

  • Click on Share Online icon to see the pop-up. 
  • In the Share Online dialog click on Publish Design Specs.
  • Click on New Link button and wait a couple of seconds.
  • Click Copy Link and to send URL to the developer(s). There is also Open Link... button to check uploaded design.
Generate a brand new link for already published design specs in Adobe Xd CC
To create a brand new link for already published design specs click on Share Online icon then click Publish Design Specs and lastly click on New Link button. Copy link using Copy Link button and send to your developer.

How to delete uploaded Design Specs


Sometimes you will want to delete published design specs. To access and delete published design specs do the following:

  • Click on Share Online icon to see the pop-up. 
  • In the Share Online pop-up dialog click on Manage Published Links.
  • Default browser will open My Assets > Prototypes & Specs. You can recognize design specs by looking at the thumbnail. Below the title, you will see Design Specs. Click on the trash icon in the bottom right corner then confirm.
Delete published design specs
Follow steps above to open Prototypes & Specs in the default browser. Click on the trash icon at the bottom right of design specs which you want to delete and confirm.

Requirements to access published Design Specs

There are a couple of requirements for developers to access published design specs:

  • A link to the design specs.
  • Desktop browser and internet connection. Mobile browsers are not supported/recommended for viewing design specs.
  • Adobe ID.


Read more from here: Use design specs published from Adobe XD.

Product used in this tutorial:
Adobe Xd CC

Reference:
November Update of Adobe XD

Comments

Popular posts from this blog

Free Puzzle Pieces Actions For Photoshop and Elements

How to Change Artboard Size in Adobe Photoshop

Old Weathered Vertical Wooden Planks Free Image