Help Center

Top article results

    Exporting and integrating design tokens into developer pipelines

    Exporting and integrating design tokens into developer pipelines

    Photo of Nic Allen

    Nic Allen

    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 or accessed via an API to allow you to automate this process and integrate zeroheight into your developer workflows.

    Exporting to code with Style Dictionary

    zeroheight’s token export uses Style Dictionary, a powerful build system to transform tokens into any format.

    1. Go to the ‘Tokens’ section of your zeroheight account and click into a token set.
    2. 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.
    3. Select the dropdown arrow; you’ll be shown different token export options. The options available will depend on how you imported your token set.
      design tokens export options
    4. Select ‘ Style Dictionary export ‘ to export your tokens for use directly in code.
    5. You’ll be presented with a choice between a private and public URL.
      Style Dictionary security options
    6. If using a public URL, you’ll see the option to select the format for your export and a URL. Jump to step 8.
    7. 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.Security settings for style dictionary export
      👉 If you need to reset any of your security settings, please contact support@zeroheight.com
    8. 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.
      Style dictionary export options
      👉 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.
    9. 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: <Your Client ID>
    • X-API-KEY: <Your Access Token>

    Push changes back to GitHub

    If your token set was imported from GitHub, you can sync any changes made in zeroheight back to GitHub via a pull request.

    1. Go to the ‘Tokens’ section of your zeroheight account and click into a token set.
    2. If you’ve imported your token set from GitHub, you’ll see the option to Push changes to the top-right of your token set.
    3. 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 GitHub, where existing workflows will apply as normal.design tokens export options

    Exporting to JSON

    You can export your token set in the W3C format, which can be useful for transferring to other tools.

    1. Go to the ‘Tokens’ section of your zeroheight account and click into a token set.
    2. 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.
    3. Select the dropdown arrow; you’ll be shown different token export options. The options available will depend on how you imported your token set.
      design tokens export options
    4. To export your tokens in a JSON format, select ‘Download JSON’

    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.