Figma MCP и Claude Code: как проверить макет перед разработкой
Подключи Figma к Claude Code и получи вопросы к макету: состояния формы, ошибки, ограничения и критерии приёмки без написания кода.
Макет формы выглядит готовым, но разработчик спрашивает: что показывать при повторном приглашении, неверном адресе и отсутствии прав? Figma MCP помогает передать Claude Code контекст конкретного экрана, чтобы заранее собрать такие вопросы. В этом упражнении результатом будет таблица замечаний, а не код приложения.
1. Выбери один экран и задачу
Возьми учебный макет «Пригласить участника»: поле email, выбор роли и кнопка отправки. Если своего макета нет, создай в Figma простой фрейм с этими элементами. Подпиши его понятно и скопируй ссылку именно на выбранный фрейм через Copy link to selection. Не отправляй ссылку на весь большой проект, если проверяешь одну форму.
Запиши три условия продукта: приглашать может только администратор; доступные роли — участник и наблюдатель; повторное приглашение не должно создавать второго пользователя. Это учебные правила, их нужно передать отдельно: картинка сама по себе не доказывает бизнес-логику.
Нужны установленный Claude Code, доступ к выбранному файлу Figma и разрешённое подключение интеграции в твоей организации. Если Claude Code ещё не работает, начни с установки.
2. Подключи официальный Figma MCP
Figma рекомендует плагин, который включает настройки сервера и навыки работы с ним. Выполни в терминале:
claude plugin install figma@claude-plugins-officialПерезапусти Claude Code, открой /plugin, найди установленную Figma и пройди вход в браузере. Проверь аккаунт и запрашиваемый доступ перед подтверждением. Если плагины ограничены организацией, согласуй подключение с администратором.
В качестве отдельного варианта официальная документация предлагает ручное подключение:
claude mcp add --transport http figma https://mcp.figma.com/mcpПосле него открой новую сессию, введи /mcp, выбери Figma и Authenticate. Используй один способ подключения; не добавляй второй сервер поверх уже работающего. Ручной вариант сам по себе не устанавливает навыки плагина.
3. Передай ссылку и критерии разбора
Вставь в сообщение ссылку на свой фрейм, затем этот запрос:
Прочитай указанный фрейм через Figma MCP.
Задача — проверить готовность формы приглашения, ничего не менять.
Правила учебного продукта:
— приглашает только администратор;
— роли: участник и наблюдатель;
— повторный email не создаёт второго пользователя.
Сначала опиши, что действительно видно в макете.
Затем составь таблицу: элемент, наблюдение, вопрос, критерий приёмки.
Проверь пустое поле, неверный email, загрузку, успех, ошибку сервера,
повторное приглашение и отсутствие прав.
Отделяй отсутствующее на этом экране от отсутствующего во всём продукте.
Не генерируй код и не редактируй Figma.
Если файл не удалось прочитать, сообщи это прямо.В истории должны быть вызовы инструментов Figma. Документация инструментов описывает получение контекста дизайна и скриншотов. Если помощник видит лишь часть фрейма или получает ошибку доступа, его выводы нельзя считать полным ревью.
4. Проверь замечания на макете
Хорошее замечание звучит так: «На переданном фрейме не показано состояние отправки. Нужно решить, блокируется ли кнопка до ответа сервера». Плохое: «В продукте нет защиты от повторной отправки». Второе утверждение нельзя вывести из одной картинки.
| Случай | Пример критерия приёмки |
|---|---|
| Пустой email | Отправки нет, рядом с полем понятное пояснение |
| Запрос выполняется | Пользователь видит ожидание, повторный клик контролируется |
| Повторный адрес | Согласовано, что делать с существующим приглашением |
| Нет прав | Действие недоступно и причина понятна |
Это предложенные критерии учебного продукта. Согласуй их с дизайнером и разработчиком, не выдавая предложения помощника за уже утверждённые требования. Для каждого пункта укажи фрейм или правило, на котором он основан.
5. Сохрани короткую задачу для команды
Попроси оставить только подтверждённые пробелы, открытые вопросы и согласованные критерии. Отдельно запиши, какие состояния ещё не передавались на проверку. Так таблица становится основой обсуждения, а не длинным списком всех возможных ошибок интерфейса.
Моя рекомендация: сначала проверяй один пользовательский переход. Для формы приглашения важнее понять путь от ввода email до результата, чем получить общий рейтинг дизайна.
Если нужно сопоставить макет с описанием функции, продолжи проверкой продуктового брифа. MCP передаёт контекст, но решение о поведении продукта остаётся отдельной работой.
Проверка материала: официальная документация сверена 18 октября 2026 года. Примеры учебные; подключения к аккаунтам, API-запросы и отправка ответов покупателям в рамках подготовки статьи не выполнялись.
Освоить такие сценарии можно на курсе AI Product Club.
Собери своего ИИ-агента и проверь результат
«AI Agents: от vibe coding к AI-команде»: desktop agents, MCP, skills, evals и harness. Отдельные воркшопы — от подключения инструментов до контроля качества.
7 практических воркшопов · записи · вопросы автору в чате
Посмотреть программу курса ↗