Полтора года назад мы рассказывали, как настраиваем дизайн-токены через Tokens Studio. С тех пор Figma выпустила нативные Variables, добавила режимы и коллекции. В 2024-м у дизайнера снова выбор - и он не очевиден.
Что умеют Figma Variables сейчас
- Color, number, string, boolean - четыре базовых типа.
- Modes (light/dark/brand-X) с переключением на уровне фреймов.
- Алиасы между переменными.
- REST API для чтения и записи (платный плагин для команд).
- Привязка к свойствам компонентов (auto layout, padding, typography в beta).
Что умеет Tokens Studio
- Полная поддержка W3C-стандарта дизайн-токенов.
- Composite tokens (typography как один токен, не семь).
- Tier-based архитектура (core → semantic → component).
- Мощный экспорт в любые форматы (CSS, SCSS, Tailwind, Style Dictionary).
- Интеграция с GitHub: токены живут в репозитории, не только в Figma.
Главное расхождение
Figma Variables - это «переменные внутри Figma». Они отлично работают для дизайнеров, но source of truth остаётся в Figma-файле. Tokens Studio изначально строится вокруг идеи «токены живут в Git, а Figma - один из потребителей».
Что мы выбираем когда
Если проект - один продукт, дизайн-команда из 1–3 человек, инженерия принимает токены через статический экспорт раз в спринт - Figma Variables хватает. Меньше движущихся частей, проще онбординг.
Если проект - система для нескольких продуктов или брендов, есть отдельный design ops, токены меняются часто и должны автоматически попадать в код через CI - Tokens Studio + Style Dictionary стабильно сильнее.
Гибрид, который у нас работает
На большом дизайн-системном проекте мы держим оба: source of truth в Tokens Studio (синхронизирован с Git), а в Figma Variables зеркалим только используемые семантические алиасы для удобства дизайнеров. Двусторонняя синхронизация - дорогая, мы её не строим. Поток одно-направленный: код-репозиторий → Figma.