Figma MCP: теперь AI видит макеты так же, как я

Что такое MCP и почему это не очередной плагин

MCP расшифровывается как Model Context Protocol. Если совсем просто — это стандарт, который позволяет языковым моделям общаться с внешними инструментами. В данном случае Figma выступает таким инструментом.

Раньше, чтобы дать AI доступ к макету, нужно было либо выгружать его через REST API, либо делать скриншоты и описывать словами. Новый MCP-сервер работает иначе — он запускается локально и подключается напрямую к десктоп-клиенту Figma. В результате AI получает не просто картинку, а полную структуру: где автолейаут, где флекс, какие переменные используются, какой CSS сгенерирует Figma.

И всё это — через локальный URL, без облаков и задержек.

Как я это настроил

Оказалось, настройка занимает минуты три. В Figma открываешь настройки, находишь раздел MCP Server, включаешь чекбокс — и получаешь адрес: http://localhost:3845/sse.

Дальше идёшь в Cursor (моя основная IDE). Там нужно открыть файл ~/.cursor/mcp.json и добавить новый сервер с типом sse и этим адресом. Перезапускаешь MCP-сервер в настройках Cursor — и в списке инструментов появляются get_image, get_code, get_connection_map, get_variables_deps.

После этого AI может напрямую обращаться к открытому в Figma макету. Никаких API-ключей, никаких сложных интеграций.

Как теперь выглядит работа

Я выделяю во фрейме нужный блок — например, карточку товара. Нажимаю Cmd+L (или правой кнопкой мыши → Copy link to selection). Вставляю ссылку в промт к AI и пишу: «Сверстай этот компонент на React, с TypeScript, стили через styled-components».

AI через MCP получает изображение блока, CSS-код из Figma, информацию о переменных и структуру автолейаутов. Через 20-30 секунд у меня готовый компонент. С правильными отступами, цветами из переменных, с адаптивным поведением.

Впервые за долгое время я не проверял пиксели линейкой. Я просто скопировал код и вставил в проект.

Но есть нюансы: макет должен быть «готов к экспорту»

MCP-сервер сам по себе не делает дизайн хорошим. Он лишь берёт то, что есть. И если макет кривой, код будет кривым.

Быстро выяснилось, что AI гениально верстает только те макеты, которые:

• Построены на автолейаутах. Если дизайнер просто понатыкал слои мышкой, AI не поймёт, как элементы должны вести себя при ресайзе. Нужны нормальные фреймы с настроенными отступами и выравниванием.
• Используют переменные. Когда цвет задан через fill: #FF0000, AI честно продублирует этот хардкод. А если это переменная -color-primary, AI вынесет её в корневые стили или объект темы. Разница между «быстро» и «качественно» — в переменных.
• Продуманы на адаптивность. Фиксированная ширина блока — зло. Настроенный hug или fill — добро. И если в макете есть перенос элементов (wrap), AI это увидит и применит flex-wrap.

CSS Grid в Figma пока в бета-версии, но уже работает. Я попробовал — AI сгенерировал display: grid с правильными треками. Это впечатляет.

С какими проблемами я столкнулся

Первая и самая раздражающая — get_code иногда зависает. Приходится перезапускать Figma и Cursor. Надеюсь, пофиксят в ближайших версиях.

Вторая — AI упорно вставляет инлайновые SVG вместо импортов. Если в макете иконка, он копирует её как base64 прямо в JSX. Это лечится добавлением правила в .cursorrules: «Иконки сохраняй как отдельные компоненты, импортируй из папки assets». После этого стало нормально.

Третья — слишком сложные макеты. Я попросил сверстать целую страницу со множеством блоков. AI запутался в иерархии, намешал лишних дивов, сломал отступы. Теперь я дроблю задачу: один промт — один компонент. Работает идеально.

Что я поменял в процессе

Во-первых, добавил в проект .cursorrules с описанием MCP и требованиями к вёрстке. Чтобы AI не забывал, что мы используем Styled Components, а не CSS-модули, и что цвета должны браться из темы.

Во-вторых, поговорил с дизайнером. Показал, какие макеты AI верстает хорошо, а какие — плохо. Мы договорились о едином подходе: автолейауты везде, переменные для всех стилей, осмысленные имена слоёв. Это оказалось полезно не только для AI, но и для нас самих — дизайн-система стала чище.

В-третьих, перестал просить сверстать страницу целиком. Теперь я работаю компонентами: «карточка», «шапка», «кнопка». Собрать страницу из готовых блоков проще, чем заставить AI понять всю иерархию за один раз.

Итог: это меняет правила игры

Раньше я тратил на перенос одного экрана от 40 минут до часа. Сейчас — 5-10 минут на генерацию компонента и ещё 5 минут на доводку. Да, ручная работа остаётся: нужно проверить адаптивность, подправить отступы, убедиться, что всё работает на реальных данных. Но объём рутины сократился в разы.

Самое главное — я перестал быть «перекладывателем пикселей». Вместо того чтобы вглядываться в макет и высчитывать margin, я думаю об архитектуре, читаемости кода, производительности. AI берёт на себя черновую работу, а я делаю то, что действительно важно.

Конечно, это работает не для всех проектов. Если дизайн сырой, накиданный на коленке, AI только усугубит хаос. Но когда дизайн-система выстроена, а макеты аккуратны — Figma MCP превращает вёрстку из головной боли в быстрый и даже приятный процесс.

И да, я наконец перестал мерять пиксели линейкой. Пусть этим AI занимается.