@aidamalkic993/tokens

Design token extraction and build pipeline for the Notch Design System.

Setup

Copy the example env file and fill in your credentials:

cp .env.example .env

Finding your credentials

FIGMA_ACCESS_TOKEN

1. Open Figma → click your avatar → Settings
2. Go to Security → Personal Access Tokens
3. Click "Generate new token", give it a name, select read-only access
4. Copy the token and paste it into .env

FIGMA_FILE_KEY The key is the string between /design/ and the ? (or end of URL) in your Figma file URL.

Example URL:

https://www.figma.com/design/xZBFOf75DxT8XxQNbwIKMu/Notch-Design-System

Key: xZBFOf75DxT8XxQNbwIKMu

Scripts

# Extract variables from Figma and write JSON token files to src/
pnpm extract

# Build tokens (Phase 3)
pnpm build

Output

Running pnpm extract writes the following files to src/:

| File | Contents | |---|---| | colors.json | Primitive palette + light/dark semantic colors | | typography.json | Font family, size, weight, line-height | | spacing.json | Spacing scale | | radii.json | Border radius scale | | shadows.json | Box shadow values |

All values follow the W3C Design Token format ({ "value": "...", "type": "..." }).