Figma Tokens Integration

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

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. Add the dependency: npm install figma-tokens-transformer --save-dev
2. Create the configuration file using CLI: npx figma-tokens-transformer configure
   1. Enter the serial key (you will find it in your receipt after purchase)
   2. Enter your email address if prompted (the one you’ve used to purchase the Figma Tokens Sync)
   3. Select version 5.
   4. Set the token source to json file that needs to be transformed e.g: src/tokens/tokens.json
   5. Set the target directory e.g: src/tokens
3. Add tokens-transformer.secret.json line to .gitignore file. This file should only stay on your local and will be used if you want to run the transformation locally.
4. Add LICENSE_KEY and LICENSE_EMAIL as secret keys inside GitHub's action settings (Settings > Secrets > Actions)
5. To transform tokens locally, run: npx figma-tokens-transformer transform