Типова ситуація у більшості команд: дизайн-токени є у Figma Variables, CSS-змінні є в коді, і вони нібито мають бути однаковими — але насправді розбіжності накопичуються з кожним спринтом. Хтось оновив колір у Figma, але забув оновити в коді. Або навпаки.

Вирішення — єдиний pipeline де Figma є джерелом правди, а CSS генерується автоматично.

CSS Custom Properties: основи

CSS Custom Properties (CSS-змінні) — це рідна браузерна фіча. Вони оголошуються через -- і використовуються через var():

:root {'{'}
  --color-accent: #A8FF57;
  --spacing-4: 16px;
  --font-size-lg: 1.125rem;
{'}'}

.button {'{'}
  background: var(--color-accent);
  padding: var(--spacing-4);
{'}'}

Перевага над SASS-змінними: CSS Custom Properties доступні в runtime, їх можна змінювати через JavaScript і вони підтримують cascade (різні значення в різних контекстах — ідеально для тем).

Три підходи до синхронізації

Підхід 1 — ручний (не рекомендується): дизайнер оновлює Figma Variables, розробник дивиться і оновлює CSS вручну. Працює тільки якщо токенів менше 20 і команда дисциплінована. На практиці — завжди є розбіжності.

Підхід 2 — Tokens Studio + Style Dictionary: плагін Tokens Studio для Figma синхронізується з GitHub. При пуші нових токенів — Style Dictionary генерує CSS, SCSS, JS-константи автоматично. Налаштування займає день, зате потім — zero-maintenance.

Підхід 3 — Figma Variables API: нативний API Figma що дозволяє читати Variables програмно. Можна написати скрипт що витягує всі Variables і генерує CSS. Більш гнучкий але потребує більше коду.

Рекомендація для старту: якщо в команді є розробник готовий витратити день на налаштування — Tokens Studio + Style Dictionary. Якщо ні — ручний підхід з чітким процесом оновлення і чеклістом.

Структура CSS-змінних що масштабується

Дзеркаліть структуру Figma Variables у CSS. Три групи: primitive, semantic, component.

Primitive: --primitive-blue-500: #3B82F6. Semantic: --color-background-primary: var(--primitive-blue-500). Component: --button-primary-bg: var(--color-background-primary).

Темна тема реалізується через перевизначення semantic-змінних в [data-theme="dark"] або .dark класі. Primitive-змінні не змінюються — змінюються тільки semantic-посилання.

Practical: від Figma до CSS за 30 хвилин

  1. Відкрийте Figma → Edit → Variables (або команда Variables у правій панелі)
  2. Перегляньте структуру змінних — Primitive і Semantic колекції
  3. Встановіть плагін "Figma Tokens" або "Variables to CSS"
  4. Експортуйте змінні у форматі CSS Custom Properties
  5. Скопіюйте у :root вашого CSS файлу
  6. Замініть hardcoded значення у компонентах на var()

Токени що живуть тільки в Figma — це дизайнерський артефакт. Токени що живуть у коді — це справжня дизайн-система.