ГайдыОбновлено · 09.2026

Как интегрировать Claude Code в Figma и чем это может помочь дизайнерам и разработчикам

8 апреля 2026 · 16 минут чтения

Проверка фактов

Юлия Найпак

Методист по автоматизации. Сверяет паспорт инструмента с документацией вендора.

Автор П

Павел Панфёров

Предприниматель, сооснователь студии разработки мобильных приложений EndCode и AI-лаборатории оптимизации бизнеса AI…

Черновик готовит редакция с помощью ИИ. За стандарт издания отвечает главный редактор — Валерий Курземнек.

Claude Code соединяется с Figma через MCP-сервер Figma: агент читает макет и пишет результат обратно на холст. Вот как отправить агенту нужный экран: в Фигме нажмите правой кнопкой по фрейму, выберите «Copy link to selection» и вставьте ссылку в чат Claude Code. Из URL сервер достаёт идентификатор узла — поэтому ссылка на выделение задаёт агенту один экран, а ссылка на файл целиком отдаёт весь документ.

Коротко о главном:

• Интеграция Claude Code и Figma позволяет превращать работающий интерфейс из кода в редактируемые макеты на холсте.
• Через Figma MCP Server дизайн становится частью AI-разработки: LLM получает контекст из макета, переменных и компонентов.
• Серверов два. Справка Figma: «The remote server is available on all seats and plans», «The desktop server is available on a Dev or Full seat for all paid plans».
• Можно захватывать экраны из браузера (production, staging, localhost) и вставлять их в Figma как полноценные фреймы.
• Поддерживается обратный цикл: из Figma — обратно в код, по ссылке на фрейм.
• Наш прогон 15.09.2026: запрос к https://mcp.figma.com/mcp без токена возвращает 401 Unauthorized, поэтому шаг авторизации в браузере пропустить нельзя.

Если раньше код и дизайн жили параллельными вселенными, то теперь между ними появился мост. Ниже — как он устроен, что нужно для подключения и где он спотыкается.

Почему вообще нужно соединять код и Figma

Представьте ситуацию. Разработчик собрал рабочий прототип через Claude Code. Всё кликается, данные подтягиваются, логика живая.

Дизайнеру отправляют ссылку или видео. Дальше начинается привычное: «А можешь поменять отступ?» «А если кнопка будет вот тут?» «А давай попробуем другую структуру экрана?»

Каждая такая просьба — это возвращение в код. Перезапуск сервера. Новый билд. Потеря темпа.

Код отлично подходит для сужения: вы приходите к конкретному рабочему состоянию. Холст в Figma идеален для расширения: сравнить варианты, увидеть весь пользовательский путь, обсуждать альтернативы.

Интеграция Claude Code и Figma позволяет переключаться между этими режимами без потери контекста.

Что изменилось в 2026 году

MCP (Model Context Protocol) — стандарт передачи контекста для LLM. Раньше нейросеть видела скриншот, кусок кода или ответ API. Теперь она получает структурированную информацию о дизайне.

Справка Figma описывает возможности сервера так: «It can read design context such as components, variables, layout data, FigJam content, and Make resources, generate code from selected frames, use Code Connect to stay aligned with real components». И отдельно про обратное направление: «you can also write directly to the canvas to create or update native Figma content, and send live web interfaces to Figma as editable layers».

Второе важное изменение — деньги. В гайде по MCP-серверу Figma предупреждает: «This will eventually be a usage-based paid feature, but is currently available for free during the beta period». То есть запись на холст сейчас бесплатна, но это состояние временное, и планировать процесс на команду стоит с оглядкой на будущий тариф.

Что нужно проверить до подключения

Требования у двух серверов разные, и распространённое «нужен Dev или Full seat» относится только к одному из них. Формулировки справки:

• «The remote server is available on all seats and plans» — удалённый сервер доступен на всех местах и планах;
• «The desktop server is available on a Dev or Full seat for all paid plans» — локальный сервер требует места Dev или Full на платном плане;
• «You must use a code editor or application that supports MCP servers (i.e. VS Code, Cursor, Windsurf, Claude Code, Codex)».

