Figma MCP: как подключить и получить код из макета

Figma MCP — сервер Figma, который отдаёт AI-агенту в Cursor, Claude Code или VS Code структуру макета вместо картинки: код компонента, переменные, метаданные слоёв и скриншот для сверки, а агент собирает интерфейс по этим данным, а не угадывает вёрстку по пикселям. Официальный каталог поддерживаемых клиентов вырос до 23 позиций, а сам сервер содержит 35 инструментов — далеко не «три», как до сих пор пишут старые русскоязычные разборы. Раньше сервис назывался Dev Mode MCP и работал только локально; сейчас у Figma два независимых сервера — удалённый и десктопный, — новый локальный адрес и переименованные инструменты чтения макета. Дальше — как подключить оба сервера, что умеет каждая группа инструментов и что обычно ломается при первой попытке перевести макет в код.

Что такое MCP-сервер Figma и как он работает

Аббревиатура MCP расшифровывается как Model Context Protocol — открытый способ передавать AI-агенту структурированный контекст задачи, а не только текст запроса. Сервер в Figma — реализация этого протокола: он отдаёт агенту не картинку макета, а его структуру — компоненты, переменные, метаданные слоёв, скриншот для визуальной сверки. Агент читает эти данные через инструменты сервера и на их основе пишет код, а не восстанавливает вёрстку по пикселям скриншота.

Из макета в срез попадает только то, что оформлено структурно — дизайн-токеном, а не значением по месту: отступ, заданный числом вместо переменной, агент получит и вернёт тем же числом.

До текущей версии функция называлась Dev Mode MCP и была доступна только локально, из десктоп-приложения. У нынешнего сервера — новое имя и переименованные инструменты: ключевой инструмент чтения макета get_code стал get_design_context, хотя часть русскоязычных статей ещё описывает его под старым именем. Дизайнеру самому код писать не нужно — агент в клиенте (Claude Code, Cursor, VS Code, Codex и другие) обращается к серверу сам; ваша часть работы — подключить сервер один раз и выделить нужный фрейм в макете.

Два сервера MCP-подключения к Figma: удалённый и десктопный

У Figma два независимых сервера с разными требованиями к тарифу и клиенту. Удалённый работает по адресу https://mcp.figma.com/mcp, доступен на всех тарифах и всех местах Figma и подключается через OAuth-вход в аккаунт — сама Figma рекомендует именно его, потому что набор возможностей у него шире. Десктопный требует установленного десктоп-приложения, работает только на платных Dev или Full seat и включается вручную в Dev Mode.

Разница напрямую влияет на выбор клиента: у удалённого сервера список совместимых программ ограничен каталогом Figma, у десктопного — нет. Если ваш клиент в каталог не входит, десктопный сервер на 127.0.0.1:3845 остаётся единственным рабочим путём подключиться к макету напрямую.

Практическое следствие для одиночной работы: если клиент есть в каталоге Figma, оба сервера читают макет одинаково детально, но удалённый проще в поддержке — не нужно держать открытым десктоп-приложение и переключать Dev Mode перед каждой сессией.

Как подключить удалённый MCP-сервер Figma

Подключение занимает одну команду или один блок конфигурации — адрес для всех клиентов один и тот же: https://mcp.figma.com/mcp. Дальше отличается только синтаксис: в Claude Code и Codex сервер добавляется CLI-командой, в VS Code — записью в mcp.json, в Cursor — deep link'ом или slash-командой. После подключения клиент запрашивает OAuth-вход в аккаунт Figma, и сервер становится доступен во всех проектах, где вы им пользуетесь.

• Claude Code: claude mcp add --transport http figma https://mcp.figma.com/mcp — по умолчанию сервер добавляется в текущий проект, для всех проектов сразу нужен флаг --scope user.
• Codex: codex mcp add figma --url https://mcp.figma.com/mcp
• VS Code — добавить в mcp.json: {"servers":{"figma":{"url":"https://mcp.figma.com/mcp","type":"http"}}}
• Cursor — установка по deep link из каталога Figma либо командой /add-plugin figma прямо в чате.

После первого подключения агент видит сервер как источник инструментов и запрашивает его сам, когда в диалоге появляется задача, связанная с макетом, — вызывать инструменты вручную не нужно. Флаг --scope user в команде Claude Code имеет значение, если вы переключаетесь между несколькими репозиториями: без него команду придётся повторять в каждом новом проекте отдельно.

Как включить десктопный MCP-сервер Figma

Десктопный сервер включается прямо в приложении Figma, без установки отдельного пакета: Dev Mode (сочетание Shift+D) → секция MCP server → Enable desktop MCP server. Условие — платное место Dev или Full seat; на бесплатном месте кнопка недоступна. После включения сервер слушает локальный адрес http://127.0.0.1:3845/mcp — это не /sse, как указано в более ранних гайдах про прежнюю версию сервиса: эндпоинт сменился вместе с переименованием.

Десктопный сервер нужен в одном случае: если ваш MCP-клиент не входит в каталог Figma. Подробный процесс шагов описан в справке Figma — здесь только конспект, которого достаточно для первого запуска.

Какие данные читает MCP-сервер Figma

7 инструментов чтения дают агенту всё, что нужно для перевода макета в код: код компонента, скелет раскладки, скриншот, ссылки на файлы, переменные, анимацию и диаграммы. Из макета в срез попадает только то, что выражено структурно — непроставленная переменная в ответе сервера просто не появится.

• get_design_context — контекст слоя или выделения: то же самое, что раньше называлось get_code.
• get_metadata — разрежённый XML-скелет выделения: id, имена, типы, позиции и размеры слоёв без деталей стиля.
• get_screenshot — скриншот выделения для визуальной сверки результата с оригиналом.
• download_assets — временные ссылки на файлы.
• get_variable_defs — переменные и стили, которые реально проставлены в выделении, а не все переменные файла.
• get_motion_context — данные кейфреймов анимации.
• get_figjam — метаданные диаграмм FigJam.

Figma советует не выделять тяжёлый фрейм целиком, а работать отдельным кадром — так агент получает управляемый по объёму срез данных вместо всего экрана со всеми состояниями сразу.

Что ещё умеет MCP-сервер Figma: запись, генерация, аккаунт

Кроме чтения макета, сервер пишет обратно на холст: пять инструментов создают и правят содержимое, ещё один — whoami — отдаёт данные вашего аккаунта: почту, тарифы и тип места. По нашему подсчёту полного официального списка — 35 инструментов, а не «три», как всё ещё пишут русскоязычные разборы прошлой версии сервиса.

Полный состав по группам: 7 инструментов чтения макета, 5 — запись на холст, 7 — дизайн-системы и Code Connect, 9 — генеративные плагины и шейдеры, 6 — Weave и 1 — аккаунт (whoami). Сумма — 35. Отдельно от них идёт create_design_system_rules — это не инструмент, а промпт: он выдаёт агенту контекст для перевода макета в код.

Запись ведут use_figma, generate_figma_design, create_new_file, upload_assets и generate_diagram — от точечной правки существующего узла до генерации нового файла и диаграммы по описанию. Отдельная группа из 9 инструментов управляет генеративными плагинами и шейдерами, ещё 6 — набор Weave (weave_run_tool, weave_upload_asset и другие). Для дизайнера, который переводит готовый макет в код, ключевые группы — чтение (выше) и дизайн-системы с Code Connect (ниже); генеративные и Weave-инструменты решают другую задачу — создание нового контента внутри Figma, а не выгрузку существующего в код.

Дизайн-системы и Code Connect в MCP-сервере Figma

7 инструментов сервера отвечают за связь макета с реальной дизайн-системой в коде: от поиска библиотеки до отправки готовой карты соответствий. Ключевой — get_code_connect_map, он связывает узлы макета с реальными компонентами вашей кодовой базы, а не создаёт для агента новый компонент с нуля.

• get_libraries — доступные библиотеки дизайн-системы.
• search_design_system — поиск компонента или стиля по дизайн-системе.
• get_code_connect_map / add_code_connect_map — чтение и запись карты соответствий узлов и компонентов кода.
• get_code_connect_suggestions и get_context_for_code_connect — подсказки для настройки связки.
• send_code_connect_mappings — отправка готовых карт соответствий.

Рядом стоит отдельный промпт-инструмент create_design_system_rules: он заранее задаёт агенту контекст дизайн-системы перед переводом макета в код — агент читает этот контекст до генерации.

Здесь проходит главная граница качества результата. Без Code Connect агент видит только то, что есть в самом файле макета — переменные и стили, но не реальный компонент кодовой базы. С настроенной картой соответствий он подставляет в код существующий компонент вместо нового, написанного с нуля. То же правило действует на уровне отдельного значения: get_variable_defs вернёт только переменные, реально проставленные в выделении, — если отступ задан числом, а не токеном, в ответе сервера будет то же число.

