ProductCrunch
Toggle Menu
Home
Tools
Resources
Blog
News
Toggle theme
Sign In
Sign Up
Back to Converters
Figma Tokens to CSS Converter
Convert Figma design tokens (JSON) into CSS custom properties for seamless design handoff.
Figma Tokens (JSON)
Paste the JSON output from the Figma Tokens plugin.
{ "color": { "primary": { "base": { "value": "#1a73e8" }, "dark": { "value": "#0d47a1" } }, "text": { "default": { "value": "#202124" }, "muted": { "value": "#5f6368" } } }, "font": { "size": { "sm": { "value": "12px" }, "base": { "value": "14px" } } } }
Convert
CSS Custom Properties
Copy
Clear
The generated CSS variables, ready to be used in your project.