Claude Code в таблице поддерживаемых клиентов отмечен по всем четырём колонкам: desktop-сервер, remote-сервер, запись на холст и поддержка плагина со скилами. Для лимитов справка отправляет в отдельный раздел: «For information about usage and rate limits, see Plans, access, and permissions in the Figma developer documentation» — конкретных чисел на самой странице гайда нет.

Ещё одна деталь, которую мы увидели в ответе сервера 15.09.2026: в заголовке access-control-expose-headers он объявляет X-Figma-Plan-Tier, X-Figma-Rate-Limit-Type и X-Figma-Upgrade-Link. Имена говорят сами за себя: у интеграции есть тариф и есть тип лимита, и упереться в них можно раньше, чем в качество промпта.

Как подключить Claude Code к Figma

Figma даёт две версии MCP-сервера и прямо называет предпочтительную: «The remote Figma MCP server is the version most users need and has the broadest set of features. The desktop version is for specific organization and enterprise use cases».

Удалённый сервер: один плагин

Рекомендованный путь по инструкции Figma для Claude Code — поставить официальный плагин, который приносит и настройки сервера, и готовые скилы:

1. В терминале выполнить claude plugin install figma@claude-plugins-official.
2. Нажать Enter и дождаться установки.
3. Перезапустить Claude Code, если он был запущен.
4. Ввести /plugin — откроется маркетплейс плагинов.
5. Перейти на вкладку Installed, найти сервер figma, нажать Enter и начать авторизацию.
6. В открывшейся странице браузера нажать Allow access.
7. Вернуться в терминал, снова ввести /plugin и убедиться, что сервер figma отмечен как connected.

Справка предупреждает и о типичном отказе: «If the plugin install command fails, it’s likely because your organization has blocked plugin installation, either for all plugins or the Figma plugin specifically».

Локальный сервер: Dev Mode и порт 3845

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

Дальше одна команда в терминале:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

После перезапуска Claude Code сервер виден по команде /mcp.

Состояние connected — единственный честный признак того, что связка жива. Наш прогон 15.09.2026 это подтверждает: POST-запрос к https://mcp.figma.com/mcp без токена отвечает 401 Unauthorized и возвращает заголовок www-authenticate: Bearer resource_metadata="https://mcp.figma.com/.well-known/oauth-protected-resource", scope="mcp:connect". Если агент жалуется на доступ к макету, проблема почти всегда в шаге авторизации: плагин тут ни при чём.

Remote или desktop: чем серверы отличаются

Выбор сервера определяет половину сценариев. Всё в таблице взято из справки Figma дословно, формулировки оставлены на языке оригинала.

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

Как передать ссылку на файл или фрейм в Figma

Для удалённого сервера ссылка — единственный способ показать агенту нужный кусок макета. Справка описывает процедуру дословно: «Getting design context and code from files is link-based».

1. «In Figma Design, select the layer you want to get design context for» — выделите слой, по которому нужен контекст.
2. «Right-click a frame or layer in Figma and select Copy link to selection» — правый клик по фрейму или слою, пункт Copy link to selection.
3. «In your MCP client, paste the URL and prompt your client to help you implement the design» — вставьте URL в чат Claude Code и опишите задачу.

Дальше происходит то, о чём редко пишут: «Your client won’t be able to navigate directly to the selected URL, but it will extract the node ID that is required for the MCP server to identify which object to return information about». Агент не открывает страницу по ссылке. Он достаёт из неё идентификатор узла — и по нему сервер отдаёт данные.

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

Какие инструменты MCP-сервер даёт агенту

Набор инструментов шире, чем тройка code / image / variables, которой интеграцию описывали на старте. Документация Figma для разработчиков перечисляет их поимённо и делит на чтение и запись. Вот те, что закрывают основные сценарии:

• get_design_context — «Design context for a layer or selection». Точка входа для направления «дизайн в код».
• get_metadata — «Sparse XML representation of your selection containing just basic properties such as the layer IDs, names, types, position and sizes». Нужен, когда макет слишком большой для полного контекста.
• get_screenshot — «Screenshot of a selection», снимок выделения для общего контекста.
• get_variable_defs — «Variables and styles used in a selection», переменные и стили выделения.
• get_figjam — «Converts FigJam diagrams to XML», доски FigJam в машиночитаемом виде.
• generate_figma_design — «Generates design layers from interfaces», направление «код в дизайн».
• use_figma — «The general-purpose tool for writing to Figma files», универсальная запись в файлы Figma.
• create_new_file — «Creates a new blank Figma Design, FigJam, or Figma Slides file in your drafts folder», новый пустой файл в черновиках.
• generate_diagram — «Generates a FigJam diagram from Mermaid», диаграмма FigJam из описания на Mermaid.
• upload_assets — «Uploads assets (PNG, JPG, GIF, and WebP) into a Figma file. Max 10MB per asset», загрузка картинок в файл, до 10 МБ на файл.

Про формат кода документация говорит прямо: «By default, the output is React + Tailwind, but you can customize it through your prompt». Формат задаётся фразой в запросе — «generate my Figma selection in Vue», «generate my Figma selection in plain HTML + CSS», «generate my Figma selection in iOS».

Обратный цикл: из Figma в код

Сценарий выглядит так: вы в редакторе пишете запрос и прикладываете ссылку на конкретный фрейм Figma. Агент вызывает get_design_context, получает структуру компонентов, переменные и стили, при необходимости добирает скриншот выделения — и генерирует код, который соответствует макету.

Качество этого кода сильно зависит от Code Connect. Документация советует: «Set up Code Connect for best code reuse results. Code Connect lets you set up multiple connections per Figma library: you can map both your React and SwiftUI code to the same Figma components». Без такой карты модель будет каждый раз собирать новый Button из воздуха. С картой она получает ссылку на существующий компонент кодовой базы.

Как работает перенос из Claude Code в Figma

Обратное направление Figma называет «Generate designs from the live UI of your web apps and sites» и описывает так: «Turn live UI from your browser (production, staging, or localhost) into editable design layers in Figma. Send pages, elements, or whole flows to Figma Design for exploration, alignment, and refinement».

Порядок действий по справке:

1. Попросить агента: «Start a local server for my app and capture the UI in a new Figma file».
2. «Follow the steps your client provides. Your client will open a browser window for you, or give you a link to follow» — клиент откроет окно браузера или даст ссылку.
3. «Use the capture toolbar to capture pages, elements, and states of your web app or site» — панель захвата снимает страницы, элементы и состояния.
4. «Let your client know when you’re finished. Your client will give you a link to open the Figma file that was created» — по завершении агент отдаёт ссылку на созданный файл Figma.

Ключевое слово здесь — editable layers. На холст попадают редактируемые слои: их дублируют, перестраивают, комментируют и уводят в дизайн-систему. Если сценарий многошаговый (регистрация, корзина, оплата), захватывается последовательность экранов вместе с состояниями.

У прав доступа есть отдельная оговорка: «generate_figma_design respects your seat type when creating or editing files. New files are created in your team or organization drafts. For existing files, you must have edit permissions».

Почему это удобно дизайнерам

Раньше код был «чёрным ящиком». Теперь дизайнер видит интерфейс целиком, сравнивает состояния рядом и проверяет альтернативы без переписывания кода.

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

Инструментов, которые дизайнер подключает к этому циклу, становится больше: полезно посмотреть подборку нейросетей для веб-дизайнера.

Почему это важно разработчикам

Типичная проблема: ИИ генерирует рабочий код, который не учитывает дизайн-систему проекта. У каждой команды свой отпечаток — структура файлов, соглашения об именах, библиотека компонентов, система переменных.

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

Пример: как это выглядит в реальном проекте

Допустим, вы делаете SaaS-продукт.

1. Через Claude Code собираете рабочий прототип дашборда.
2. Просите агента захватить живой интерфейс с localhost в новый файл Figma.
3. Команда видит весь пользовательский путь на холсте.
4. Дизайнер перестраивает навигацию.
5. Копируете ссылку на обновлённый фрейм через Copy link to selection и отдаёте её обратно в Claude Code.
6. Агент вызывает get_design_context и обновляет компонент с учётом дизайн-системы.

В итоге меньше конфликтов, меньше переделок и меньше фраз вида «я думал, это должно работать иначе». Тот же цикл работает и для презентационных материалов — Figma Slides в списке поддерживаемых типов файлов, а собрать презентацию в Figma можно и без агента.

Что это меняет для профессий

Для дизайнеров

