Reference for the @dsai-io/figma-tokens package and Figma integration workflow. Covers Figma Variables API sync, token pipeline, rate limiting, description parsing, Code Connect, and the complete Figma-to-production-CSS flow.
From hugin-v0npx claudepluginhub michelve/hugin-marketplace --plugin hugin-v0This skill uses the workspace's default tool permissions.
Guides browser automation with Playwright, Puppeteer, Selenium for e2e testing and scraping. Teaches reliable selectors, auto-waits, isolation to fix flaky tests.
Provides checklists to review code for functionality, quality, security, performance, tests, and maintainability. Use for PRs, audits, team standards, and developer training.
Enforces A/B test setup with gates for hypothesis locking, metrics definition, sample size calculation, assumptions checks, and execution readiness before implementation.
Purpose: Pull design tokens from Figma Variables API into DTCG format for the DSAI token pipeline.
Add to your project's .env file (never commit this):
FIGMA_API_KEY=figd_xxxxxxxxxxxxxxxxxxxx
FIGMA_FILE_ID=AbCdEfGhIjKlMnOpQrStUv
FIGMA_FILE_ID is the string after /design/ in your Figma file URL:
figma.com/design/AbCdEfGhIjKlMnOpQrStUv/My-Design → AbCdEfGhIjKlMnOpQrStUv
dsai figma sync --dry-run
If successful, you'll see the list of variable collections found in the file.
dsai figma sync # Pull tokens from Figma
dsai tokens build # Build CSS/SCSS/JS/TS outputs
Three components:
X-RateLimit-* headersThe package re-exports all token operations from @dsai-io/tools, so consumers get both Figma sync AND token building from one import.
const client = new FigmaClient({
accessToken: process.env.FIGMA_API_KEY, // Required
baseUrl: 'https://api.figma.com', // Default
timeout: 30000, // 30 seconds
retries: 3, // Auto-retry on failure
cache: true, // Cache responses
});
Proactive throttling based on remaining API quota:
throttleThreshold: 0.2) → 2 second delay between requestscriticalThreshold: 0.1) → 5 second delayX-RateLimit-Remaining and X-RateLimit-Limit headers automaticallyIdentifies font properties by Figma variable name:
| Property | Pattern |
|---|---|
| Weight | /weight/i |
| Family | /family/i |
| Size | /size|fontSize/i |
| LineHeight | /lineHeight|line-height/i |
| LetterSpacing | /letterSpacing|letter-spacing|tracking/i |
Extracts structured metadata from Figma variable descriptions:
Input: "Main description text. Docs.Reference: https://example.com • Platform.Variable: $color-primary"
Output: {
description: "Main description text",
metadata: {
docs: { reference: "https://example.com" },
platform: { variable: "$color-primary" }
}
}
1. Design tokens defined in Figma Variables
↓
2. dsai figma sync (or pnpm figma:sync)
- Uses FIGMA_API_KEY and FIGMA_FILE_ID env vars
- Pulls variables via Figma REST API
- Rate-limited automatically
- Outputs to src/figma-exports/
↓
3. Token files land in src/figma-exports/ (raw Figma format)
↓
4. dsai tokens build
- Step 1: validate (DTCG schema check)
- Step 3: preprocess (extract light/dark modes)
- Step 4: transform (Figma → DTCG format in src/collections/)
- Steps 5-12: Build CSS/SCSS/JS/TS outputs
↓
5. Generated files in src/generated/
- tokens.css (:root { --dsai-*: value; })
- tokens-dark.css ([data-dsai-theme="dark"] { ... })
- dsai-theme-bs.css (Bootstrap compiled with token overrides)
↓
6. Imported in main.tsx, components use CSS custom properties
Separate from tokens — maps Figma component instances to code.
# Install Code Connect
npm install -D @figma/code-connect
# Initialize (creates figma.config.json)
pnpm figma:connect
Code Connect files are colocated with their component. For example, Button.figma.tsx sits next to Button.tsx:
// src/client/components/ui/button/Button.figma.tsx
import figma from '@figma/code-connect';
import { Button } from './Button';
figma.connect(Button, 'https://figma.com/design/FILE_KEY/..?node-id=NODE_ID', {
props: {
label: figma.string('Label'),
variant: figma.enum('Variant', {
Primary: 'primary',
Secondary: 'secondary',
Danger: 'danger',
Ghost: 'ghost',
}),
size: figma.enum('Size', {
Small: 'sm',
Medium: 'md',
Large: 'lg',
}),
disabled: figma.boolean('Disabled'),
loading: figma.boolean('Loading'),
},
example: ({ label, variant, size, disabled, loading }) => (
<Button variant={variant} size={size} disabled={disabled} loading={loading}>
{label}
</Button>
),
});
pnpm figma:publish # Publish to Figma
pnpm figma:publish:dry # Preview without publishing
After publishing, Figma's Dev Mode shows the DSAI React code snippet for each mapped component.
FIGMA_API_KEY="" # Figma personal access token (required for sync)
FIGMA_FILE_ID="" # Figma file containing design tokens
FIGMA_PROJECT_ID="" # Optional: specific Figma project
{
"figma:sync": "dsai figma sync",
"tokens:build": "dsai tokens build",
"tokens:validate": "dsai tokens validate",
"tokens:watch": "dsai tokens watch"
}
src/generated/ — they are auto-generated by the pipeline.src/collections/*.json, then run dsai tokens build.dsai figma sync + dsai tokens build.FIGMA_API_KEY should be in .env (never committed to git).collections/ follow DTCG format ($value, $type, $description).dsai figma syncFIGMA_API_KEY is set in .env and the app has loaded itThe RateLimiter handles most cases automatically. If you still hit limits:
X-RateLimit-Remaining header in debug outputFIGMA_FILE_ID matches the file containing the variablessrc/figma-exports/ for raw output — if empty, the API returned no variablesdsai tokens build fails after syncdsai tokens validate to check for DTCG format errorstransform step to convert to DTCG format — ensure the pipeline includes both preprocess and transform steps