Design tokens ‐ setup Figma plugin
This documentation is intended for developers and designers who work with design tokens in Figma. It describes how to set up automatic transfer of tokens from Figma to the Storybook for easy access, updating and use of the design system.
The process of automation of design tokens from Figma to Storybook allows:
-
Keep styles and components consistent.
-
Ensure consistency of tokens without manual intervention.
-
Increase the efficiency and speed of the design and development workflows.
-
Editor’s permissions in Figma.
-
Access to the Design System file in Figma and permissions to edit in the respective branch
https://www.figma.com/design/WJSRV3CbcHuVWRQApwvWIm/UNDP-Design-System -
Admin access to the Design system Github repository https://github.com/undp/design-system
Github configuration:
Create personal access token (Not to be confused with anything to do with a Design Token, a Personal access Token is a passcode from GitHub you enter into the plugin that allows the connection to happen)
Token should have Read and Write access to the respective repository.
Figma setup:
-
Install Tokens Studio for Figma plugin if it isn’t installed already
-
Open UNDP Design System file in Figma and switch to the design tokens enabled branch (currently “995-add-variables-tokens”)
-
Open the plugin interface and switch to Settings to configure Sync provider:
1. Name
This is a nickname that shows up in the plugin settings page later on to identify this specific sync provider configuration.
Value (recommended): UNDP - figma token files
Value: The Personal access token you saved from the steps above.
The URL from the repository from the steps above has the owner/repository in it after the GitHub.com/
Value: undp/design-system
4. Branch
The default repository branch where you will be pushing your Tokens.
Value: update-figma-tokens
5. Token storage location (file/folder path)
Value: figma-tokens/input/tokens.json
6. Base URL (Optional)
Base URL must be added to the GitHub credentials if your organization is running an enterprise server.
Value: leave blank
This is what should come out as a result:
- Click on the “Save” button to save the changes.
- After switching to the "Tokens" tab, we find ourselves in the main working area of the plugin
- After we have created, deleted, changed or conducted any other manipulations with tokens, we need to push these changes to Github. By clicking on the "Push to Github" button, we send the changes to Github.
- In the popup window, you need to briefly describe the changes that were made (please be descriptive, but short, this message should explain to others the purpose of the change) and click the "Push Changes" button.
After that, the data from Figma will be sent to the Github repository.