Radix Colors to Variables | Импорт палитры в переменные Figma

Моя роль: дизайн и вайбкодинг · Фокус: Figma-плагин, дизайн-токены, цветовые системы

Как перенести палитру Radix в переменные Figma и не получить 700 лишних токенов

Попробовать

Выше — настоящий интерфейс плагина: те же ui.html и code.js, что работают в Figma. Парсер, валидация вставленного CSS и тексты статусов — всё живое. Разница одна: переменные создаются в памяти вкладки, а не в файле, так что после перезагрузки страницы от них ничего не остаётся.

Open in Figma Community

Контекст и боль

Radix Colors — это три десятка шкал по 12 ступеней, светлая и тёмная темы, плюс альфа-версии. В коде палитра подключается за пару секунд. В Figma это превращается в унылую рутину: вручную завести сотни переменных, настроить режимы и не ошибиться в названиях.

Существующие плагины заставляют делать лишнюю работу: они либо создают стили вместо переменных, либо генерируют сразу все 700+ токенов. Если продукт светлый, приходится сидеть и вручную вычищать половину палитры — аккуратно, потому что имена почти одинаковые.

Жёсткие рамки

Ограничение Figma: переменные живут только в sRGB. Всё, что приходит в OKLCH или Display P3, приходится конвертировать с неизбежной потерей цвета.
Ширина окна: нужно уместить три десятка шкал, переключатели тем и настройки в узкий кадр 564 px, сохранив читаемость.

Интерфейсные решения

Разделение сценариев. Вместо одного громоздкого экрана — две вкладки. Нужно просто взять Gray и Blue? Выбираешь из встроенной библиотеки. Принёс готовый CSS с сайта Radix? Вставляешь во вторую вкладку.
Свотч и есть чекбокс. Нео-брутализм держится на плотных плашках, толстых обводках и жёстких тенях. Цветной кружок рядом с чекбоксом ломает ритм и превращает список из тридцати строк в кашу, поэтому цветом заливается сам чекбокс при выборе. Цена: выбрать шкалу «по цвету» нельзя, только по названию — цвет появляется уже после клика.
Валидация CSS на лету. Плагин сразу показывает, какие шкалы и темы он распознал в скопированном тексте. Это защищает от случайно потерянной тёмной темы и обрезанного кода.

Как это устроено внутри

Парсер: понимает HEX, RGB, HSL, OKLCH, OKLAB и Display P3, приводя всё к sRGB.
Честное превью: фреймы на холсте рисуются плашками, привязанными к переменным, а тёмному фрейму режим коллекции задаётся явно через setExplicitVariableModeForCollection (code.ts:538). Без этого Figma отрисовала бы обе темы в режиме родительской страницы — то есть одинаковыми, и превью врало бы ровно там, ради чего оно нужно.
Дозапись без дубликатов: при повторном запуске новые шкалы дописываются в существующую коллекцию.

Ограничения и фокус

Плагин создан только для импорта. В нём сознательно нет редактирования токенов или гибкой подгонки кривых. Инструмент должен быстро решать одну рутинную задачу, не превращаясь в громоздкий редактор.

Результат

Восемь установок в Figma Community. Аудитория узкая — дизайнеры, которые собирают дизайн-систему на Radix именно в Figma, — и цифра её честно отражает.

Развитие остановлено намеренно. Отсутствие редактирования — не недоделка, а граница: растягивать её внутри импортёра означало бы получить плохой редактор вместо хорошего импортёра. Следующий шаг — отдельный продукт: редактирование матрицы токенов, гибкие растяжки Radix и добавление своих свотчей.