Radix Colors to Variables | Импорт палитры в переменные Figma
Как я собрал плагин, который переносит нужные шкалы Radix в переменные Figma и умещается в бесплатный тариф
Попробовать
Выше — прототип, который можно покликать, а ниже — работающий плагин в Figma Community, с которым можно непосредственно сгенерировать цвета.
Проблема: плагины для Radix есть, но не для бесплатного тарифа
Radix Colors — три десятка шкал по 12 ступеней, у каждой есть альфа-версия. В коде палитра подключается за пару секунд. В Figma её тоже переносят плагином — вопрос только в том, что этот плагин умеет.
Существующие создают обе темы сразу, то есть коллекцию с двумя режимами, а второй режим на бесплатном тарифе Figma недоступен: импорт не доходит до конца. Возможности взять одну тему разработчики не предусмотрели.
Фокус и ограничения
Обязательный минимум, ради которого он написан:
- Переменные, а не стили.
- Одна тема на выбор — светлая или тёмная.
Чего в нём сознательно нет — редактирования токенов и подгонки кривых. Растягивать границу внутри импортёра означало бы получить плохой редактор вместо хорошего импортёра.
Настройки: что отличает импортёр от инструмента
- Свой CSS с сайта Radix. Собрал палитру в генераторе Radix — вставляешь CSS на второй вкладке. Поля ниже показывают, какие цвета и темы плагин нашёл во вставленном коде.
- Выбор шкал. Отмечаешь только те, которые реально нужны продукту. Чужие решения дают либо всю палитру целиком, либо один выбранный цвет.
- Свотч и есть чекбокс. Нео-брутализм держится на плотных плашках, толстых обводках и жёстких тенях. Цветной кружок рядом с чекбоксом ломает ритм и превращает список из тридцати строк в кашу, поэтому цветом заливается сам чекбокс при выборе. Цена: выбрать шкалу «по цвету» нельзя, только по названию — цвет появляется уже после клика.
- Альфа — отдельный переключатель. Альфа-шкалы нужны для оверлеев, теней и разделителей, но ровно удваивают число переменных. Поэтому это выбор, а не поведение по умолчанию.
- Название коллекции. Задаёшь, куда лягут переменные. Плагин запоминает последний выбор и подставляет его при следующем запуске — импорт палитры случается раз в несколько недель, и восстанавливать по памяти свою же конфигурацию не нужно.
- Растяжки на холсте. После импорта плагин выкладывает выбранные шкалы на холст: плашки привязаны к переменным, а альфа-ступени показаны на шахматной клетке.
Как это устроено внутри
- Парсер. Понимает HEX, RGB, HSL, OKLCH, OKLAB и Display P3 и приводит всё к sRGB: переменные Figma других цветовых пространств не знают. Для OKLCH и P3 это неизбежная потеря части охвата — альтернативы нет.
- Дозапись без дубликатов. При повторном запуске новые шкалы дописываются в существующую коллекцию, а не создают вторую рядом.
Дальше: редактор растяжек
Следующий инструмент в очереди — плагин, который редактирует свотчи: по одному и волной по всей шкале. Изменения, применённые к одной растяжке, он переносит на остальные через OKLCH в один клик, и результат сразу виден в макете.