Лимиты MCP-сервера Figma, которые нужно знать заранее

Ответ любого инструмента ограничен 20 килобайтами за один вызов — большое выделение агент получает частями, а не одним запросом. Экспорт ассетов ограничен отдельно: download_assets отдаёт не больше 20 узлов за вызов и рендерит примерно до 4096 px по длинной стороне, upload_assets принимает файлы не крупнее 10 МБ.

Есть и лимит по правам, не по объёму: запись вне собственных черновиков требует Full seat, Dev seat пишет только в своих черновиках, а вне них у Dev seat доступно исключительно чтение. Запись на холст сейчас бесплатна на время беты — по заявленным планам Figma, дальше оплата будет привязана к фактическому использованию.

Какой MCP-клиент выбрать: каталог Figma и путь для остальных

Каталог официальных клиентов на 5 сентября 2026 года — 23 позиции, среди них Claude, Claude Code, ChatGPT, Codex, Cursor, VS Code, GitHub Copilot CLI и Android Studio. Это на 6 больше, чем в августе 2026 года, когда каталог насчитывал 17 клиентов.

Полный список на 5 сентября: Claude, Claude Code, ChatGPT, Codex by OpenAI, Cursor, Xcode (beta), VS Code, Kiro, Grok, Google Antigravity, GitHub Copilot CLI, Notion, Slack, Devin, Replit, Warp, Factory, Augment, Rovo Studio, Android Studio, Amazon Q, OpenHands, ServiceNow Build Agent. Zed указан отдельно — только для локального сервера и только на чтение. OpenCode, Cline, Windsurf и Trae в каталоге не значатся вовсе.

По типу клиентов список смешанный: чат-интерфейсы (Claude, ChatGPT, Grok), редакторы и IDE (Cursor, VS Code, Xcode, Android Studio), CLI и терминальные агенты (Claude Code, Codex, GitHub Copilot CLI, Warp, Factory), корпоративные инструменты (Notion, Slack, ServiceNow Build Agent, Amazon Q).

Отсутствие в каталоге не значит отсутствие доступа. Каталог ограничивает только удалённый сервер — десктопный на 127.0.0.1:3845 принимает подключение от любого клиента, поддерживающего MCP. Для OpenCode и любого другого клиента вне списка это и есть рабочий путь к макету: включить Dev Mode, поднять десктопный сервер, подключить клиент к локальному адресу вручную.

Что обычно ломается при первом подключении к MCP-серверу Figma

Большинство сбоев на старте связаны не с самим сервером, а с состоянием макета или устаревшей инструкцией. Гайды, написанные во время Dev Mode MCP, до сих пор указывают локальный адрес /sse и инструмент get_code — оба уже не актуальны. Ниже — 5 сбоев, которые ловятся быстрее всего, если знать точную причину, а не перебирать настройки клиента наугад.

• Клиент подключается к /sse вместо /mcp — старый эндпоинт из инструкций про Dev Mode MCP, сервер по нему не отвечает.
• Агент вызывает get_code, которого больше нет, — инструмент переименован в get_design_context.
• Десктопный сервер не включается — место в файле не Dev и не Full seat, кнопка Enable недоступна.
• Агент возвращает хардкод вместо переменных — в макете отступы и цвета не оформлены токенами, get_variable_defs их просто не видит.
• Выделен весь экран целиком — Figma рекомендует работать одним кадром, иначе объём среза растёт, а качество ответа падает.

Первые два сбоя решаются одинаково — обновить инструкцию под текущее имя сервиса и текущие названия инструментов; остальные три связаны не с текстом гайда, а с тарифом, структурой макета и объёмом выделения.

Как попробовать связку макет → код бесплатно

Проверить, как макет из Figma превращается в код, можно без готового проекта и без оплаты — бесплатная ступень AI-спринта собрана вокруг именно этой связки: агент читает готовый макет и сам пишет код интерфейса. В спринте макет проходит тот же путь, что описан выше: агент подключается к файлу, читает структуру и переменные, а на выходе получается работающий в браузере интерфейс.

Эта статья отвечает на вопрос «как подключить и что именно умеет сервер» — команды, полный состав инструментов, лимиты и разбор сбоев. Если нужен более широкий контекст вокруг связки — что такое вайбкодинг, какими инструментами его делают и что показывают исследования по качеству такого кода, — это отдельный разбор: вайбкодинг что это. Системно дизайн-токены, Code Connect и агентные сценарии на стыке дизайна и кода разбираются на курсе AI Native Designer.