Figma MCP передаёт агенту компоненты, переменные и структуру макета, а код в вашем проекте пишет сам агент. Поэтому мало увидеть «подключено»: дайте ссылку на нужный фрейм, затем проверьте компоненты, цвета, шрифты и отступы.
Страница похожа на макет. Но использовал ли агент вашу кнопку, сохранил ли палитру? Чтобы это проверить, нужны импорты компонентов, переменные в коде и снимок готовой страницы рядом с макетом.
На демонстрации Claude Design я вернулся к CRM-интерфейсу, который он перерисовал по скриншоту. По дизайну справился достаточно неплохо: хорошо всё перенёс, хорошо всё сохранил. Здесь разберём другой путь: официальный Figma MCP в Claude Code.
Что Figma MCP передаёт агенту и кто меняет проект
По факту это компоненты, описание компонентов, описание цветов, ваши элементы, картинки. Через MCP агент получает эти данные из Figma, а затем пишет код страницы в вашем проекте.
У сервера Figma есть и отдельные инструменты для записи элементов на холст. Здесь будем читать макет, а код менять в репозитории проекта.
| Вариант / кто делает | Что нужно | Как указать фрейм | Где сверить операции |
|---|---|---|---|
| Remote / Figma | Аккаунт и вход; https://mcp.figma.com/mcp. Без Desktop | Ссылка на узел | Remote |
| Desktop / Figma | Приложение, подходящие план и место; http://127.0.0.1:3845/mcp | Выделение или ссылка | Local; без записи на холст и отправки интерфейса |
| Figma Console MCP / southleft | Свои режимы и Desktop Bridge | По README | southleft |
Figma Console MCP от southleft - другой продукт. Не смешивайте его настройки и инструменты с сервером Figma. Дальше подключаем в Claude Code remote-сервер Figma: компания рекомендует этот способ.
Вопросы по работе с ИИ-агентами - в канале:
Как подключить Figma MCP и войти в свой аккаунт
Проверьте, что файл открывается в вашем аккаунте. Квоты зависят от плана и seat - типа места пользователя в Figma, например View или Full.
Начните с плагина Figma: в нём уже есть настройки сервера и навыки для работы с Figma.
- Выполните в терминале:
claude plugin install figma@claude-plugins-official- Перезапустите Claude Code.
- Откройте
/plugin→ Installed → figma и начните вход. - В браузере войдите в свой аккаунт Figma, нажмите Allow access.
- Вернитесь в
/plugin, проверьте статус connected.
Теперь передайте ссылку на нужный узел и проверьте, что прочитал агент. Только после этого начинайте реализацию.
Ручная альтернатива
Вместо установки плагина можно добавить сервер из папки проекта:
claude mcp add --transport http figma https://mcp.figma.com/mcpНачните новую сессию: /mcp → figma → Authenticate → Allow access в браузере. После входа должно появиться сообщение Authentication successful. Connected to figma. Затем ещё раз проверьте подключение через /mcp.
По умолчанию подключение действует для текущего проекта. Для всех проектов:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcpРучное добавление не устанавливает навыки плагина. Если организация запретила установку плагина, согласуйте способ подключения с администратором.
Cursor и desktop
В Cursor: /add-plugin figma в чате → Add Plugin → Cursor Settings → Tools & MCP → Connect рядом с Figma → Allow access.
Desktop выбирайте для работы с текущим выделением без ссылки. Нужен Dev или Full seat на Professional, Education, Organization, Government или Enterprise.
В актуальном приложении Figma Desktop откройте файл Figma Design, снимите выделение, включите Dev Mode через Shift D. Справа: MCP server → Enable desktop MCP server. Затем:
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcpПерезапустите Claude Code, проверьте /mcp. Это подключение к локальному серверу в приложении, а не к remote.
Квоты и оплата
Условия на 09.11.2026:
| Место | План | Квота чтения |
|---|---|---|
| View / Collab | По условиям доступа Figma | До 20 вызовов в месяц |
| Full / Dev | Professional | До 200 в день и 10 в минуту |
| Full / Dev | Organization | До 200 в день и 15 в минуту |
| Full / Dev | Enterprise | До 600 в день и 20 в минуту |
| Full / Dev | Education | Пределы Professional |
Поминутный предел действует вместе с дневным или месячным. Квоты могут меняться - сверяйте условия Figma.
Это квоты чтения. У generate_image и send_prompt расходуются Figma AI credits. Запись на холст требует remote, а вне drafts - черновиков - нужен Full seat. В период beta запись бесплатна; условия остальных операций проверяйте отдельно.
Общая схема подключения MCP в Claude Code и выбора прав - в отдельной статье.
Подготовьте компоненты и палитру: агент не должен их угадывать
До генерации задайте правила дизайна: цвета, шрифты, отступы, запреты.
- Кнопки, карточки и поля оформите компонентами.
- Цвета, интервалы, радиусы и типографику задайте переменными.
- Дайте слоям понятные имена.
- Примените Auto Layout, измените размер фрейма и проверьте, как перестраиваются элементы.
- Поведение, которого не видно на изображении, опишите в аннотациях к макету.
Code Connect связывает компонент Figma с компонентом кода. Для desktop используются связи, выбранные в Dev Mode; для remote задайте агенту clientFrameworks с меткой Code Connect вашего проекта, например React или SwiftUI.
Попросите агента посмотреть, какие компоненты уже есть в проекте, какие там шрифты, цвета и отступы. Согласуйте, каким компонентам и переменным проекта соответствуют элементы макета. Переменная дизайна, или токен, - именованное значение, например цвета или отступа.
Если связей Code Connect нет, укажите соответствия явно. Если нужного компонента в проекте нет, решите до реализации, что с ним делать. Так вы сохраняете правила дизайн-системы: 1 раз сделали, а потом поддерживаете.
Как передать именно нужный фрейм
В remote недостаточно выделить фрейм в приложении - нужна ссылка на него:
- Выберите фрейм или слой в Figma.
- Нажмите правой кнопкой → Copy link to selection.
- Вставьте ссылку в запрос Claude Code.
Клиент извлекает из ссылки идентификатор узла. Он не открывает её как обычную веб-страницу.
Шаблон запроса на чтение. Замените поля в квадратных скобках:
Прочитай через официальный Figma MCP узел [ссылка на фрейм]. Место результата: [реальный путь или маршрут проекта]. Компоненты: [найденные пути и соответствия]. Переменные: [имена в Figma и соответствия в проекте]. Покажи имя, идентификатор, размеры и состав узла, его снимок, имена и значения переменных. Сопоставь с компонентами и правилами проекта. Если чего-то нет, задай вопрос. Не теряй требования, у каждого должно быть место в плане или открытый вопрос. Реализацию ещё не начинай.
Для этого агенту нужны инструменты:
get_design_context- контекст выбранного узла.get_variable_defs- использованные переменные и стили, имена и значения.get_screenshot- изображение узла.get_metadata- облегчённая структура с идентификаторами, именами, типами, позициями и размерами слоёв.
Сверьте имя, размеры, состав и снимок с выбранным фреймом. Если ответ слишком велик или усечён, запросите get_metadata, выберите дочерние узлы и читайте их контекст отдельно. Общие требования к странице сохраняйте.
Реализуйте макет в существующем проекте
После проверки узла можно менять код:
- Подтвердите, где в проекте должна появиться страница и какие компоненты и переменные использовать. Оставшиеся вопросы разберите до изменений.
- Попросите агента использовать инструменты и правила проекта. Ответ
get_design_contextпо умолчанию представлен через React и Tailwind, но переписывать под них проект не требуется. - Используйте изображения и SVG из Figma. Если сервер вернул источник на localhost, используйте его. Не подменяйте изображения заглушками и не добавляйте новый набор иконок вместо элементов макета.
- Получите отчёт: изменённые файлы, импорты компонентов, соответствия переменных, способ открыть страницу, выполненные требования и оставшиеся вопросы.
Продолжение предыдущего запроса:
Теперь реализуй согласованный фрейм в указанном месте проекта. Соблюдай правила проекта; используй согласованные компоненты и переменные, сохрани изображения и SVG. Покажи изменённые файлы, импорты и соответствия переменных; открой страницу для сравнения с макетом. Не объявляй готовым, пока не сверим с макетом.
Команду запуска и адрес страницы берите из проекта.
Работайте, пока не будет выглядеть так же: как принять результат
Проверьте страницу по требованиям, которые согласовали до реализации. Компоненты и переменные смотрите в коде, внешний вид - в браузере рядом с макетом.
Заполните протокол после проверки:
| Что проверяем | Ожидалось из макета / проекта | Получено | Доказательство | Исправление и повторная сверка |
|---|---|---|---|---|
| Компоненты | Согласованный компонент и свойства | Заполнить после проверки | Заполнить после проверки: импорт и использование в изменённом файле | Заполнить после проверки |
| Палитра | Имя и значение переменной Figma, соответствие в проекте | Заполнить после проверки | Заполнить после проверки: применение переменной в коде | Заполнить после проверки |
| Вид страницы | Размеры, отступы, типографика, изображения и поведение | Заполнить после проверки | Заполнить после проверки: снимки Figma и страницы, проверка изменения размера | Заполнить после проверки |
Похожий цвет не подтверждает использование переменной. Если у значения из Figma нет соответствующей переменной в проекте, согласуйте её с агентом. У кнопки проверьте импорт, использование в коде и свойства.
Кстати, я снял ролик «Приёмы Claude Code: голос, субагенты, рутины, скиллы и MCP», обязательно посмотрите.
В нём показал, как скопировать снимок экрана в буфер, работать с планами и MCP в Claude Code. Эти приёмы пригодятся, когда будете передавать агенту снимки страницы и планировать правки.
Claude должен видеть, как выглядит страница, как она работает, какие отступы и шрифты.
Откройте фрейм и страницу в браузере в сопоставимом размере. Укажите, какой узел сравниваете и при какой ширине. Запишите конкретное расхождение, отдельно посмотрите шрифты и изображения.
Передайте агенту оба изображения и задачу на правку. Затем получите повторный снимок в том же размере. Проверьте, исправлено ли расхождение и используются ли по-прежнему нужные компоненты и переменные. После этого измените размер страницы и проверьте, ведёт ли она себя так, как договорились.
О проверке своего сайта через Playwright MCP - отдельная статья. Для переноса через Figma MCP он не обязателен.
Шаблон запроса на правку:
Сравни [снимок узла] и [снимок страницы] при [фактический размер]. Расхождение: [что видно]. Исправь его, сохрани согласованные компоненты, переменные, изображения и SVG. Покажи повторный снимок в том же размере и проверь результат.
Принимайте страницу, когда по каждой строке протокола есть доказательства, а оставшиеся отличия согласованы с вами. Одного сообщения агента об исправлении недостаточно.
Если вы собираете свои проекты с ИИ-агентами, посмотрите программу практикума СмыслоКода.
Не работает? Сначала проверьте, где оборвался перенос
Найдите свой случай в таблице:
| Симптом | Что проверить | Следующий шаг |
|---|---|---|
| Нет подключения или инструментов | Remote: вход и перезапуск, /plugin либо /mcp. Desktop: включён ли сервер; /mcp, claude mcp list, claude mcp get figma-desktop | Завершите подключение, повторите чтение узла |
| Нет доступа к файлу | Тип и правильность ссылки; whoami: аккаунт, план, место; доступ аккаунта к плану владельца файла | Получите разрешение для своего аккаунта или используйте собственный доступный файл. Повторите запрос |
| Прочитан другой фрейм | Copy link to selection; идентификатор, состав и размеры узла через get_metadata, снимок через get_screenshot | Скопируйте ссылку нужного узла, прочитайте его до реализации |
| Ответ усечён или слишком велик | Структура слоёв через get_metadata | Читайте дочерние узлы отдельно, сохраняя правила проекта |
| Страница похожа, но компоненты и переменные проекта не используются | Импорты, использование компонентов, Code Connect, соответствия переменных, инструменты проекта | Исправьте соответствия и конкретные файлы, повторите приёмку |
Более широкий разбор проверки кода от ИИ - в отдельной статье.
При исчерпанной квоте дождитесь восстановления лимита или выберите подходящий официальный план.
«Подключено», «узел прочитан», «код изменён», «результат принят» - разные состояния. При сбое возвращайтесь к последнему подтверждённому: если узел прочитан верно, ищите ошибку в реализации, а не начинайте подключение заново.
Вопросы и ответы
Частые вопросы
На чём у вас останавливается перенос из Figma: агент берёт другой фрейм, теряет компоненты или не попадает в отступы? Напишите в комментариях в канале.
Источники
- Figma: MCP server - контекст дизайна и запись на холст.
- Figma: Remote - подключение, вход, узел.
- Figma: Local - desktop и диагностика.
- Figma: Permissions - права и квоты.
- Figma: Tools - контекст, переменные, Code Connect.
- Figma: File structure - подготовка макета.
- Figma: Guide - реализация и сверка.
- southleft: Console MCP - отдельный сервер.
Новые материалы - дайджестом, без спама
Гайды выходят регулярно. Подпишись, чтобы не пропускать: пришлю подборку в Telegram или на email. Раз в неделю или каждый день - выбираешь сам.
