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

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

> Каноническая страница: https://elysiatools.com/ru/tools/figma-tokens-export

- **Категория:** Design

- **Ключевые слова:** figma, токены дизайна, tokens studio, tailwind, shadcn, style dictionary, w3c dtcg, scss, css-переменные, тема, дизайн-система

## Обзор

Вставьте **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()`.

## Входные данные

- **JSON токенов Figma** (textarea): Figma variables or Tokens Studio JSON. Accepts $value/$type, value/type, plain nested values, or Figma REST rgba objects.
- **Целевой формат** (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.

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

- При переносе дизайн-системы из Figma в кодовую базу проекта на Tailwind CSS или SCSS.
- При настройке темы для shadcn/ui с использованием CSS-переменных в формате HSL.
- При экспорте токенов в кроссплатформенный формат Style Dictionary (W3C DTCG) для синхронизации дизайна.

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

- Вставьте JSON-код переменных Figma или Tokens Studio в поле ввода.
- Выберите целевой формат экспорта: Tailwind, shadcn, Style Dictionary или SCSS.
- Укажите желаемый формат вывода цвета (Hex, RGB, HSL через пробел или HSL CSS).
- Скопируйте сгенерированный код темы или переменных для использования в вашем проекте.

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

- Генерация конфигурации Tailwind theme.extend из экспортированного файла Tokens Studio.
- Преобразование палитры цветов Figma в CSS-переменные HSL для интеграции с shadcn/ui.
- Создание единого файла переменных SCSS для стилизации legacy-компонентов на основе дизайн-токенов.

## Частые вопросы

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

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

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

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

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

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

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

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

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

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

## Связанные инструменты

- [Конвертер Оттенков Серого](https://elysiatools.com/ru/tools/color-grayscale-converter): Преобразование цветов в оттенки серого с различными методами и контролем интенсивности
- [Генератор каскада цветовых токенов](https://elysiatools.com/ru/tools/color-token-cascade-generator): Преобразует один основной hex-цвет в полную систему токенов с семантикой, CSS-переменными и JSON Style Dictionary
- [Экстрактор токенов темы ECharts](https://elysiatools.com/ru/tools/echarts-theme-token-extractor): Извлекает дизайн-токены — цвета, числа, размеры шрифтов и строки — из JSON темы ECharts и экспортирует их прямо в вашу дизайн-систему. Вставьте объект темы (тот, что регистрируется и передаётся в echarts.init(dom, themeName)) — инструмент обойдёт каждый лист, пометит каждый цвет (с опциональной нормализацией имя/rgb → hex), числовой отступ, размер шрифта и строку, затем выдаст чистые CSS-переменные, конфиг theme.extend для Tailwind, tokens.json Style Dictionary или SCSS-переменные. Мост между темой визуализации ECharts и дизайн-токенами Figma/CSS/Tailwind без копирования каждого значения вручную.
- [Палитра из изображения в design-токены](https://elysiatools.com/ru/tools/image-to-design-tokens): Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков
- [Планировщик бюджета задержки API](https://elysiatools.com/ru/tools/api-latency-budget-planner): Планируйте и визуализируйте бюджет задержки API. Введите цель P99 (напр. ≤ 300мс) и распределение по этапам (DNS, TCP, TLS, TTFB, Processing, Network), чтобы увидеть живой водопад, использование бюджета и предупреждения о превышении. Можно вставить trace OpenTelemetry или Datadog для получения измеренной оценки.
- [Планировщик миграции CSV в базу данных](https://elysiatools.com/ru/tools/csv-to-database-migration-planner): Выводит реляционную схему из CSV и генерирует CREATE TABLE и ALTER для PostgreSQL, MySQL, SQLite или SQL Server
- [Студия запросов и преобразований JSONata](https://elysiatools.com/ru/tools/jsonata-query-transform-studio): Просматривайте запросы и преобразования в стиле JSONata, сравнивайте результаты и экспортируйте JSON, CSV, YAML или Markdown.
- [Генератор и анализатор JWK](https://elysiatools.com/ru/tools/jwk-generator): Генерирует JSON Web Keys (JWK) для RSA, EC (P-256/P-384/P-521/secp256k1) и OKP (Ed25519/Ed448/X25519/X448), либо разбирает существующий JWK для просмотра параметров, отпечатка и метаданных

## Примеры

- [Примеры JWT](https://elysiatools.com/ru/samples/jwt-samples): Полные примеры JWT от базовой структуры токенов до продвинутых реализаций безопасности
- [Postman Collections - API Тестирование](https://elysiatools.com/ru/samples/postman-collections): Всесторонние примеры Postman collections включая API тестирование, скрипты автоматизации, переменные окружения, mock серверы и продвинутые паттерны тестирования для REST API
- [JSON Примеры Terraform Plan](https://elysiatools.com/ru/samples/terraform-plan-json-samples): Файлы Terraform plan JSON для визуализации зависимостей и проверки изменений, похожие на terraform show -json
- [Примеры Распределенного Трейсинга](https://elysiatools.com/ru/samples/distributed-tracing-samples): Комплексные примеры распределенного трейсинга с использованием Jaeger, OpenTelemetry и современных инструментов