• Вы перестаёте быть последним звеном в цепочке.
• Видите реальный, живой интерфейс.
• Можете влиять на продукт до релиза.

Для разработчиков

• Меньше догадок о дизайн-намерении.
• Меньше конфликтов вокруг пиксель-перфекта.
• Больше автоматизации без потери качества.

Для продакт-менеджеров

• Общий артефакт обсуждения.
• Раннее выявление проблем.
• Быстрее принимаются решения.

Ограничения, о которых стоит знать заранее

Справка и документация Figma называют границы прямо, и их стоит прочитать до того, как процесс поставлен на команду.

• Выделением можно управлять только локально. «Selection-based prompting only works with the desktop MCP server. The remote server requires a link to a frame or layer to extract context». На удалённом сервере без ссылки агент слеп.
• Запись на холст поддерживают не все клиенты. Отправка живого UI «is currently supported by select clients»; Claude Code в таблице справки отмечен в этой колонке.
• Тариф впереди. «This will eventually be a usage-based paid feature, but is currently available for free during the beta period».
• Лимиты есть, но чисел в гайде нет. Справка отправляет за ними в раздел Plans, access, and permissions документации для разработчиков. Сам сервер объявляет заголовки X-Figma-Rate-Limit-Type и X-Figma-Plan-Tier.
• Установку плагина может блокировать организация. «If the plugin install command fails, it’s likely because your organization has blocked plugin installation».
• Права на файл никуда не делись. «For existing files, you must have edit permissions».

Частые вопросы

Как отправить ссылку на файл или фрейм в Figma, чтобы её увидел Claude Code?

Выделите нужный слой, нажмите правой кнопкой по фрейму и выберите Copy link to selection, затем вставьте URL в чат Claude Code и опишите задачу. Агент не открывает страницу по ссылке: он достаёт из неё идентификатор узла, по которому MCP-сервер отдаёт данные макета. Ссылка на файл целиком тоже работает, но передаёт весь документ вместо одного экрана.

Нужен ли платный тариф Figma для интеграции с Claude Code?

Для удалённого сервера нет: справка Figma говорит «The remote server is available on all seats and plans». Локальная версия строже — «The desktop server is available on a Dev or Full seat for all paid plans». Функции записи на холст сейчас доступны бесплатно на время беты, и Figma предупреждает, что позже они станут платными по факту использования.

Какой командой подключить Figma MCP в Claude Code?

Удалённый сервер ставится плагином: claude plugin install figma@claude-plugins-official, затем /plugin, вкладка Installed, авторизация через Allow access в браузере. Локальный сервер подключается командой claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp после включения MCP-сервера в Dev Mode десктопного приложения.

В каком формате Claude Code вернёт код из макета?

По умолчанию React и Tailwind. Документация Figma: «By default, the output is React + Tailwind, but you can customize it through your prompt». Формат меняется фразой в запросе, например «generate my Figma selection in Vue» или «generate my Figma selection in plain HTML + CSS».

Почему Claude Code не видит макет после подключения?

Чаще всего дело в авторизации. Наш прогон 15.09.2026 показал: запрос к https://mcp.figma.com/mcp без токена возвращает 401 Unauthorized и заголовок со ссылкой на OAuth-сервер Figma. Проверьте, что в /plugin на вкладке Installed сервер figma отмечен как connected, и что установку плагина не заблокировала политика организации.

Убьёт ли эта связка профессии дизайнера и разработчика?

ИИ упрощает старт, а продукт выигрывает за счёт качества итераций. Конкуренция идёт за то, как ощущается продукт: логика переходов, ясность интерфейса, выразительность дизайна. Быстрый цикл «идея — прототип — обсуждение — уточнённый код» эти задачи усиливает.

Итог

Связка Claude Code и Figma через MCP-сервер даёт два рабочих направления: из макета в код по ссылке на фрейм и из живого интерфейса на холст редактируемыми слоями. Подключение занимает одну команду, границы описаны в справке, а платная модель уже объявлена. Иногда работа начинается с кода, иногда — с холста. Чем меньше барьеров между этими мирами, тем смелее идеи, которые вы сможете реализовать. Разобраться с инструментами ИИ для дизайна и разработки помогает практикум по визуальному контенту с нейросетями.