What Are Design Tokens?
Design tokens are the atomic design decisions that define a visual design system — colors, spacing, typography, border radii, and more. Stored as structured JSON, they serve as a single source of truth between design tools (like Figma) and code. This converter transforms token JSON into ready-to-use CSS variables, SCSS variables, Tailwind CSS config, or JavaScript exports.
How to Convert Design Tokens
- 1Paste your design tokens JSON. Tokens should have a value property, like a nested object where the leaf nodes contain a key called value with the token value.
- 2Select your output format: CSS, SCSS, Tailwind, or JS.
- 3For CSS output, customize the variable prefix (default is --).
- 4Copy the generated output into your project.
Common Use Cases
Design-to-Code Handoff
Convert Figma token exports directly into CSS variables for use in your stylesheets.
Tailwind Theme Setup
Generate Tailwind CSS theme configuration from your design system tokens.
Multi-Platform Tokens
Export tokens to different formats for web (CSS/SCSS) and JavaScript-based styling solutions.
Frequently asked questions
What JSON format is expected?
The tool expects a nested JSON object where leaf nodes have a value property. This is compatible with Figma Tokens, Style Dictionary, and most design token formats.
Does this support references or aliases?
Currently this tool works with resolved values. Token references like color.primary.500 wrapped in curly braces are not resolved automatically.
Can I use this with Tokens Studio for Figma?
Yes. Export your tokens as JSON from Tokens Studio and paste them here. The nested structure with value properties is fully supported.