Как подключить Figma к Claude Code через MCP-сервер

Коротко (TL;DR)

«Плагин Figma для Claude Code» — это не классический плагин на канве Figma, а связка двух официальных вещей. Первая — MCP-сервер Figma (mcp.figma.com), который Figma хостит сама. Вторая — плагин Claude Code от Anthropic, который ставится одной командой и настраивает подключение к этому серверу. Вместе они позволяют Claude Code читать ваш макет и превращать его в код, а с недавнего времени — и наоборот, переносить рабочий интерфейс обратно на канву Figma.

Что важно знать сразу:

• Это официально и бесплатно на старте. Remote-сервер доступен на всех планах Figma, включая бесплатный Starter, и не требует платного Dev Mode.
• Есть жёсткий лимит. На бесплатном сиденье — до 6 обращений к основным инструментам в месяц (данные на 12 июля 2026). Дальше нужен платный план.
• Подключение — двумя способами: через официальный плагин (claude plugin install figma@claude-plugins-official) или вручную командой claude mcp add.
• Главный риск — перепутать серверы. Громкая RCE-уязвимость 2025 года была не в официальном сервере Figma, а в стороннем community-пакете. Ставить нужно именно официальный.

Ниже — как это подключить, что модель реально умеет вытащить из макета, во сколько обходится и где связка спотыкается.

Что это физически: MCP-сервер плюс плагин, а не «плагин на канве»

Если искать «фигма плагин для claude code», легко решить, что речь про обычный плагин, который ставится из Figma Community и живёт на канве. Это не так. В основе — Model Context Protocol (MCP), открытый стандарт, по которому ИИ-приложения подключаются к внешним источникам данных. Тот же протокол Claude Code использует для связи с базами данных, GitHub и другими сервисами; общая механика подключения серверов разобрана отдельно — например, у нас есть материал о том, как ИИ-агент по протоколу MCP ведёт базу знаний.

BYBITВсё ещё смотришь со стороны?Рынок работает без выходных. Счёт на Bybit открывается за 2 минуты.Начать сейчас

Связка состоит из двух частей:

Skills для Claude: где брать и как не установить вредоносный скилл

Web for Agents: как дать ИИ-агенту браузер, поиск, почту и хостинг

Claude в Excel, PowerPoint и Word: создание файлов и надстройки Office — что выбрать

Claude Code включает Auto Mode по умолчанию: 89% опасных команд ловит классификатор

Claude Code 2.1.224 связал сессии: SendMessage и ListAgents на macOS и Linux

1. MCP-сервер на стороне Figma. Его разрабатывает и хостит сама Figma по адресу mcp.figma.com. Он отдаёт данные о ваших дизайн-файлах: структуру, переменные, скриншоты, код.
2. Плагин Claude Code от Anthropic. Публикуется в официальном маркетплейсе Anthropic (claude-plugins-official) и рекомендован в документации Figma. Он не рисует ничего на канве — он настраивает подключение к MCP-серверу и добавляет готовые Agent Skills под типовые сценарии.

Классических плагинов Figma (тех, что ставятся на канву из Community) в этой схеме нет вообще. Слово «плагин» здесь относится только к обёртке на стороне Claude Code.

Ещё один важный момент: это официальная интеграция обеих компаний, а не сторонний хак. Сервер — от Figma, плагин — от Anthropic. Это отличает связку от community-серверов вроде figma-developer-mcp (проект Framelink), с которым позже связан отдельный риск — о нём в разделе про безопасность.

Два способа подключения

Подключить Figma к Claude Code можно двумя путями. Оба работают, но выбирают их под разные задачи.

Способ 1: официальный плагин

Самый простой путь — поставить плагин из маркетплейса Anthropic:

claude plugin install figma@claude-plugins-official

После установки внутри Claude Code откройте меню плагинов и завершите подключение:

/plugin  →  Installed  →  figma  →  Enter  →  Allow access (в браузере)

