Skip to content

Figma Tokens Integration

Jump to bottom
Danish Khurshid edited this page Feb 9, 2023 · 12 revisions

Next.js Starter includes integration of Tokens Studio for Figma. Check Tokens Studio for Figma documentation to see how to make use of tokens and sync with GitHub.

Using the Ant Design system? We recommend using Ant Design System for Figma for design files which include the standardized, pre-defined design tokens Ant uses. If not using Ant, make sure the tokens you create are compatible with the Ant Design tokens workflow.

Transform Figma Tokens to JSON With github actions:

  1. Open the Tokens-Studio plugin in Figma and navigate to the Sync tab.
  2. Select "GitHub" as the source.
  3. In the "Add New Item" section, provide a name for the plugin UI.
  4. Generate a Personal Access Token from your GitHub repository settings and add it to the appropriate field.
  5. Enter your GitHub repository name (Entermedia-LLC/nextjs-starter) and the default branch (figma-tokens).
  6. Specify the file path for storing your tokens (figma/tokens.json).
  7. Save the credentials and push the changes to GitHub.

Note: Do not raise a pull request from the Tokens Studio plugin. The GitHub Actions workflow is set up to handle generating the Ant Design specific tokens and raising a PR against main branch.

To ensure the transformation works, you need to set up the LICENSE_KEY and LICENSE_EMAIL action secrets for your repository. These secrets can be obtained after purchasing the Ant Design Figma Tokens plugin.

Transform Figma Tokens to JSON Locally

Figma design tokens are transformed into JSON output through GitHub actions with the help of Figma Tokens Sync or can also be converted locally, see instructions below:

  1. Initiate the creation of configuration files by running the command npx figma-tokens-transformer configure in the root directory of your project.
  2. Enter the required details, including the serial key (found in your purchase receipt) and email address (used for the Figma Tokens Sync purchase), when prompted.
  3. Set version 5 and specify the source JSON file (e.g. figma/tokens.json) and target directory (e.g. figma/).
  • After completing this step, two files will be generated in the root of your project: tokens-transformer.secret.json, which contains your secret keys, and tokens-transformer.config.json, which holds other important metadata.
  1. Add the line tokens-transformer.secret.json to your .gitignore file to keep your secret keys secure and only accessible on your local machine.
  2. Get your tokens.json file from figma token-studio plugin and paste in inside figma/tokens.json
  3. Transform your token file by running npx figma-tokens-transformer transform at the root of your project. This will convert the single token.json into multiple files, one for each token set available (e.g. light, dark, etc.).

Note: Be sure to verify the output files in the target directory to confirm that the transformation was successful.

Clone this wiki locally