README
@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.
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:
- Create a Frame in figma
- Use the '_tokens/' prefix when naming your new frame - i.e.
_tokens/colors
- 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!