Convert Figma Tokens to CSS Variables
Paste exported Figma tokens and convert them into CSS custom properties. The input format is auto-detected and colors are previewed inline.
Design Token Converter
Convert design tokens between W3C DTCG, Figma, CSS, SCSS, Tailwind, JS/TS, Android, and iOS formats
Supported token types and formats
Input Formats
Token Types
Output Formats
Quick Start
- 1Paste your Figma Tokens (Tokens Studio) JSON
- 2Let the tool auto-detect the input format
- 3Choose CSS Custom Properties as the output
- 4Copy the :root variables or download the file
More Convert Tools
All converters →Convert Figma Tokens to a Tailwind Config
Convert Figma design tokens to a Tailwind CSS config online for free. Paste your Tokens Studio JSON and export a ready-to-use Tailwind theme, no signup.
Convert Cargo.toml to JSON Online
Paste a Rust Cargo.toml file and instantly convert it to JSON. Free online converter that runs entirely in your browser with no upload.
Convert pyproject.toml to JSON Online
Convert a Python pyproject.toml file to JSON online for free. Handles tables, dotted keys, and arrays with no data leaving your browser.
Convert JSON to TOML Online
Paste JSON and instantly generate clean TOML config. Free bidirectional converter with section headers and correct value types, all in your browser.
Convert HTML to PDF Online Free
Paste HTML with CSS and download a clean PDF. Set page size, orientation, and margins. No upload, no watermark, runs entirely in your browser.
Add a Watermark to a PDF Online Free
Stamp text or a logo onto a PDF with adjustable opacity, rotation, and position. Watermark all pages or a custom range. No upload, runs in your browser.
Looking for FAQs and advanced options? Visit the full Design Token Converter page →