Плагин сам пропишет конфигурацию MCP и подтянет Agent Skills — заготовки под типовые сценарии вроде «сделай компонент из этого фрейма». Для большинства пользователей это рекомендованный способ.

SpaceX · xStockSpaceX — частная компания. Торгуй её токеном на Bybit за крипту.Торговать SpaceX →

Способ 2: ручное подключение remote-сервера

Если Agent Skills не нужны, а нужен контроль, добавьте сервер напрямую:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Чтобы сервер был доступен во всех проектах, а не только в текущей папке, добавьте флаг --scope user:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Дальше — авторизация:

/mcp  →  Authenticate  →  Allow Access

Это тот же remote-сервер, что и в первом способе, только без обёртки-плагина.

Способ 3: desktop-сервер (когда он вообще нужен)

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

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

Важные оговорки. Во-первых, desktop-сервер требует Dev Mode, а это платный план (Professional и выше). Во-вторых, сама Figma в документации прямо советует remote-версию как основную, а desktop оставляет для узких enterprise-кейсов.

И отдельное предупреждение для тех, кто копирует команды из старых гайдов: раньше desktop-адрес заканчивался на /sse (http://127.0.0.1:3845/sse). Этот транспорт устарел — актуальный эндпоинт заканчивается на /mcp. Команда со старым /sse просто не подключится.

Что Claude Code видит в вашем макете

После подключения Claude Code получает набор инструментов MCP-сервера. На дату сверки (12 июля 2026) официальная документация перечисляет 23 инструмента — часть из них доступна только в remote-версии. Если в чужом гайде вы встретите цифру «14 инструментов», это устаревшие данные: список заметно расширился.

Основные из них:

• get_design_context — главный инструмент. Возвращает код по выбранному фрейму. По умолчанию — React и Tailwind, но стек настраивается: можно указать Vue, чистый HTML + CSS или iOS Swift, либо сгенерировать файл правил под свой проект командой /create-design-system-rules.
• get_variable_defs — переменные дизайна (цвета, отступы, типографика), чтобы код использовал ваши токены, а не случайные значения.
• get_metadata — структура выбранного узла: какие слои, как вложены.
• get_screenshot — картинка фрейма, чтобы модель могла визуально сверить результат.
• search_design_system — поиск по вашей дизайн-системе, чтобы переиспользовать существующие компоненты, а не рисовать их заново.

Кроме Claude Code, тот же MCP-сервер официально работает с Cursor, VS Code, Codex от OpenAI, Gemini CLI, Xcode (beta) и другими клиентами. Отдельно стоит Claude Desktop: он тоже умеет ходить в Figma, но через собственный Figma-коннектор, а не через тот же плагин, что Claude Code. Похожий принцип «ИИ-агент как отдельный коллега с доступом к сервисам» мы разбирали на примере Claude Tag в Slack.

Сценарий «макет → компонент» пошагово

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

Режим по выделению (selection-based). Выделяете фрейм или компонент в Figma Desktop и просите Claude Code его реализовать — клиент подтянет контекст из активного выделения.

Режим по ссылке (link-based). Кликаете правой кнопкой по фрейму → Copy link to selection → вставляете ссылку в промпт. Тут есть нюанс: Claude Code не переходит по ссылке в браузере. Он извлекает из неё node-id — идентификатор конкретного узла — и запрашивает данные у MCP-сервера уже по нему.

Дальше маршрут выглядит так:

1. Скопируйте ссылку на фрейм (Copy link to selection).
2. Вставьте её в промпт Claude Code и укажите стек, например: «Собери этот экран как компонент на Vue, используй переменные из дизайн-системы».
3. Claude Code вызывает get_design_context (код) и get_variable_defs (токены), при необходимости — get_metadata для структуры.
4. Модель генерирует код.
5. Для визуальной сверки Claude Code запрашивает get_screenshot и сравнивает результат с оригиналом.

Практический совет из опыта дизайнеров: без подключённой дизайн-системы (переменные, Code Connect) модель склонна «перерисовывать» иконки и компоненты заново вместо переиспользования готовых. Именно связка MCP плюс токены даёт консистентность — это ценят не только разработчики, но и сами дизайнеры, следящие за единообразием библиотек.

Двусторонняя связь: не только из Figma в код

Долгое время связка работала в одну сторону: макет становился кодом — нейросеть Claude превращала фреймы Figma в разметку. С функцией Code to Canvas (анонс 17 февраля 2026) появилось обратное направление. Она позволяет захватить реальный, работающий интерфейс из браузера — на localhost, staging или production — и превратить его в редактируемые фреймы на канве Figma.

Ключевое отличие от привычного «сделай скриншот»: это не картинка. На выходе — полноценные слои Figma с auto-layout, которые можно двигать, аннотировать и сравнивать варианты. Зачем это нужно: дизайнер видит, во что превратился макет в реальном коде, и правит расхождения прямо на канве, а не в переписке с разработчиком.

Одна оговорка по деньгам: на этапе беты запись в канву (write to canvas) бесплатна, но Figma предупреждает, что в будущем она станет платной по использованию. Это стоит держать в голове, планируя такой workflow надолго.

Себестоимость: из чего складывается

Стоимость связки — двухкомпонентная: план Figma и расход токенов Claude Code. Отдельной платы «за интеграцию» нет.

Про лимиты подробнее. На бесплатных сиденьях (View/Collab на любом плане, включая Starter) — до 6 вызовов основных read-инструментов в месяц. На платных Dev/Full-сиденьях лимит считается по минутам, как у Tier-1 Figma REST API: 15 запросов в минуту на Professional и 20/мин на Organization; для Enterprise отдельный лимит в таблице не указан (данные на 12 июля 2026). Инструменты записи в канву в общедоступной таблице лимитов отдельно не упомянуты.

Обратите внимание на частую ошибку в обзорах: цифры «200 запросов в день» в официальной таблице нет — там только помесячный лимит для бесплатных сидений и поминутный для платных.

Второй компонент — токены Claude Code. Figma их не считает, но ответы get_design_context и get_metadata бывают объёмными, и контекст сессии растёт быстрее, чем при обычном чате. На больших макетах это заметно по расходу.

Где генерация спотыкается: три ограничения точности

Связка хороша, но не волшебна. Три момента стоит понимать заранее.

1. Точечные правки существующего кода — слабое место. Claude Code отлично генерирует новые компоненты с нуля. Но когда макет изменился и нужно аккуратно поправить уже написанный код, без глубокого понимания архитектуры дизайн-системы модель делает это плохо — чаще проще перегенерировать компонент целиком или доправить руками.
2. Многоэкранные флоу собираются по одному фрейму. Карусель, онбординг, любой многоэкранный сценарий конвертируется пофреймово. Чтобы собрать экраны в единый интерактивный компонент, нужен отдельный дополнительный промпт — это больше итераций и токенов, чем на простом одноэкранном макете.
3. Без токенов модель «перерисовывает» вместо переиспользования. Уже упомянутый эффект: если дизайн-система не подключена, агент генерирует иконки и элементы заново, вместо того чтобы взять готовые из библиотеки. Лечится подключением переменных и Code Connect.

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

Риски: безопасность, приватность, права

Раздел, который в обзорах чаще всего пропускают. А зря — тут и есть главный факт-чек темы.

Не перепутайте официальный сервер со сторонним. В октябре 2025 была раскрыта серьёзная уязвимость CVE-2025-53967 (оценка CVSS 7.5) — command injection, позволявшая удалённое выполнение кода. Но она была не в официальном сервере Figma, а в стороннем community-пакете figma-developer-mcp (проект Framelink, использовался в связке с Cursor). Уязвимость закрыли в версии 0.6.3 от 29 сентября 2025 года. Официального сервера mcp.figma.com она не касалась. Вывод простой: ставьте MCP-сервер только из официального каталога Figma, а не первый попавшийся community-пакет с похожим названием.

Prompt injection. Сама Anthropic в документации Claude Code прямо предупреждает: перед подключением любого MCP-сервера убедитесь, что доверяете ему. Серверы, которые тянут внешний контент, могут стать вектором prompt injection — когда во «внешних данных» спрятана инструкция, сбивающая модель.

Интеллектуальная собственность. Главный риск доступа ИИ-агента к дизайн-файлам — не персональные данные, а IP. В Figma-файлах лежат нерелизнутые продукты, брендовые активы, внутренние пользовательские флоу, иногда — креды или клиентские данные, случайно оставленные в комментариях и мокапах. Подключая агента, вы даёте ему доступ ко всему этому. Для команд это повод подумать о том, к каким файлам открывать доступ.

Чем это отличается от Figma Make и Claude Design

Вокруг темы много путаницы «Claude внутри Figma», поэтому разведём три разных вещи.

Figma MCP + Claude Code (тема этой статьи) — Claude Code как внешний инструмент читает ваши макеты через MCP-сервер и пишет код.

Figma Make — отдельный продукт Figma для генерации прототипов по промпту. Внутри него можно выбрать модель, и среди вариантов есть Claude — Sonnet 4.6 и Opus (плюс Gemini и GPT). Но это Claude как модель-провайдер внутри Figma, а не Claude Code. Если вам интересно, что представляет собой актуальная линейка моделей Anthropic, у нас есть отдельный разбор Claude Sonnet 5.

Claude Design — инструмент от Anthropic для генерации дизайна, который часто сравнивают с Figma Make как альтернативу. Это уже не про мост между Figma и кодом, а про создание дизайна с нуля; его возможности и реальный кейс мы разобрали в обзоре Claude Design.

Короткий ориентир: нужно превратить готовый Figma-макет в код — это MCP + Claude Code; нужно сгенерировать прототип по текстовому описанию внутри Figma — это Figma Make; нужен дизайн с нуля силами Anthropic — это Claude Design.

FAQ

Нужен ли платный Figma, чтобы связать его с Claude Code? Нет. Remote MCP-сервер доступен на бесплатном плане Starter без Dev Mode. Ограничение бесплатного сиденья — до 6 обращений к основным инструментам в месяц (на 12 июля 2026). Платный план нужен, чтобы снять этот лимит или получить desktop-сервер.

«Плагин Figma для Claude Code» — это плагин из Figma Community? Нет. Это MCP-сервер на стороне Figma плюс плагин Claude Code от Anthropic, который ставится командой claude plugin install figma@claude-plugins-official. Классических плагинов на канве Figma в этой связке нет.

Тратятся ли токены Claude отдельно от Figma? Да. Figma берёт плату только за свой план и не тарифицирует токены. Генерация кода расходует обычные токены Claude Code по вашему тарифу, и контекст сессии растёт быстро из-за объёмных ответов инструментов.

Тот громкий взлом Figma MCP — это опасно для меня? Уязвимость CVE-2025-53967 (октябрь 2025) была в стороннем community-сервере figma-developer-mcp (Framelink), а не в официальном mcp.figma.com. Если вы подключаете официальный сервер Figma, эта конкретная дыра вас не касается. Но подключать любой MCP-сервер стоит только из доверенного источника.

В каком стеке Claude Code генерирует код по макету? По умолчанию — React и Tailwind. Стек настраивается: можно указать Vue, чистый HTML + CSS, iOS Swift или задать собственные правила через /create-design-system-rules.

Можно ли перенести готовый интерфейс обратно в Figma? Да, через функцию Code to Canvas (анонс 17 февраля 2026): работающий UI из браузера превращается в редактируемые фреймы на канве Figma, а не в статичный скриншот. На этапе беты запись в канву бесплатна, позже станет платной.