Export

You’ll need to enable the Can download and inspect option in a document so Viewers can export assets.

Exporting assets

Exporting individual assets

As well as being able to inspect documents in their browser, developers can export any assets they need, all from the web app. Anyone with View access will need the Can download and inspect option checked in their document permissions to export assets.

Open a document in the web app and click the Inspect icon . From the Inspector panel, click any layer to bring up its properties.

Click the Export as button to preview your export and choose the resolution, prefix/suffix, and file format. You can add multiple Export options and reset them at any point. Click Export to download the assets.

How to export all assets

To export and download assets from the web app, you first need to do the following in the Mac app:

• Make layers, frames or groups in your document exportable or;
• Create Slices to export

To export all assets in a document, go to the Document Details panel and select Export Assets. This will generate a Zip file containing the assets. When your assets are ready, click the Download Assets (ZIP) link that appears to download them.

If the Export Assets button in the web app is greyed out or individual assets don’t show any export options, it’s because there aren’t any layers or frames set as exportable in the document. You’ll need to add slices or set layers, groups or frames as exportable in the Mac app first.

Depending on the total size of the assets you’re exporting, you may not be able to download all assets straight away. If that happens, you’ll receive both an email notification as well as a notification in the Updates page to let you know that your assets are ready for download.

Design token exports

If your document or Library has Color Variables, Text Styles, or Layer Styles, you can automatically generate design token exports in CSS or JSON formats that stay up to date with any changes you make.

To generate a design token export, click the Document Details icon on the upper right, then click Export Design Tokens in the Document Details panel. Alternatively, click the on the upper right of the toolbar and select Export Design Tokens from the menu.

In addition, you can also generate design token exports from the Components view from the sidebar on the bottom left.

Design token export settings

In the Export Design Tokens modal you have the option to export Color Variables, Layer Styles and Text Styles. Use the drop-down menus to switch between CSS or JSON formats, and color formats (RGB, hex or HSL).

As you change export settings, you’ll see a preview of the code in the right-hand panel (which you can copy if you want to use it right away).

Once you’re ready to export, click the Download Tokens button to save your design token export locally.

Sharing design token exports using a URL

To generate a public URL for your design token exports — useful for referencing in development projects — use the drop-down menu to select from three options:

• Enabled for latest document update: Always links to the latest update of the document’s Color Variables, Text and Layer Styles
• Enabled for latest starred version: Always links to the latest starred version of the document. If the document has no starred updates, it will link to the most recent update instead
• Disabled: Any links you shared will no longer work.

Integrating design token exports with development projects

You can use public design token export URLs with tools like Storybook to bring in the latest changes, although we don’t recommend adding them directly to a production environment.

Here’s a sample project to show you how you could integrate design token exports with your development projects. You can also find more information on working with the Amazon Style Dictionary format we use for JSON color tokens in their documentation.