Переменные в Фигме. Боль, JSON и ИИ.

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

🔵оттенку (neutral, positive, brand…),

🔵семантической группе (accent, contrast, inversed),

🔵платформе (web, iOS, Android),

🔵и, финально, теме — день/ночь.

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

Но! Фигма так нативно и красиво не умеет. Только через костыль.

Во-первых, сразу отказываемся от идеи переключать оттенки модами (neutral, positive, negative… . вот эта штука). Очень хотелось бы, но нет уверенности, что хватит лимита по количеству модов — не хочется загонять себя в ограничения на старте.

И даже без этого, чтобы переключать остальные группы через моды, на первом слое нужно объявить всё логическое произведение групп (перемножить их между собой). И получается жесть.

Допустим, семантические группы мы выносим в моды. Но все остальные измерения зашиваем в уникальные переменные вида:

daywebprimary dayiosprimary dayandroidprimary nightwebprimary nightiosprimary nightandroidprimary

И это ещё нужно продублировать для каждого (!!!) оттенка. И так для каждого токена.

Зато в следующих коллекциях можно всё красиво связать с модами, скрыть промежуточные коллекции от публикации и получить аккуратное управление. Но какой ценой? Вручную это обслуживать почти нереально.

И тут внезапно на сцену выходят нейросети.

Даже обычный ChatGPT уже неплохо редактирует JSON. Достаточно:

1️⃣ экспортировать переменные из Фигмы через любой бесплатный плагин,

2️⃣ скормить JSON ИИ,

3️⃣ внести правки,

4️⃣ импортировать обратно.

Да, бэкапы сохраняем постоянно — это база.

А если настроить это аккуратно через специализированные ИИ-инструменты (тот же Codex) и связать всё через что-нибудь вроде Cursor с Фигмой, можно автоматизировать часть рутины, обложить правилами и со временем минимизировать галлюцинации и лишние пояснения.

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

🛫Канал: UXFLOW • Сергей Мухин Сайт: uxflow.ru

В этом посте были ссылки, но мы их удалили по правилам Сетки