@skits/figma-tokens

Turn Figma design tokens into code

Usage no npm install needed!

<script type="module">
  import skitsFigmaTokens from 'https://cdn.skypack.dev/@skits/figma-tokens';
</script>

README

@skits/figma-tokens

Generate Design Tokens from your Figma Files

Build Status npm latest version

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.

FIGMA_TOKEN="ABCDEFG1234567"

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

Token configuration

@skits/figma-tokens is configured by adding a figma-tokens.yml file to the root of your project.

You can run npx skits-tokens init and provide the requested details to generate a config file automatically.

Configuration options

Option Description Default
fileId Thie figma file that contains your tokens - You can copy the file's ID from your browser's address bar -
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' -

e.g.

fileId: <FIGMA_FILE_ID>
outputFilename: tokens
outputTransform: group
tokenFrames:
  - colors
  - typography
  - spacing

Available commands

sync

npx skits-tokens sync

init

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 frame

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

Steps:

  1. Create a Frame in figma
  2. Use the '_tokens/' prefix when naming your new frame - i.e. _tokens/colors
  3. Inside your new frame create a set of component variants that represent each of your tokens - How to create component variants in Figma

More documentation and examples coming soon!