🎨

CSSTokens

Coming Soon

Sync Figma design tokens to your CSS variables automatically

The Problem

Design tokens in Figma diverge from CSS variables in code. Designers update colors; devs use old hex values for 6 months.

About

Connects to Figma via token and syncs design tokens (colors, spacing, typography) to your CSS variables, Tailwind config, or design-system constants. Detects drift between design and code.

Free vs Pro

FREEVSCode Marketplace

✓Import tokens from a Figma file once
✓Generate CSS custom properties file
✓Detect hardcoded values matching a token

PROEverything in Free +

✦Live sync on Figma save via webhook
✦Tailwind config generation from tokens
✦Drift report: tokens that have changed since last sync
✦Auto-replace hardcoded values with token references

Pro License

$34/ lifetime

or $17/year

✓ Lifetime updates included
✓ Activate on up to 3 devices
✓ License key — no account needed
✓ 30-day refund guarantee

🚧 Coming Soon

This extension is in development. Check back soon.

Secure checkout via Polar.sh