Download assets

Brienne Wong
Brienne Wong
  • Updated

Make assets exportable

For viewers to have the ability to download an asset from a zeroheight styleguide, designers have to make the asset downloadable by doing the following steps.

Once these steps have been completed, then viewers will be able to download their assets eg, download icons individually or all together in a zip folder.

Download assets function hovered over an icon displayed in zeroheight.

Sketch

1) Marking the asset as Make Exportable in Sketch

👉 Note: this has to be done on the master Symbol (as opposed to instances of the symbol). The master Symbol is the one that is usually found on the Symbols page.

You need to select all the formats that they want viewers to be able to download. For example, if a designer wanted viewers to be able to download an SVG and a @2x PNG of an asset they would do the following in their Sketch inspector:

Sketch presets for downloading assets

2) Uploading the asset to zeroheight

3) Adding the asset to a styleguide page

Figma

1) Marking the asset as an Export in Figma, make sure to select all the formats you want viewers to be able to download. You will also need to make sure the parent frames are set to export as well. For example, if you wanted viewers to be able to download an @1x and @2x PNG of an asset you would do the following:

Red rectangle around the Export section in Figma

2) Upload the Figma file and insert the asset into a styleguide – see Figma help article for more info

👉 Note: Figma limits our exports to 4X original size. Any exports over this size will not be visible in zeroheight. Exports will also have to be created on each variant - applying the export to the grouped variant isn't supported.

Adobe XD

This feature requires our Adobe plugin version 1.0.7

To make Adobe XD assets downloadable in zeroheight, follow these steps:

1) Mark the assets for export in Adobe XD

Arrow pointing to the Mark as Export text

2) By default, the plugin uploads the following formats:

  • SVG
  • @1x PNG
  • @2x PNG

But you can customize which formats get uploaded on a file-by-file basis by changing your export settings in the zeroheight plugin:

Arrow pointing to the Export settings

Caveats

1) Export setting changes will apply to all exportable assets in your XD file – we don't support changing settings on a per-asset basis.

2) We don't currently recognize changing export settings as a file change, so you will also need to change the file (e.g., moving an artboard by 1px) for the new asset formats to be uploaded – we plan to improve this soon!

Download assets

Download from page

Once assets have been marked as exportable and added to a styleguide, viewers (developers, stakeholders etc.) can download them simply by hovering over the asset and clicking the download button.

Red circle around the download symbol for an icon

Download from specs view

If you have inspect mode enabled for a design, you can download an asset individually from a tab in the asset's inspect view:

Download section in the inspect view

Download from search results

You can also download assets directly from the search results:

Download from the search result

Download as a zip file

You can export assets as a zip file. 

1) Select Download all in section

Red rectangle around Download all in section text

Icon aliases

You can add notes to your icons or assets so that they appear in the search results of your styleguide. That way, you can add icon aliases that are then searchable.

1) Click Add notes

Arrow pointing to Add notes for icon

2) Type in the aliases you use for icons and click Save

Window to enter notes for icon aliases

3) Your icon aliases will now appear in search results, and viewers can download them directly from the search.

searchresults_notes.png

 

Renaming exported assets

Unfortunately, there is no option for renaming the exported assets once uploaded to zeroheight. The exported assets will be either the name of the component or frames and if you're using variants it will be the property and variant name in your design file.

Was this article helpful?