Importing design tokens
Nic Allen
There are a number of ways you can add design tokens to zeroheight:
- Sync design tokens with a code repository
- Create design tokens from Figma styles
- Import design tokens from a JSON file
- Skip importing and create tokens from scratch in zeroheight
- Create design tokens from Figma variables (beta)
The extent to which you can manage your tokens will depend partly on how they are created or imported.
Formatting your tokens file
The zeroheight design tokens manager follows the W3C Community Group Design Tokens specification. More details and advice on transforming your file to follow the specification can be found here: Convert design token sets to use zeroheight tokens manager.
You can upload a JSON file of your tokens, or if you have the JSON file in a GitHub repo, you can create a 2-way sync between this file and zeroheight’s token manager. You can then edit these tokens in zeroheight and export the updated tokens or create a pull request in GitHub with the latest changes.
Syncing tokens from code repositories
👉 Note: You can only import one file from one repo at a time.
1) In the Tokens section, click Create token set
2) Enter Token set name and select Create
3) Select GitHub or GitLab as the token source
4) Follow the steps to connect to GitHub or GitLab
5) Select the token set from the code repo you want to upload from and click Continue
5) You will see a summary of the tokens you’re importing — if you’re happy, click Finish
You can:
- import changes from your code repository into zeroheight
- make changes to your token set in zeroheight and push those changes back to your code repository as a pull request
- publish changes to the tokens you’ve added in your styleguide
- export your file as a JSON
Importing design tokens from Figma styles
1) In the Tokens section, click Create token set
2) Enter Token set name and select Create
3) Select Figma as the token source
4) Choose the connected Figma file from which you want to import styles. Alternatively, you can connect a new Figma file. You’ll need to be authorized to access the Figma file you’re trying to import from.
Note: Tokens will be created based on all styles applied to a layer in the file
5) Preview your import and hit ‘Finish’ if you’re happy
Note: Tokens imported from Figma styles cannot be edited in zeroheight as the changes cannot currently be synced back to Figma
Uploading a JSON file
1) In the Tokens section, click Create token set
2) Enter Token set name and select Create
3) Select JSON import as the token source
4) Upload JSON file and select Continue
5) Select Finish
6) You’ve added your token set as a JSON file.
7) You can:
- upload another JSON file
- export your set as a JSON file
- publish changes to the tokens you’ve added to your styleguide
See also:
