Синхронизация библиотеки компонентов с кодом через переменные

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

Основа продвинутого DesignOps — концепция Single Source of Truth (Единый источник истины). Это подход, при котором вы фиксируете дизайн-решение в одном месте (например, в Figma Variables или Tokens Studio), и оно автоматически транслируется во все инженерные системы. Если разработчик переписывает HEX-коды или отступы вручную, возникает технический долг и риск рассинхронизации интерфейса.

Как работает автоматическая синхронизация

Чтобы изменения из макета попадали в продукт без участия человека, нужно выстроить цепочку трансформации данных. Как показано на Схеме 1, процесс начинается с экспорта данных в универсальный формат, понятный и дизайнерам, и разработчикам.

Ключевое звено здесь — JSON-спецификации. JSON (JavaScript Object Notation) — это текстовый формат обмена данными, ставший стандартом общения между графическими редакторами и средами разработки. Мы ориентируемся на стандарт W3C Design Tokens Community Group (DTCG), где каждое значение описывается через ключ $value.

Инструменты трансформации

Для настройки моста используйте связку из переменных Figma (или плагина Tokens Studio для сложных параметров вроде теней) и Style Dictionary.

Style Dictionary — это фреймворк, который принимает «сырой» JSON из Figma и преобразует его в форматы конкретных платформ: CSS-переменные для веба, XML для Android или Swift для iOS.

{
  "action": {
    "primary": {
      "background": {
        "$value": "{color.blue.500}",
        "$type": "color",
        "$description": "Основной цвет заливки главных кнопок"
      }
    }
  }
}

Настройка выгрузки

Для хранения токенов в российских IT-экосистемах рекомендуем использовать локальные Git-репозитории (например, GitLab). Это гарантирует безопасность и независимость от внешних облаков.

Алгоритм настройки:

1. Валидация имен: проверьте, что переменные в Figma следуют единому синтаксису (например, System / Semantic / Component).
2. Экспорт: выгрузите коллекции в JSON. Современные плагины поддерживают автоматический Push файла напрямую в репозиторий.
3. Конфигурация Style Dictionary: создайте файл config.json, чтобы указать инструменту источники данных и целевые форматы.

Автоматизация через CI/CD

Высший пилотаж — когда дизайнер нажимает «Опубликовать» в Figma, и через пару минут изменения сами появляются в тестовой среде. Это реализуется через CI/CD пайплайны (Continuous Integration / Continuous Delivery).

Когда JSON-файл попадает в репозиторий, срабатывает скрипт запуска Style Dictionary. Инструмент генерирует обновленные файлы стилей и создает Pull Request (запрос на изменения) в основной код продукта.

Настроив этот процесс, вы избавитесь от рутины и ошибок ручного переноса. Теперь макеты — это не просто картинки, а живые данные.

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