@samwyness/figma-tokens

Turn Figma design tokens into code

Usage no npm install needed!

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

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:

  1. Create a Frame in figma
  2. Use the _tokens/ prefix when naming your new frame - e.g. _tokens/colors
  3. 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:

  1. Component Set name = Brand
  2. Component Set property = Color
  3. Component Variant name = Primary