Figma Token Converter
Convert Figma design tokens к CSS, SCSS, Tailwind, или Стиль Dictionary формат
Figma Token Converter
Convert Figma design tokens к CSS, SCSS, Tailwind, или Стиль Dictionary формат
Возможности
- Parse Figma JSON design-token exports and emit CSS custom properties, SCSS variables, Tailwind config, or Style Dictionary JSON
- Handles nested groups (e.g. `colors.neutral.100`) and type metadata
- Token references (`{colors.primary}`) are preserved as-is — full reference resolution is not implemented
- Flattens to kebab-case for CSS (`--color-colors-neutral-100`) or camelCase for JS
- Useful as a one-off conversion step in a manual workflow
Как использовать
- Вставьте ваш Figma design tokens JSON в the ввод area.
- Выберите the desired вывод формат из the dropdown.
- Copy the generated код к использовать в ваш project.
Советы и лучшие практики
- For a full design-token build pipeline (with reference resolution, multi-platform output, watch mode), use Style Dictionary directly.
- Figma's JSON export structure depends on the plugin you used — Tokens Studio, Figma Tokens, or Variables export each produce slightly different shapes.
- For tokens with references (e.g. `border-color = {color.primary}`), resolve them in your build pipeline, not at runtime.
- CSS custom properties update at runtime — useful for theming; Tailwind config tokens are build-time only.
- For type safety, generate TypeScript types from the JSON output as part of your build.
Вопросы и ответы
What format should the input JSON be in?
The tool accepts standard Figma design token JSON format, including tokens with type and value fields. It supports nested objects for token groups like colors, spacing, typography, shadows, and border radius. Most token plugins for Figma export in a compatible format.
What token types are supported?
The converter handles color, spacing, dimension, sizing, typography (font families, weights, sizes, line heights, letter spacing), box shadow, and border radius tokens. It also infers types from values when no explicit type metadata is present.
Can I use this with Style Dictionary?
Yes, the Style Dictionary output format produces JSON that is directly compatible with Amazon Style Dictionary. You can use the output as a source token file in your Style Dictionary configuration to generate platform-specific outputs.
Is this tool free and private?
Yes, this tool is completely free with no registration required. All processing happens locally in your browser. No data is sent to any server, making it safe for proprietary design tokens and confidential design system data.
Does it work with nested token groups?
Yes, the converter recursively walks through nested token objects, properly flattening them into kebab-case variable names. For example, a nested path like colors.primary.500 becomes --color-colors-primary-500 in CSS output.
Which browsers are supported?
This tool works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It is also fully functional on mobile browsers for both Android and iOS devices.