@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!