Какие форматы входных данных поддерживает инструмент?

Инструмент принимает JSON из Tokens Studio (W3C DTCG), устаревшие форматы без знака $, плоские вложенные объекты и rgba-объекты из Figma REST API.

Как работает автоматический вывод типов?

Если тип токена не указан, значения с решеткой или rgb определяются как цвета, значения с px/rem — как размеры, чистые числа — как числа, остальное — как строки.

Как экспортировать цвета специально для shadcn/ui?

Выберите целевой формат "CSS-переменные shadcn/ui" и формат цвета "HSL через пробел" для корректной работы с утилитами Tailwind.

Поддерживает ли инструмент экспорт шрифтов и отступов?

Да, инструмент распознает и сохраняет токены шрифтов, отступов и цветов, распределяя их по соответствующим категориям.

Нужно ли вручную указывать типы для каждого токена?

Нет, инструмент автоматически определяет типы данных на основе формата значений, если явный тип отсутствует.

Elysia Tools

Навигация

Design

Экспортёр Токенов Figma

Вставьте JSON переменных Figma / Tokens Studio и экспортируйте в Tailwind, CSS-переменные shadcn, Style Dictionary или SCSS. Сохраняет токены цвета, отступов и шрифтов с выводом типов.

Детали

С чем помогает этот инструмент

Вставьте JSON переменных Figma / Tokens Studio и экспортируйте в одну из четырёх популярных целей:

Tailwind theme.extend — автоматически мапит color/* → colors, spacing/* → spacing и т. д.
CSS-переменные shadcn/ui — конвенция HSL через пробел (--background: 0 0% 100%).
Style Dictionary / W3C DTCG — переизлучает каноническую форму { $value, $type }.
SCSS-переменные — стиль $color-brand-primary: #2563eb;.

Принимаемые формы — Tokens Studio/W3C ($value/$type), legacy (value/type), плоские вложенные значения и rgba-объекты REST API Figma.

Вывод типов — если у токена нет явного $type, он выводится: #hex/rgb()/именованные цвета → color; значения с px/rem/em/% → dimension; чистые числа → number; остальное → string. Опция Color format пере-рендерит каждый цвет как hex, rgb(), hsl или hsl().

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

2 примеров

Tokens Studio → Tailwind

Небольшая брендовая палитра + масштаб отступов в Tailwind theme.extend.

<div class="ft-wrap">3 tokens · 2 colors. colors: { brand: { primary: '#2563eb', secondary: '#9333ea' } }, spacing: { md: '16px' }</div>

Палитра бренда → shadcn HSL

Та же палитра как CSS-переменные shadcn, HSL через пробел.

<div class="ft-wrap">--color-brand-primary: 221% 83% 53%;</div>

Ввод

Заполните нужные поля и запустите инструмент.

3 параметров

СодержимоеВставьте или введите основные значения.1

JSON токенов FigmatextareaОбязательноFigma variables or Tokens Studio JSON. Accepts $value/$type, value/type, plain nested values, or Figma REST rgba objects.

НастройкиНастройте форматы, диапазоны, числа и режимы.2

Целевой форматselectНеобязательноWhich target format to export the tokens to.Формат цветаselectНеобязательноHow to re-render color tokens in the output. HSL space-separated is the shadcn convention.

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Продолжить с похожими инструментами и темами

{ "color": { "brand": { "primary": { "$value": "#2563eb", "$type": "color" }, "secondary": { "$value": "#9333ea", "$type": "color" } } }, "spacing": { "md": { "$value": "16px", "$type": "spacing" } } }

Экспортёр Токенов Figma

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Экспорт палитры Tokens Studio в Tailwind

2. Конвертация цветов Figma в переменные shadcn/ui

FAQ

Примеры JWT

Postman Collections - API Тестирование

JSON Примеры Terraform Plan

Примеры Распределенного Трейсинга

Конвертер Оттенков Серого

Генератор каскада цветовых токенов

Экстрактор токенов темы ECharts

Палитра из изображения в design-токены

Инструменты JSON-обмена и перевода форматов

Инструменты для проверки, diff и преобразования JSON

Генераторы JSON-схем, mock-данных и API-fixture

Инструменты форматирования, diff и нормализации JSON