У Figma давно был MCP-сервер. Работал он в режиме read-only, и сценарий выглядел так: дизайнер (или вы сами) рисовали макеты руками, потом разработчик скармливал агенту ссылку на файл в Figma, агент разбирал его по слоям, вытаскивал структуру, цвета, отступы, шрифты, и на выходе генерил код, который более-менее соответствовал тому, что было нарисовано.
Вчера Figma обновила свой MCP-сервер, и теперь она умеет не только читать, но и рисовать дизайн. Причём речь не про "нарисуй мне кнопку" или "сделай один экран". Агент может собрать полноценный лендинг целиком или выстроить UX-флоу на несколько экранов. И самое ценное: он делает это в рамках вашей дизайн-системы. Берёт ваши компоненты, ваши токены, ваши стили и собирает из них макет, который выглядит как часть вашего продукта, а не как что-то из генератора 2015 года.
До этого обновления все попытки генерировать дизайн через AI выглядели так себе. Результат глючил, визуал был устаревший, компоненты не из вашего UI Kit, а откуда-то из дефолтных библиотек. Пользоваться этим в проде было нельзя, максимум для наброска. Сейчас ситуация другая. Вы подключаете свою дизайн-систему (UI Kit), и агент собирает макеты, которые реально пригодны для использования.
Я считаю для быстрых экспериментов и проверки гипотез это гигантский шаг вперёд.
Параллельно обновился Stitch от Google. У них тоже появились новые возможности по генерации интерфейсов, и для стадии брейншторма он вполне подходит: накидать вариантов, посмотреть на разные подходы к экрану, быстро визуализировать идею.
Но между Stitch и обновлённой Figma есть принципиальная разница. Stitch генерирует отдельные экраны. Он не знает про вашу дизайн-систему, не умеет строить связанные флоу между экранами, не работает с вашими компонентами.
Как эффективно использовать обновление Figma?
Работает из Cursor, из Claude Code, из любой агентской системы, которая поддерживает MCP. Чем бы вы ни пользовались для разработки или дизайна если там можно подключить MCP-сервер, значит, Figma туда подключается.
Как настроить?
вот статья от самой Figma: https://www.figma.com/blog/the-figma-canvas-is-now-open-to-agents/
Можно даже не читать её самому, а просто дать ссылку агенту и написать "настрой мне Figma MCP". Он справится.
Но есть важный момент: помимо самого MCP-сервера нужно установить Figma Skills – набор навыков для агента. Без них агент подключится, но будет работать тупо. Skills дают ему понимание того, как правильно работать с Figma API: https://github.com/figma/mcp-server-guide/tree/main/skills
После установки всё просто. Пишете агенту промпт, например: "Создай онбординг-флоу из 4 шагов для мобильного приложения". Агент идёт в Figma, создаёт фреймы, расставляет компоненты, заполняет текстами. Вы видите результат прямо в своём Figma-файле. Это базовый сценарий, и он уже рабочий.
Продвинутый сценарий использования Figma MCP: команда агентов
Для него нужен инструмент, в котором можно запускать несколько агентов. Я использую Claude Code, на его примере и покажу. Идея: собрать мини-команду из трёх агентов, каждый со своей ролью и зависимы друг от друга.
Первый агент – Дизайнер. Это исполнитель. Он получает ТЗ и рисует макеты по нему. С креативом, с вашими компонентами. Написано "экран регистрации с тремя полями и кнопкой" — он делает экран регистрации с тремя полями и кнопкой. Его задача – быстро и точно перевести текстовое описание в визуал.
Второй агент – UX-редактор. Он включается после того, как Дизайнер закончил. Его задача – пройтись по всем текстам на макетах и привести их в порядок. Не оставить комментарий "тут лучше переформулировать", а именно взять и переписать. По вашей редакционной политике, по tone of voice, который вы ему задали. Все кнопки, заголовки, подсказки, сообщения об ошибках – всё приводится к единому стилю. Это то, что в ручном режиме отнимает кучу времени и часто вообще не делается до последнего момента.
Третий агент – Art Director. Он смотрит на итоговый результат глазами старшего дизайнера. Проверяет композицию, консистентность, соответствие дизайн-системе. И опять же – не комментирует, а правит сам. Двигает элементы, меняет отступы, выравнивает.
Когда макеты проходят через все три этапа, на выходе получается результат, который прошёл несколько уровней контроля. Вероятность грубой ошибки падает с каждым шагом. Это по сути тот же процесс, что и в большой продуктовой команде, только без найма и без двухнедельных итераций.
Кому это актуально?
Если у вас в команде вообще нет дизайнера, а такое бывает часто, особенно в стартапах вы только что получили возможность делать нормальный дизайн, а не вёрстку на коленке. Если дизайнер один и он загружен на три проекта: агенты снимут с него рутину.
Дизайнер начнёт заниматься тем, чем должен: думать над сложными взаимодействиями, а не двигать пиксели.
Time to market сокращается, потому что между "у нас есть гипотеза" и "у нас есть макет для теста" теперь проходят минуты, а не дни. Design-first подход в чистом виде.
И последнее
UX – это не творчество. UX – это механический навык. Когда мы говорим про проектирование удобных пользовательских интерфейсов, мы говорим про набор правил, паттернов и проверенных решений. Правильные размеры тач-зон, предсказуемая навигация, читаемая типографика, понятные состояния элементов. Это инженерная дисциплина, а не искусство. И именно поэтому я верю, что агенты будут справляться с этим хорошо.
Наступил новый этап, когда инструменты дозрели до того, чтобы эту механику автоматизировать.
Прикладываю скрин, что у меня получилось. Всего за 5 мин без компонентов.
Попробуйте сами. Если будут вопросы по настройке: пишите
