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
Was this tool helpful?
What is Design Token Converter?
Free online design token converter to convert design tokens between all major formats: W3C DTCG, Figma Tokens, Style Dictionary, CSS Custom Properties, SCSS Variables, Less Variables, Tailwind CSS config, JavaScript/TypeScript objects, Android XML, and iOS Swift constants.
Auto-detects input format, supports nested token groups, and shows color preview swatches inline. No signup required.
How to Use Design Token Converter
- 1Paste your design tokens JSON into the input panel
- 2The tool auto-detects the input format
- 3Choose your desired output format from the dropdown
- 4Copy the converted output or download as a file
Frequently Asked Questions
Related Tools
Color Shade Generator
Free online color shade generator - generate light and dark shades of any color for design systems
CSS Box Shadow Generator
Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview
CSS Gradient Generator
Free online CSS gradient generator - create beautiful CSS gradients with a visual editor and live preview
CSS Button Generator
Free online CSS button generator - generate styled CSS buttons with hover effects
Glassmorphism Generator
Free online glassmorphism generator - create glass-effect CSS styles with blur and transparency
Neumorphism Generator
Free online neumorphism generator - generate soft UI neumorphic CSS styles