FISYCO держит в согласии макет в Figma и код, который видят ваши пользователи. Он доставляет иконки, иллюстрации и токены из Figma в ваш репозиторий через pull request и читает React-код, чтобы показать, где он разошёлся с макетом. На этой странице описано, как устроен продукт и с чего начать.
Две стороны одной дизайн-системы
Дизайн-система почти всегда существует в двух копиях: компоненты, переменные и ассеты в Figma и их реализация в коде. Каждая копия меняется сама по себе, и за разницу между ними никто не отвечает. FISYCO работает с обеими сторонами:
- Из Figma в код. Библиотеки читают файл Figma и доставляют изменения сгенерированными файлами в pull request.
- Из кода обратно к макету. Дизайн-система в коде читает ваш репозиторий, сопоставляет его компоненты с компонентами в Figma и показывает, где они расходятся.
Любое изменение, которое FISYCO вносит в ваш код, приходит как pull request. Команда смотрит его и сама решает, сливать ли.
Как всё связано
Рабочее пространство
При регистрации вы получаете личное рабочее пространство и становитесь его владельцем. У каждого приглашённого есть роль: владелец, администратор или участник. От роли зависит, чем человек может управлять. Подключение Figma или репозитория может служить всему пространству или одному проекту.
Проект
Сам проект ничего не синхронизирует, это делают его библиотеки. На странице проекта в разделе Из кода стоит карточка Дизайн-система в коде, а под ней список Библиотеки.
Библиотеки
Каждая библиотека связывает с проектом один файл Figma и ведёт учёт его содержимого. Она помнит, что уже доставлено, поэтому каждая синхронизация показывает ровно то, что изменилось с тех пор.
Библиотека синхронизируется, когда её файл публикуют в Figma. Синхронизацию можно запустить и вручную. Переменные для токенов могут приходить и из плагина FISYCO для Figma. Изменения уходят в pull request по кнопке Создать PR. Вместо этого в настройках библиотеки можно включить Автоматически создавать PR после каждой синхронизации. Когда pull request слит, библиотека считает его содержимое доставленным.
Дизайн-система в коде
Дизайн-система в коде читает папку, где лежит ваш ui-kit, и React-код, который его использует. Компоненты кода она сопоставляет с библиотекой компонентов из Figma. Библиотеки иконок, иллюстраций и токенов становятся её источниками, и видно, какие из их элементов код на самом деле применяет.
На этой основе она показывает:
- Здоровье дизайн-системы: оценку из 100, насколько код следует макету и токенам.
- Расхождения: где код и макет не сходятся и кто делает следующий шаг, FISYCO или вы.
- ИИ-агенты: что дизайн-система дала ИИ-агентам, подключённым через MCP-сервер FISYCO, и чего они не нашли.
Ещё она проверяет каждый pull request в подключённом репозитории и оставляет один комментарий с замечаниями по дизайн-системе.
Работу за этими вкладками делает библиотекарь. Он индексирует репозиторий и находит обходы системы, например цвета, записанные мимо токенов. На GitHub он может подготовить исправление и открыть его как pull request. Насколько он действует сам, задаёт автономность: Выключено, Предлагает или Действует сам. Изначально она выключена.
FISYCO читает репозиторий через API вашего Git-провайдера. Код он никогда не запускает и исходники не хранит, только индекс: компоненты, их свойства и места использования. Исправление, которое FISYCO не может доказать, не выпускается.
Библиотеки работают и без дизайн-системы в коде. Её подключение не меняет, как они синхронизируются и доставляют файлы.
Что понадобится
- Аккаунт Figma с доступом к файлам, которые нужно синхронизировать.
- Репозиторий на GitHub, GitLab (gitlab.com) или Bitbucket Cloud, куда придут pull request.
- Кодовая база на React для дизайн-системы в коде: она читает файлы
.tsxи.jsx.
Что дальше
- Настройте рабочее пространство и пригласите команду.
- Подключите Figma, чтобы библиотеки могли читать файлы.
- Подключите репозиторий, куда будут приходить pull request.
- Подключите дизайн-систему в коде, чтобы сверить код с макетом.
- Разберите расхождения и решите, что исправлять первым.