Вкладка Компоненты дизайн-системы в коде ставит каждый компонент вашего ui-kit рядом с его парой в Figma. Откройте компонент, и FISYCO нарисует макет и код рядом по их значениям. Он покажет, где они расходятся, и даст поправить, каким пропсам соответствуют варианты макета.
Перед началом
- Дизайн-система в коде подключена, и первая индексация закончилась. См. Подключение дизайн-системы.
- Библиотека компонентов подключена как сторона макета. Без неё ни у одного компонента нет пары, с которой можно сравнить.
Список компонентов
Откройте проект, затем Дизайн-система в коде в разделе Из кода и вкладку Компоненты. Карточки сверху считают Компонентов в коде, Сопоставлено, Разошлись и Без пары в коде.
Каждая строка описывает один компонент, найденный в папке ui-kit:
Фильтры над таблицей оставляют Разошлись, Нет в макете или Вопросы сопоставления. Под таблицей блок В макете есть, в коде нет перечисляет компоненты Figma, у которых в коде нет пары.
Пары выводятся заново при каждой индексации. Если у компонента пары нет, шторка подскажет переименовать его так, чтобы совпадение стало очевидным.
Сравнение
Щелчок по строке открывает шторку компонента. В шапке видны состояние, число применений, оценка здоровья и две ссылки: Открыть в репозитории и Открыть в Figma. Первой открывается вкладка Сравнение.
Визуальная разница рисует две схемы: Макет по варианту Figma и Код по тому, что компонент рисует для тех же пропсов. Сторону кода FISYCO вычисляет статически при индексации и ваш код не запускает. Переключайте режимы Рядом, Наложение и Шторка, а По размеру подгоняет обе стороны одним масштабом.
Красные метки с номерами показывают расхождения. Те же номера стоят в списке Расхождения ниже, по свойствам. Щелчок по слою любой схемы оставит в списке только эту часть. Повторный щелчок снимает выбор.
Деревья слоёв
Под каждой схемой своё дерево. Слои макета показывают слои Figma с типом: компонент, фрейм, экземпляр, текст или фигура. Элементы кода показывают теги, слоты и компоненты ui-kit. Наведите на строку, и её пара подсветится на другой стороне. Если пары нет, другое дерево подпишет: Этого слоя в коде нет или Этого элемента в макете нет.
Составной компонент, например меню с пунктами, занимает одну строку списка. Щёлкните по экземпляру части, и панель пропсов покажет эту часть под заголовком Часть. Весь компонент возвращает к корню.
Пропсы и сопоставление вариантов
Панель справа от схем делится на Оси вариантов и Свойства макета. Выберите там значение оси, и обе схемы перерисуются в этом варианте.
У каждой оси видно её соответствие в коде, например «Figma Size ↔ проп size», и откуда оно взялось:
- по имени: FISYCO сопоставил ось с пропсом, а её значения со значениями пропса по именам.
- AI · проверено значениями: предложение AI, которое FISYCO принял, нарисовав код с ним. Расхождений стало меньше, и нигде не прибавилось.
- вручную: сопоставление задал кто-то из команды.
Предложение AI, которое проверить не удалось, остаётся подсказкой AI предлагает: …, а ось остаётся открытой. Ось без известного соответствия подписана Не сопоставлено: эти варианты не сверяются. Значения вроде Hover относятся к состояниям браузера, их тоже не сверяют. Блок Только в коде выводит переключателями пропсы кода, для которых в макете нет оси.
Вопрос сопоставления не считается расхождением. Варианты без известного соответствия не входят ни в сравнение, ни в оценку здоровья, а в шапке видно Сверено N из M вариантов.
Поправить сопоставление вручную
- Рядом с осью нажмите Изменить сопоставление или Сопоставить, если ось открыта.
- В Что соответствует выберите Один проп, По значениям или В коде нет.
- Для варианта Один проп выберите Проп и значение кода для каждого значения Figma. Для варианта По значениям сопоставьте каждое значение Figma с булевым пропсом, состоянием браузера или пунктом Состояние по умолчанию. Любое значение можно отметить как В коде нет.
- Нажмите Сохранить.
Пока FISYCO пересобирает индекс с вашей правкой, панель показывает Пересчитывается. Ручное сопоставление сильнее выведенного, и AI его не трогает. Если позже код изменится и правка перестанет подходить, ось получит пометку правка устарела. Вернуть выведенное убирает вашу правку.
Править сопоставление могут сопровождающие проекта, а также владельцы и администраторы рабочего пространства. Смотреть его может любой участник проекта.
Расхождения сейчас
Под сравнением блок Расхождения сейчас перечисляет оси и значения, которых нет в коде, и что с каждым делает библиотекарь. Открыть очередь ведёт на вкладку Расхождения. Подробнее в статьях Расхождения и Патчи и автономность.
Остальные вкладки
- Здоровье: оценка, проверки доступности и AI-разбор. См. Здоровье дизайн-системы.
- Применения: вызовы, файлы и репозитории, включая подключённых потребителей. Пять самых частых файлов идут первыми, со ссылкой на проиндексированный коммит. Значения пропсов в ходу считают вызовы по каждому значению и отмечают неиспользуемые.
- История: одна лента изменений макета и кода, событий очереди и патчей, новые сверху. Её можно отфильтровать: Макет, Код, Очередь или Патчи.
- API: пропсы с типами, значениями по умолчанию и пометкой «обязательный», а также Примеры применения со ссылкой на вызов в репозитории.
Ничто на этой странице не меняет ваш код. Исправления попадают в репозиторий только через pull request, который смотрит ваша команда.