@skits/figma-tokens NPM

@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