README
Figma Tokens
Generate Design Tokens from your Figma Files
Getting Started
Install
npm install --save-dev @sw-labs/figma-tokens
Project configuration
Create a .env
file in your projects root directory and add your Figma API personal access token.
For more info on how to generate personal access tokens, you can follow this figma guide
// .env
FIGMA_TOKEN="ABCDEFG1234567"
Build
Run npx slab-tokens --sync
to build/update your tokens
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 defined structure that needs to be followed when creating tokens in Figma
Creating a token frame
NOTE: Prefixes are required when creating token frames
i.e. For color tokens we need to create a frame with the name _tokens/colors
Steps:
- Create a Frame in figma
- Use the _tokens/ prefix when naming your new frame - e.g.
_tokens/colors
- Create a Component set for your new tokens
Creating a Component set
i.e. For color tokens to create a token reference as colors.brand.primary
Steps:
- Component Set name = Brand
- Component Set property = Color
- Component Variant name = Primary