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.
If you are using Figma styles or variables you can seamlessly automate token delivery from Figma to code with zeroheight’s Token Manager. Create automated pull requests every time your changes from Figma are detected.
Exporting to code via a URL with Style Dictionary
zeroheight's token export uses Style Dictionary, a powerful build system to transform tokens into different formats.
-
Open up a token set that you'd like to pull tokens from
-
To the top-right of your token set, you'll see the Export dropdown button
-
Click that button and choose Style Dictionary export
-
You will be presented with a choice between generating a Public URL or a Private URL
- Public URLs will allow anyone with that URL to access the formatted tokens
-
Private URLs will need additional headers sent with the request to authenticate
-
If using a Private URL you will be shown a Client ID and an Access Token, make sure to make a note of these as they will not be shown again
-
You will now be shown a dropdown allowing you to select a format as well as the URL to access the formatted tokens
- If you are using a Private URL our developer documentation has more details on using the Client ID and Access Token: Getting Started - zeroheight API
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.
-
Open up a token set that was imported from a git provider
-
In the top right you'll see the button to Push changes
-
After clicking that button, you will be given the option to also publish the changes to your documentation
-
Once the changes are pushed to your git provider you will be able to view the pull request
Downloading a token set as JSON
You can export your token set in the W3C format, which can be useful for transferring to other tools.
-
Open up a token set that you'd like to download as JSON
-
To the top-right of your token set, you'll see the Export dropdown button
-
Click that button and choose Download JSON
- Your token set will be downloaded as JSON. If you are downloading a token set created from figma variables it will be a zip file containing multiple files, one for each collection
FAQs
Do you have to ‘publish changes’ to make updates to tokens available via the URL endpoint for use in code pipelines?
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
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.
Other notes to consider:
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 need to reset any of your security settings, please contact support@zeroheight.com