Библиотека компонентов читает опубликованные компоненты одного Figma-файла и фиксирует, как они меняются от синхронизации к синхронизации. Код она не генерирует и pull request не открывает. Это сторона макета в вашей дизайн-системе: именно с ней FISYCO сверяет код.
Перед началом
- Figma подключена, а компоненты файла опубликованы как библиотека. Синхронизация читает только опубликованные компоненты. См. Подключение Figma.
- В проекте есть раздел Дизайн-система в коде. Библиотеки компонентов живут там, а не в списке Библиотеки проекта.
- Вы сопровождающий проекта либо владелец или администратор рабочего пространства. Создавать и редактировать библиотеки могут только они.
Создайте библиотеку
- Откройте проект, затем Дизайн-система в коде.
- Нажмите Создать библиотеку компонентов. Кнопка есть на шаге Макет мастера подключения. Пока в проекте нет библиотеки компонентов, она есть и в блоке Источники на вкладке Обзор.
- Общие настройки. Введите Название и вставьте ссылку на файл в поле Figma-файл.
- Источник. Выберите страницы, затем компоненты, за которыми нужно следить. Если в файле нет опубликованных компонентов, выбирать будет нечего: сначала опубликуйте библиотеку в Figma.
- Нажмите Создать библиотеку. Первая синхронизация запустится сразу.
Первая синхронизация фиксирует исходную точку, поэтому изменений в ней нет. Изменения появляются начиная со следующей.
Что показывает библиотека
На вкладке Обзор компоненты разложены сеткой. У набора есть бейдж с числом вариантов, например Сет · 12. Список можно отфильтровать по Все типы, Наборы или Отдельные либо найти компонент по имени.
Нажмите на компонент, чтобы открыть подробности:
- Оси вариантов: каждая ось набора с её значениями.
- Свойства: таблица свойств компонента с колонками Тип и По умолчанию.
- Варианты: все варианты, по колонке на каждую ось.
- Последнее изменение: самое свежее зафиксированное изменение, если оно есть.
- Техническое: узел Figma, когда компонент менялся в последний раз и сколько изменений записано.
Для каждого варианта FISYCO хранит снимок раскладки, заливок, обводок, типографики и слоёв. Положение на холсте в снимок не входит, так что перенос компонента изменением не считается. Правка текста подписи тоже не считается изменением дизайна. Вложенный экземпляр хранится вместе с вариантом, который он использует, поэтому смена этого варианта учитывается.
Как классифицируются изменения
Каждое изменение получает один из трёх классов. Если причин несколько, у компонента остаётся самая серьёзная.
Ломающее изменение значит, что код, который уже использует компонент, может перестать ему соответствовать. Экран, где стоит size="xs", останется без варианта, как только значение xs исчезнет из Figma.
Где видны изменения
Вкладка Ожидают показывает компоненты, которые изменились при последней синхронизации. Откройте любой, и вы увидите бейдж изменён или новый, класс изменения и что именно поменялось:
- У ломающего изменения сначала перечислены причины, например Удалено значение варианта:
xs. - Ниже идёт таблица Свойство, Было и Стало. В каждой строке указан вариант, к которому она относится.
- Если значение привязано к переменной Figma, в таблице стоит имя токена из библиотеки токенов этого же проекта, а под ним исходное значение. Без такой библиотеки показываются сами значения.
- AI-сводка описывает изменение словами. Она собирается из записанных фактов. Если фактов много, модель пересказывает их, ничего не добавляя.
- История изменений перечисляет все изменения компонента с классом и датой.
Подтверждать ничего не нужно. После каждой успешной синхронизации новый снимок становится исходной точкой для следующей.
Синхронизации и их история
Если подключены вебхуки Figma, публикация библиотеки в Figma сама запускает синхронизацию. Когда в шапке библиотеки видна кнопка Проверить или Синхронизировать, она запускает синхронизацию вручную.
Вкладка История перечисляет все запуски с колонками Статус, Триггер, Пользователь и Запущен. В колонке Изменения видно, сколько компонентов добавлено, изменено и удалено. Кнопка Просмотр открывает отдельный запуск.
Чтобы получать оповещения, откройте Настройки проекта, затем Уведомления. В группе Компоненты два события. Компоненты изменились приходит после любой синхронизации с изменениями. Ломающее изменение дизайна приходит только при ломающих, поэтому канал, подписанный на него, в остальное время молчит.
Как библиотека работает на дизайн-систему
Подключённые библиотеки компонентов дизайн-система читает как сторону макета. В блоке Источники у подключённой библиотеки стоит В дизайн-системе, а у библиотеки со статусом Не подключена есть кнопка Подключить. Несколько библиотек компонентов читаются как один макет, а одноимённый компонент в двух файлах показывается как конфликт.
Если подключён репозиторий, FISYCO сопоставляет каждый компонент Figma с его парой в коде и показывает расхождения. См. Сравнение компонентов и Расхождения. Без репозитория библиотека всё равно следит за изменениями в Figma и отмечает ломающие.
Библиотека компонентов только читает Figma. В ваш репозиторий она ничего не пишет. Исправления кода приходят через pull request, который смотрит ваша команда.