У каждой продуктовой команды две копии дизайн-системы. Одна живёт в Figma: цвета, отступы, иконки и компоненты, которые утвердил дизайн. Другая — в продакшене: код, с которым на самом деле работают клиенты. В первый день копии совпадают. Через несколько месяцев — уже нет, и никто не может сказать, насколько.
FISYCO — инструмент контроля дизайн-системы. Он создан, чтобы закрыть этот разрыв, и с сегодняшнего дня открыт для всех.
Коротко
- FISYCO — инструмент контроля дизайн-системы: он держит в согласии дизайн, утверждённый в Figma, и код, который вы выпускаете, и показывает, где они разошлись.
- Иконки, иллюстрации и дизайн-токены попадают из Figma в ваш репозиторий pull request'ами с ревью — по кнопке или после каждой публикации в Figma.
- FISYCO читает ваш код на React, ранжирует расхождения с утверждённым дизайном по охвату и готовит исправления, проверенные рендерингом.
- На время публичной беты FISYCO бесплатен: все возможности включены, карта не нужна.
Зачем мы сделали инструмент контроля дизайн-системы
Контроль дизайн-системы — это возможность в любой момент показать, что продакшен всё ещё соответствует дизайн-системе, которую утвердила команда. Сегодня большинство команд так не могут.
Разрыв редко возникает из-за одной большой ошибки. Дизайнер переименовал переменную, а в коде осталось старое имя. Разработчик выкатил быстрый фикс с цветом, вписанным руками. В Figma появилась новая иконка, а до репозитория она так и не дошла. Каждая правка маленькая и разумная. Вместе они превращают утверждённую систему в пожелание.
Отраслевые исследования рисуют ту же картину. В Sparkbox Design Systems Survey 2022 (219 ответов) 37% респондентов назвали соответствие дизайна и кода одной из главных проблем. zeroheight Design Systems Report 2026 (147 практиков) показал, что хоть какой-то конвейер токенов есть лишь у 40% команд. Остальные, по словам авторов отчёта, «вручную синхронизируют токены между дизайном, документацией и кодом».
Мы сделали FISYCO, чтобы у разницы между двумя копиями наконец появился владелец: инструмент, который видит обе стороны и сообщает о каждом найденном расхождении. Честно измерить этот разрыв оказалось сложнее, чем кажется. Наш первый замер демо-репозитория засчитал наши же экспортированные иконки как сотни обходов системы. Так мы научились исключать сгенерированный код. Как устроено расхождение дизайн-системы, мы разбираем в статье почему продакшен тихо расходится с дизайн-системой.
Что FISYCO умеет сегодня
Библиотеки: из Figma в код через pull request
Подключите файл Figma и репозиторий — и FISYCO превратит дизайн-ассеты в код:
- Иконки — React-компонентами, SVG-спрайтом или пакетом.
- Иллюстрации — файлами SVG, PNG, WebP или AVIF.
- Дизайн-токены — переменные и стили Figma в JSON, CSS, SCSS или TypeScript.
Изменения приходят pull request'ом, поэтому проходят то же ревью, что и любой другой код. Синхронизируйте по кнопке или доверьте FISYCO делать это после каждой публикации библиотеки в Figma. Переменные приходят через плагин FISYCO для Figma, поэтому синхронизация токенов работает на любом тарифе Figma.
Поиск расхождений: где продакшен разошёлся с дизайном
FISYCO индексирует ваш код и сравнивает его с утверждённым дизайном. Он перечисляет каждое найденное расхождение и ранжирует их по тому, какую часть продукта они задевают. Расхождение — это уехавший цвет, токен, который есть в дизайне, но не в коде, или значение, вписанное руками там, где должен стоять токен.
Для многих находок FISYCO готовит исправление, проверяет его рендерингом и только потом открывает pull request. Непроверенные исправления никуда не уходят, даже черновиками.
Компоненты: последствия видны до переделки
Для библиотек компонентов FISYCO следит за изменениями компонентов в Figma и говорит, может ли правка сломать код, который их использует. Компоненты он не генерирует. Он подсказывает команде, куда смотреть, до того как начнётся переделка.
С чем работает
С чего начать контроль дизайн-системы
- Создайте воркспейс и проект.
- Подключите аккаунт Figma и репозиторий.
- Добавьте первую библиотеку.
- Запустите синхронизацию и посмотрите pull request, который откроет FISYCO.
Первая синхронизация фиксирует исходное состояние, и FISYCO сравнивает с ним каждое новое изменение.
Начните с одного проекта и одной библиотеки. На иконках весь цикл виден быстрее всего: публикация в Figma, ревью pull request'а, слияние. Затем подключите репозиторий как кодовую сторону дизайн-системы — и увидите, где продакшен от неё отошёл.
Частые вопросы
FISYCO бесплатен?
Да, на время публичной беты. Все возможности доступны бесплатно, карта не нужна.
FISYCO меняет наш код без ревью?
Нет. Каждое изменение приходит pull request'ом в ваш репозиторий, и только ваша команда решает, вливать ли его.
Какой доступ к репозиторию нужен FISYCO?
На GitHub FISYCO устанавливается как GitHub App с правом чтения содержимого репозитория и правом записи в pull request'ы. Право записи в содержимое нужно, только если вы хотите, чтобы FISYCO предлагал исправления кода. FISYCO хранит имена компонентов, пути к файлам и номера строк, но никогда — текст вашего кода. Он держит последние 30 индексов, показывает полный журнал доступа и удаляет всё, что получено из вашего кода, когда вы его отключаете.
Нужен ли Figma Enterprise?
Нет. Стили читаются через Figma API, а переменные отправляет плагин FISYCO, который работает на любом тарифе Figma.
Расскажите, чего не хватает
Мы плотно работаем с первыми командами. Если чего-то не хватает или что-то мешает, напишите нам на hello@fisyco.com — письмо попадёт прямо к тем, кто делает продукт.
В этом блоге мы будем делиться тем, что узнаём. Дальше: как дизайн-системы расходятся с кодом, как измерять их здоровье и как переносить токены из Figma в код без ручного экспорта.