Два роки тому питання не стояло: якщо хотів нормально управляти токенами в Figma — встановлював Tokens Studio і жив із ним. Потім Figma випустила Variables, і тепер кожна команда задається питанням: а чи варто взагалі тримати плагін?

Коротка відповідь: залежить від масштабу і потреби в синхронізації з кодом. Довга — читайте далі.

Що таке Figma Variables (і чого їм не вистачає)

Figma Variables — це нативна система управління токенами безпосередньо у Figma. Вони підтримують кольори, числа, рядки і булеві значення. Можна створювати mode-switching (наприклад, light/dark), прив'язувати змінні до компонентів і автоматично перемикати теми в прототипі.

Переваги Variables:

  • Нативна інтеграція — не потрібен плагін, все вбудовано
  • Підтримка mode-switching прямо в прототипах
  • Простіше для дизайнерів-початківців
  • Dev Mode показує змінні розробникам напряму

Але є і суттєві обмеження: Variables не підтримують typography tokens нативно (шрифти, розміри, line-height), немає JSON-експорту з коробки, і немає семантичних рівнів — тільки один шар.

Що дає Tokens Studio

Tokens Studio (раніше Figma Tokens) — плагін, який реалізує повноцінну W3C DTCG-сумісну структуру токенів. Він дозволяє:

  • Створювати багаторівневу ієрархію: primitive → semantic → component
  • Синхронізуватись з GitHub/GitLab — токени живуть у репозиторії
  • Експортувати JSON, який одразу споживає Style Dictionary
  • Керувати typography, spacing, shadow, border-radius токенами
  • Підтримка composition tokens

Головна різниця: Variables — це інструмент дизайнера, Tokens Studio — це інструмент design-to-code pipeline. Якщо вам важлива синхронізація з кодовою базою, вибір очевидний.

Реальний кейс: крипто-гаманець на 4 платформи

Один з наших клієнтів — фінтех-стартап з крипто-продуктом на Web, iOS, Android і десктоп. Вони спочатку використовували Variables для speed-up дизайн-роботи. Проблема виникла, коли прийшов час передавати токени в код.

Розробники мали вручну копіювати значення з Dev Mode, бо Variables не давали JSON. Результат: розсинхронізація між Figma і кодом вже після першого спринту. Кольори в прод-версії відрізнялись від дизайну на 3–4 відтінки.

Після міграції на Tokens Studio + GitHub sync проблема зникла. Дизайнер міняє токен → PR автоматично оновлює дизайн-токени в репозиторії → Style Dictionary генерує CSS/Swift/Kotlin змінні. Жодного ручного копіювання.

Коли брати Variables

  • Маленька команда (1–2 дизайнери, немає окремого Design Systems Engineer)
  • Прод-сайт на одній платформі
  • Розробники не споживають токени програматично
  • Потрібен швидкий mode-switching у прототипах

Коли брати Tokens Studio

  • Є кілька платформ (Web + Mobile)
  • Розробники хочуть токени у вигляді JSON/CSS vars/Swift vars
  • Потрібна синхронізація з репозиторієм
  • Важлива семантична ієрархія токенів
  • Є або планується Style Dictionary pipeline

Гібридний підхід

Частина команд використовує обидва інструменти: Tokens Studio для управління і синхронізації з кодом, Variables — для mode-switching у прототипах через плагін Variable Sync. Це додає складності, але дає максимум гнучкості.

Якщо ви тільки починаєте будувати систему — стартуйте з Variables. Як тільки з'явиться потреба в code sync — мігруйте на Tokens Studio. Міграція не тривіальна, але реальна.

Будуємо дизайн-системи з правильною token architecture з першого дня — і показуємо команді як підтримувати це без болю.