Автоматизация синхронизации Figma с репозиторием ui-кита

Проблема

Отсутствие автоматической выгрузки переменных или иконок из Figma в репозиторий может приводить к:

• Ошибкам при ручном копировании значений
• Рассинхронизации между дизайном и кодом
• Потере времени на повторяющиеся операции
• Отсутствию единого источника истины для дизайн-системы

Решение

Для решения проблемы можно использовать два подхода: Figma Rest API и реализация собственного плагина в окружении Figma через Plugin API. Наш выбор остановился на Plugin API по следующим причинам:

• Ограничения тарифного плана Figma не позволяют автоматический забор переменных
• Полный контроль над процессом экспорта
• Возможность интеграции с внутренними системами
• Отсутствие внешних зависимостей

В YCLIENTS мы разработали плагин YC Figma Plugin Sync, который имеет следующую схему компонентного взаимодействия

Что умеет

• Экспорт дизайн-токенов в JSON формат (цвета, типографика, эффекты)
• Экспорт иконок в SVG формат из контейнера "YCIcon"
• Автоматическое создание MR в репозитории UI-kit

Требования для работы с плагином

• Доступ к Figma файлу с переменными/иконками
• GitLab access token с правами API
• Доступ к репозиторию UI-kit
• Права на создание merge request

Схема выгрузки токенов и иконок

Детальная схема процесса выгрузки токенов и иконок через плагин

Примеры экспортируемых файлов

JSON файл с переменными

{
  "primary_color": {
    "type": "COLOR",
    "value": "#007bff",
    "cssValue": "#007bff"
  }
}

SVG файл иконки

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="..."/>
</svg>

Преимущества и ограничения

Плюсы

• Автоматизация — весь процесс в пару кликов
• Надежность — исключены ошибки ручного копирования
• Скорость — мгновенная синхронизация изменений
• Прозрачность — автоматическое создание MR для отслеживания изменений
• Полный контроль над форматом экспорта
• Интеграция с внутренними системами

Минусы

• Ручной запуск — требует запуска плагина при изменениях
• Зависимость от плагина — дополнительная прослойка между продуктовым кодом и Figma

Заключение

YC Figma Plugin Sync решает ключевую проблему синхронизации дизайн-системы между Figma и кодом. Несмотря на необходимость ручного запуска, плагин значительно упрощает процесс и исключает ошибки ручного копирования.