Help Center

Top article results

    Importing design tokens

    Importing design tokens

    Photo of Nic Allen

    Nic Allen

    There are a number of ways you can add design tokens to zeroheight:

    • Importing design tokens from a JSON file — either as an upload of by syncing to a GitHub repo
    • Importing design tokens from Figma styles
    • Creating tokens from scratch in zeroheight

    The extent to which you can manage your tokens will depend partly on how they are created or imported.

    Select the source of your design tokens

    Importing design tokens from a JSON file

    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.

    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.

    From GitHub

     👉 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 as the token source

    4) Connect to your GitHub account

    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

    6) You’ve created a token set from GitHub.

    7)You can:

    • import changes from GitHub into zeroheight
    • make changes to your token set in zeroheight and push those changes back into GitHub
    • publish changes to the tokens you’ve added in your styleguide
    • export your file as a JSON

    Push changes function to create pull requests from GitHub

    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

    Publish changes function to publish changes to your styleguide

    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

     

     

     

    See also: