Переменные в Figma меняют способ, которым дизайн передаётся в код. Они позволяют собрать цвета, типографику, отступы и состояния в одном месте, упростив поддержку интерфейса и синхронизацию команды. Эта статья расскажет, как использовать возможности Figma Variables на практике — от организации и экспорта до внедрения в CSS и масштабирования на проекте.

Что такое переменные в Figma и зачем они разработчикам

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

Для разработчиков это значит более предсказуемый набор значений и возможность автоматического экспорта в формат, пригодный для кода. Переменные превращают визуальные решения в источник правды, который можно версионировать, документировать и тестировать.

Типы переменных и когда какие использовать

Нельзя всё упаковать одинаково. Разные свойства интерфейса имеют разный уровень абстракции и частоту изменений. Правильный выбор типа переменной облегчает жизнь сразу нескольким участникам команды.

Чаще всего выделяют следующие группы переменных: цвета, типографика, расстояния, радиусы, тени и логические флаги состояния. Каждая группа решает свои задачи и требует отдельного подхода к именованию и хранению.

Ниже — компактная таблица соответствия переменной и типичного способа использования в коде.

Группа Пример в Figma В коде
Цвета —color-primary CSS custom property, tokens.json
Типографика —font-heading-24 CSS vars, theme объект в JS
Расстояния —space-8 SASS переменные или CSS vars
Состояния —shadow-elev-2 Переменные для компонентов

Организация и наименование: как сделать переменные удобными

Имена оказывают большее влияние, чем кажется. Структурированная система имён снижает количество вопросов при передаче дизайна и ускоряет внедрение в код. Лучше иметь простую и последовательную схему именования, чем изобретательские, но непонятные обозначения.

Практические принципы, которые работают на большинстве проектов:

  • группируйте по семантике — «color», «font», «space»;
  • используйте уровни — «primary», «accent», «muted» вместо «синий1», «синий2»;
  • фиксируйте единицы измерения и формат — px для расстояний, rem для типографики;
  • не смешивайте абстракцию и конкретику в одном имени — либо «brand-color», либо «btn-primary-bg», но не оба одновременно.

В моей практике одно из ключевых улучшений пришло после введения схемы с префиксами: frontend-специалисты сразу увидели, какие значения предназначены для компонентов, а какие — для глобальной темы.

Экспорт и интеграция с кодом

Самая болезненная часть — перевод переменных из Figma в формат, который понимают разработчики. Существуют плагины и инструменты, которые умеют экспортировать переменные в JSON, CSS custom properties и другие форматы. Это избавляет от ручного копирования и ошибок при трансформации значений.

Типичный рабочий процесс выглядит так: дизайнер собирает набор переменных в Figma, экспортирует их в tokens.json, затем на стороне разработки конвертирует этот JSON в CSS, SCSS или платформенные токены при помощи инструмента вроде Style Dictionary. Такой поток позволяет генерировать одно и то же значение для веба, iOS и Android.

Примеры форматов экспорта, которые чаще всего применяются:

  • JSON — универсальный, легко парсится на любой платформе;
  • CSS custom properties — прямой импорт в стили браузера;
  • Platform tokens — структуры, адаптированные под iOS/Android.

Как преобразовать переменные Figma в CSS

Ниже — упрощённый пример JSON-шаблона, который экспортируется из Figma и затем превращается в CSS-переменные. Такой шаг помогает синхронизировать тему и ускоряет правки.

{
  "color": {
    "primary": { "value": "#0A6FFF" },
    "muted": { "value": "#6B7280" }
  },
  "space": {
    "8": { "value": "8px" },
    "16": { "value": "16px" }
  }
}

Преобразование в CSS обычно даёт что-то вроде:

:root {
  --color-primary: #0A6FFF;
  --color-muted: #6B7280;
  --space-8: 8px;
  --space-16: 16px;
}

Эта схема упрощает подключение темы и позволяет менять визуал в рантайме путем замены корневых переменных.

Практические сценарии: темы, вариативность и отклик

Переменные особенно полезны при реализации тем оформления и адаптивных интерфейсов. Для темы создаёте набор переменных «theme-light» и «theme-dark», затем меняете значение ссылочных переменных вместо множества отдельных правок в коде. Это экономит время и делает поведение интерфейса предсказуемым.

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

Инструменты и плагины: что стоит попробовать

Список полезных инструментов для работы с переменными постоянно растёт. Среди того, что стоит изучить: плагины для экспорта токенов из Figma, генераторы CSS-переменных и системы трансформации токенов для мобильных платформ. Многие команды комбинируют несколько утилит для получения нужного результата.

Сильным решением на уровне команды будет автоматизация: настройка CI, который при изменении токенов в репозитории автоматически обновляет сборки стилей и публикует новую версию библиотеки компонентов. Это убирает ручные шаги и делает изменения прозрачными.

Ошибки и подводные камни

Несколько частых проблем, с которыми сталкивался сам и видел у коллег. Во-первых, избыточная детализация: когда в качестве переменных создают уникальные значения для каждого компонента, теряется смысл токенов. Во-вторых, непоследовательное именование — это приводит к дублированию и путанице.

Ещё одна распространённая ошибка — попытка экспорта сырого набора переменных без правил преобразования. Значения в Figma могут быть заданы в разных форматах, и без конверсии итоговый JSON будет требовать ручной правки. Наконец, слабая документация: без описаний и контекста новые участники долго привыкают к системе.

Короткие рекомендации для постепенного внедрения

Перевод дизайна на переменные не обязан происходить одномоментно. Несколько шагов, которые сработают в большинстве команд:

  • начните с базовых токенов: цвета и отступы;
  • введите простые правила именования и зафиксируйте их в репозитории;
  • автоматизируйте экспорт и трансформацию в CI или скриптах сборки;
  • документируйте примеры использования для разработчиков и дизайнеров;
  • постепенно выносите компонентные значения в глобальные токены по мере роста проекта.

На одном из проектов мы внедрили этот подход за четыре спринта: первый спринт — аудит и выбор набора токенов, второй — создание схемы имен, третий — настройка экспорта, четвёртый — интеграция в библиотеку компонентов. Такой поэтапный план снизил количество конфликтов и дал команде уверенность в процессе.

Как оценить результат и поддерживать порядок

Критерии успеха просты: меньше ручных правок в стилях, единый источник правды, быстрое применение тем и меньшая вероятность ошибок в цветах и отступах. Регулярные ревью токенов и небольшие правила оформления помогут удерживать порядок.

Полезно добавить в процесс контроль изменений токенов через pull request с описанием причины изменения. Это создаёт историю изменений и помогает понять, зачем конкретное значение было переопределено.

Переменные в Figma — не панацея, но мощный инструмент для структурирования визуальной системы. Если подойти к внедрению системно и не пытаться охватить всё сразу, они быстро окупят себя: дизайн станет предсказуемее, разработка — быстрее, а совместная работа — проще.