Importing Design Tokens JSON into Knapsack
Bring your existing tokens to Knapsack. Choose a format and paste your JSON into the form to have your tokens imported and ready to use in seconds.
Supported formats:
Prefer a video?
If you’d rather follow along with a video, here’s a recording that covers using Tokens Studio for Figma to import tokens directly into Knapsack.
Don’t want to miss any future updates? Subscribe to our Knapsack YouTube channel.
Adding design tokens to Knapsack
Knapsack enables any Admin or Contributor user to add and maintain design tokens via the UI. To access the Token manager section of Knapsack, click "Tokens" in the admin bar at the top of your screen.
This section displays and edits all tokens currently available within the source JSON file connected to the workspace.
Adding design tokens manually
In the Token manager, use the various + features to add groups to the hierarchy or individual tokens to groups. There is no limitation to the specific types of tokens you can create using Knapsack's UI.
Note: To make these changes to your workspace, you must be logged in, have either Admin or Editor permissions, and work on an editable workspace branch.
Adding design token JSON
Knapsack also enables users to merge design tokens by pasting JSON directly into the UI.
To import JSON, click the ••• button and select the Import JSON option.
This will reveal the Import Token JSON panel on the right side of the screen, where you can paste JSON data to add the tokens to the Knapsack workspace.
Once you've added your JSON, click Save. If your import is successful, you will see the following message:
