Figma Design Tokens Cheat Sheet

Export palettes, typography, spacing

Last Updated: November 21, 2025

Focus Areas

Focus
Store tokens in shared libraries
Export JSON / CSS variables

Commands & Queries

Figma Tokens plugin > Sync
Export tokens
npm run tokens:build
Generate CSS
grep -R 'var(--color' src
Check usage

Summary

Tokens align design and development with a single source of truth.

💡 Pro Tip: Annotate tokens with intended use cases for engineers.
← Back to Design & Creative | Browse all categories | View all cheat sheets