Заранее извиняюсь перед дизайнерами, которые сейчас будут кидаться в меня Figma‑файлами. Тема неприятная, но обсудить её надо.
Более 15 лет я являюсь Lead Product дизайнером в B2B‑командах. И все эти 15 лет в каждом проекте повторялся один и тот же ритуал: дизайнер рисует макет, разработчик смотрит на макет, разработчик делает похоже. Ключевое слово — «похоже».
Дальше начинается известный жанр. «А почему отступ 20, а не 24?» — «Ну там компонент такой». «А почему кнопка серая?» — «А это disabled из старой библиотеки, её никто не трогал с 2021». «А сделай как в макете» — «Так в макете нарисовано то, чего у нас в коде нет».
И вот что обидно: формально виноватых нет. Дизайнер нарисовал по дизайн‑системе. Разработчик собрал из компонентов. Просто дизайн‑система в Figma и дизайн‑система в коде — это два разных документа, которые расходятся тихо, годами, и никто не замечает, пока не начинаешь сверять по пикселям.
Как я вляпался
У меня был проект — SaaS с картами, довольно зрелый фронтенд на React. Я, как обычно, собирал макеты в Figma. Аккуратно, из компонентов, не из прямоугольников. Гордился собой.
А потом выяснилось, что аналитик в этой же команде давно делает по‑другому. Он взял форк фронтенда, поднял Storybook и собирает макеты прямо из настоящих React‑компонентов. Разработчик открывает такой макет и видит не картинку, а готовый JSX, который можно скопировать.
В его инструкции была фраза, от которой мне поплохело: «макет заменяет статичный фрейм в Figma».
То есть моя работа — это то, от чего он уходит.
Интересненько.
Первая мысль была неправильная
Первая мысль была: ну и ладно, пусть код‑макеты, дизайн больше не нужен, надо переучиваться.
Вторая мысль оказалась полезнее. Я сел и сравнил его цвета с моими токенами. Совпали. Все. Тот же синий #4350AF, те же варианты кнопок, та же шкала шрифтов.
Это не две дизайн‑системы. Это одна, просто в двух носителях. И проблема не в том, что кто‑то из нас лишний, а в том, что между носителями нет моста. Каждый ведёт свою копию правды.
У Figma для этого вообще‑то есть штатный механизм — Code Connect, он привязывает компонент в макете к компоненту в коде. Я обрадовался, полез — и упёрся в «нужен план Organization или Enterprise». У меня Professional. Спасибо, до свидания.
Ну ладно. Мост сделаем сами.
Мост
Идея простая до неприличия: завести файл, где для каждого компонента Figma написано, каким компонентом кода он является и как его свойства ложатся на пропсы. Обычный JSON, лежит в репозитории, версионируется.
И вот тут, когда я начал этот файл заполнять, полезло всё, что годами пряталось.
Кнопки. В Figma у меня был один монолитный компонент: Type × Size × State. Внутри Type лежало вперемешку: и Primary/Ghost (это варианты), и Link (а это, оказывается, вообще другой компонент в коде — легаси‑обёртка над MUI), и квадратные иконочные (а это третий компонент). Цвета не было как отдельной оси вообще, хотя в коде она есть.
Состояния. У меня были нарисованы Hover и Active как варианты компонента. В коде их нет и быть не может — это CSS‑псевдоклассы. Я годами рисовал сущности, которых в природе не существует.
Типографика. В Figma 13 текстовых стилей. В коде — 10. Три стиля я исправно применял в макетах, а разработчику приходилось каждый раз что‑то придумывать.
Знаете, что самое неприятное? Ни один разработчик мне за все эти годы про это не сказал. Они просто молча подставляли ближайшее похожее. И были правы — объяснять дизайнеру, что его дизайн‑система врёт, дороже, чем поставить body‑m-400 вместо несуществующего стиля.
Я пересобрал кнопку в Figma заново. Оси назвал ровно как пропсы в коде, значения — ровно как значения в коде, вплоть до регистра: variant, color, size, disabled. Получилось 54 варианта. Hover и Active выкинул. Теперь маппинг тождественный: что видишь в макете — то и пишется в коде, переводчик не нужен.
Что получилось в итоге
Пайплайн сейчас выглядит так.
Я собираю макет в Figma строго из компонентов. Не рисую, а именно собираю — ни одного отсоединённого инстанса, ни одного нарисованного руками прямоугольника, который «выглядит как инпут».
Дальше агент читает этот макет через MCP. Не картинку — структуру: какой компонент, в каком варианте, с каким текстом. По манифесту переводит это в реальные компоненты кода, лезет в репозиторий, читает их настоящие сигнатуры и собирает.stories.tsx.
Потом tsc. Ноль ошибок — значит, я в макете не наврал. Есть ошибки — значит, наврал, и мне это скажут через минуту, а не через две недели на код‑ревью.
Разработчик открывает Storybook и видит готовый JSX из тех же компонентов, которые он и так использует. Копипастит.
Скриншоты в этом процессе не участвуют вообще. Совсем. Это принципиально: как только в цепочке появляется картинка, кто‑то начинает угадывать.
Где нейронка налажала
Раз уж пошли откровения.
Она отрисовала кнопку «Reset to defaults», которой в макете не было. То есть была — но скрытая, отключённая. Агент увидел слой и вывел его. Пришлось отдельным правилом записывать: скрытое не рендерим.
Она вывела счётчики на вкладках, которых я тоже скрыл. Тот же баг, тот же корень.
Она полдня не могла победить горизонтальный скролл в модалке. Я в итоге сам открыл девтулзы и нашёл: у скроллбара стоит min‑width: 100%, а MUI‑шная сетка с отступами рендерится шириной calc(100% + N). Одно упирается в другое, вылезает полоса прокрутки. Агент до этого честно перебрал три неправильные гипотезы.
Она обернула вкладки в свой контейнер с рамкой — а компонент рисует рамку сам. Получилось две полоски.
Ну и половина интерфейса внезапно заговорила по‑русски, потому что в Storybook язык по умолчанию оказался не английский.
Это всё реальные косяки, и я их не прячу. Но обратите внимание на одну деталь: каждый из них я увидел за минуты. Не через месяц в продакшене, не от злого пользователя в поддержке. Потому что макет теперь компилируется и запускается.
Когда я отдавал разработчику картинку, у меня не было ни одного способа проверить, что он собрал именно то. Вообще ни одного. Я мог только смотреть глазами и сравнивать с макетом — то есть заниматься тем же угадыванием, только с другой стороны.
Так это про замену людей?
Нет. И вот здесь я, пожалуй, поясню подробнее.
Разработчиков этот пайплайн не заменяет. Он заменяет передачу макета — тот самый момент, где смысл терялся. Разработчик по‑прежнему пишет продукт, спорит со мной про UX, чинит то, что я собрал криво, и он же должен внести в код те правки, которые я у себя пометил комментарием «для разработчика».
Изменилось другое: теперь мы с разработчиком спорим о продукте, а не о том, чей документ считать правдой. Правда одна — код. Figma держит внешний вид, код держит структуру и поведение. Если они разошлись — это видно сразу, а не через полгода.
По итогу
В стартапах и малом бизнесе нейронки уже успешно заменяют дизайнеров, разработчиков и даже аналитиков. В общем‑то, и коперайтеров тоже.
