You can export your design token sets from the top-level 'Tokens' section in zeroheight. You can export tokens in a number of formats, ready for use in code, as well as for transferring to other tools and platforms.
Exports can be manually downloaded, accessed via an API to allow you to automate this process and integrate zeroheight into your developer workflows.
Exporting to code via a URL with Style Dictionary
zeroheight's token export uses Style Dictionary, a powerful build system to transform tokens into any format.
- Go to the 'Tokens' section of your zeroheight account and click into a token set.
- To the top-right of your token set, you'll see the option to Publish or Push changes (depending on whether your token set is synced with your code repository) along with a dropdown arrow.
๐ If you've made changes to your tokens inside zeroheight that you want to export, ensure you publish these changes before exporting. This will update the tokens data in your documentation and in any exports.
๐ Tokens created from Figma variables don't require Publishing in zeroheight. Syncing from the plugin automatically publishes the token set - Select the dropdown arrow; you'll be shown different token export options. The options available will depend on how you imported your token set.
- Select Style Dictionary export to export your tokens for use directly in code.
- You'll be presented with a choice between a private and public URL.
- If using a public URL, you'll see the option to select the format for your export and a URL. Jump to step 8.
- If using a private URL, you'll be shown an ID and API secret. Make a note of these details and store them securely as they won't be shown again or shown to any other users. These details apply to all token sets on your account.
๐ If you need to reset any of your security settings, please contact support@zeroheight.com - You'll then be shown a dropdown of different formats and the corresponding URLs, which can be used to download the files or as endpoints to be used in a pipeline.
๐ Composite tokens are currently not supported when exporting to platform-specific formats. To export sets with composite tokens, we recommend selecting the โstyle dictionaryโ type and using your own custom parser/formatter to convert to the desired output.
๐ When exporting a token set created from Figma variables, zeroheight provides a URL that returns a list of URLs. Each of these URLs corresponds to each combination of Collection and Mode.
๐ Token sets created from Figma variables can only be exported in the Style Dictionary format. This is because all other formats require token values to be resolved which isn't possible with modes (i.e. the mode needs to be selected before token values can be resolved). zeroheight has provided an example script here for working with the Style Dictionary export for token sets create from Figma variables. - If you're using a private URL, you'll now have a URL, Client ID and Access Token. To access the private URL, make requests with the following HTTP headers.
-
X-API-CLIENT:
-
X-API-KEY:
๐ All of the URLs provided by zeroheight for the Style Dictionary export of token sets created from Figma variables are private.
Push changes back to git provider
If your token set was imported from a git provider, you can sync any changes made in zeroheight back to git provider via a pull request.
- Go to the 'Tokens' section of your zeroheight account and click into a token set.
- If you've imported your token set from git provider, you'll see the option to Push changes to the top-right of your token set.
- Select the 'Push changes' option and you'll create a pull request in the original repo that the token set was synced from.
๐ Changes made in zeroheight will not be automatically made in your code base โ zeroheight will only create a pull request in git provider, where existing workflows will apply as normal.
Exporting to JSON
You can export your token set in the W3C format, which can be useful for transferring to other tools.
- Go to the 'Tokens' section of your zeroheight account and click into a token set.
- To the top-right of your token set, you'll see the option to Publish, Push changes along with a dropdown arrow or an option to Download JSON (depending on how you created your token set)
๐ If you've made changes to your tokens inside zeroheight that you want to export, ensure you publish these changes before exporting. This will update the tokens data in your documentation and in any exports. - Select the dropdown arrow; you'll be shown different token export options. The options available will depend on how you imported your token set. If you imported your tokens from Figma variables you'll see a Download JSON button.
- To export your tokens in a JSON format, select 'Download JSON'
๐ If you imported your token set from Figma variables the JSON download will be in the form of a.zip
file. Once unzipped, you'll see a file for each combination of Collection and Mode.
FAQs
Do you have to โpublish changesโ to make updates to tokens available via the URL endpoint for use in code pipelines?
Yes, until you publish changes any updates to tokens in the token manager will be in a draft state and won't be made available to your documentation or code pipelines.
Do the URLs that are generated in the export modal remain constant over time?
Yes, this URL will remain constant, including when tokens updates are published. This allows the URL to be used as an endpoint in code pipelines.