@skits/figma-tokens

Generate Design Tokens from your Figma Files

Install

npm install --save-dev @skits/figma-tokens

Usage

To build or update your tokens run.

npx skits-tokens sync

Before building tokens make sure your project is configured properly - see setup below.

Setup

API Token

Create a .env file in your projects root directory and add your Figma API personal access token and Figma file ID.

FIGMA_FILE_ID="ABCDEFGH12345678"
FIGMA_TOKEN="figd_ABCDEFGH12345678"

For more info on how to generate Figma personal access tokens, you can follow this guide

Token configuration

The @skits/figma-tokens package is configured by ading a figma-tokens.yml file to the root of your project. You can run npx skits-tokens init to generate a config file after answering the prompts.

Configuration options

| Option | Description | Default | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | outputFileName | The name of the json file where the tokens should be generated - e.g the default value will create tokens.json file | tokens | | outputTransform | When generating the tokens file, you can choose how you want the tokens to be transformed (examples coming soon). Available options are - 'flat', 'group', 'array' | flat | | tokenFrames | A list of tokens frames that can be found in your Figma file. Currently supported token frames are - 'colors', 'typography', 'spacing' | - |

Example figma-tokens.yml file

outputFilename: tokens
outputTransform: group
tokenFrames:
  - colors
  - typography
  - spacing

Available commands

sync

Sync tokens values from your Figma file

npx skits-tokens sync

init

Convenience command for configuring the figma-tokens.yml file in your project

npx skits-tokens init

Generating tokens from your Figma board

Tokens are generated by mapping a Figma API response to a JSON output. Because of the flexibility that Figma provides when creating designs, this tool uses a pre defined structure that needs to be followed when creating frames for your tokens in Figma

Creating a token in Figma

NOTE: When naming your Figma token frames the prefix _tokens/ is required.

Example (color tokens):

1. Create a new Frame in Figma called _tokens/colors
2. Inside your new frame, create a new rectangle and name it primary.
3. Add your desired fill to the rectangle

More documentation and examples coming soon!