Figma + Claude Code через MCP: полный гайд для тех, кто хочет, чтобы дизайн и код наконец-то совпадали

У каждой продуктовой команды есть свой вечный конфликт. Не «iOS или Android». Не «монолит или микросервисы». А тот самый момент, когда дизайнер показывает макет в Figma, разработчик открывает его и думает: «Так, тут padding 16 или 24? Этот цвет #333 или #222? И почему кнопка на макете выглядит не так, как у меня в коде?»

Дизайн живёт в Figma. Код — в IDE. Между ними — телепатия, пинг-понг скриншотов в Slack и вечное «это не то, что я имел в виду».

Figma и Anthropic решили это починить. В феврале 2026 года они выкатили штуку, которая звучит как фантастика: пишешь в Claude Code «сделай мне дашборд», он генерит интерфейс, ты говоришь «отправь это в Figma» — и в Figma появляются настоящие редактируемые фреймы с Auto Layout, текстовыми слоями и отдельными кнопками. Не скриншот. Не картинка. Живые объекты, которые дизайнер может взять и доработать.

И это работает в обе стороны.

В этой статье я разберу по косточкам всю механику: как это работает под капотом, как настроить step-by-step, какие есть альтернативы от community и для кого этот инструмент реально имеет смысл.

Что такое MCP и зачем он нужен (если вы не программист)

MCP — это Model Context Protocol. Звучит сложно, но идея простая.

Представьте, что AI-агент (вроде Claude Code) — это очень умный стажёр. Он отлично пишет код, но ничего не знает о вашем проекте в Figma. У него нет доступа к макетам, цветам, компонентам, переменным дизайн-системы. Он работает вслепую.

MCP — это стандартный способ дать этому стажёру доступ к внешним системам. Единый протокол, через который AI-инструменты общаются с данными. Не API в привычном смысле — а именно протокол для AI-агентов: структурированный, понятный моделям, с набором «инструментов» (tools), которые агент может вызывать.

Figma создала свой MCP-сервер — и теперь любой AI-инструмент, поддерживающий MCP (Claude Code, Cursor, RooCode, Codex от OpenAI), может:

Читать ваши дизайны: структуру, стили, переменные, компоненты
Генерировать код на основе конкретного фрейма, а не скриншота
Отправлять UI обратно в Figma как редактируемые слои

Это принципиально отличается от того, как работали раньше. Раньше: скриншот → вставить в чат → «сделай как тут». Теперь: ссылка на фрейм → агент получает структурированные данные → генерирует точный код. (был еще dev mode, но мы тут это… для coding агентов пишем)

Два вида Figma MCP: remote и desktop

У Figma не один MCP-сервер, а два. И разница между ними важна.

Remote MCP (рекомендуемый)

Сервер хостится на стороне Figma — https://mcp.figma.com/mcp. Вы подключаетесь к нему через интернет, аутентифицируетесь через OAuth, и всё работает. Не нужен десктопный клиент Figma — можно работать из браузера.

Главное преимущество: поддерживает Code to Canvas — ту самую фичу, где UI из кода превращается в Figma-фреймы. Это работает только на remote-сервере.

Как это выглядит:

Вы даёте ссылку на Figma-фрейм → агент читает дизайн и генерит код
Вы просите «отправь мой UI в Figma» → агент захватывает страницу из браузера и создаёт слои в Figma

Desktop MCP

Работает через десктопное приложение Figma на вашем компьютере. Сервер крутится локально на http://127.0.0.1:3845/mcp.

Преимущество: selection-based — MCP понимает, какие слои вы выделили в Figma прямо сейчас. Не нужно копировать ссылки — просто выделяете элемент в файле и просите агента с ним работать.

Ограничение: нет Code to Canvas. Только чтение дизайна → генерация кода.

	Remote	Desktop
Code to Canvas	✓	—
Selection-based	—	✓
Нужен десктоп Figma	Нет	Да
Аутентификация	OAuth	Автоматически

Для большинства сценариев remote — лучший выбор. Desktop полезен, если вы активно работаете в десктопном приложении и хотите быстро выделять элементы без копирования ссылок.

Под капотом: как это технически работает

Ок, теперь самое интересное. Что реально происходит, когда Claude Code «читает» ваш дизайн или «отправляет» UI в Figma?

Направление 1: Figma → Claude Code (чтение дизайна)

Когда вы даёте Claude Code ссылку на Figma-фрейм, вот что происходит:

Claude Code вызывает инструмент get_design_context — это MCP tool, который запрашивает у Figma данные о конкретном фрейме
Figma MCP-сервер получает запрос, обращается к Figma API, извлекает структуру: дерево слоёв, стили, размеры, отступы, цвета, шрифты, переменные
Данные возвращаются в структурированном виде — по умолчанию как React + Tailwind код, но можно попросить Vue, plain HTML+CSS, iOS (SwiftUI)
Claude Code использует эти данные как контекст для генерации кода

Это не скриншот. Агент получает семантическую информацию: «тут фрейм с Auto Layout, gap 16px, внутри текст Inter 16/24 цвет #1A1A1A и кнопка с padding 12 24 border-radius 8». Это на порядок точнее, чем «посмотри на картинку и угадай».

Полный набор инструментов, доступных через MCP:

get_design_context — основной: получает стили, layout, код для фрейма
get_variable_defs — достаёт переменные дизайн-системы (цвета, spacing, типографика)
get_screenshot — делает скриншот выделенного элемента (для визуальной верификации)
get_metadata — XML-представление структуры (ID слоёв, типы, размеры)
get_code_connect_map — маппинг Figma-компонентов на код в вашем репозитории
whoami — кто вы, какой план, какой seat

Направление 2: Claude Code → Figma (Code to Canvas)

А вот тут начинается магия. Технически под капотом происходит следующее:

Claude Code вызывает generate_figma_design — специальный MCP tool для захвата UI
Figma возвращает capture ID и URL для инъекции скрипта
Claude Code инжектит скрипт в вашу страницу (localhost, staging или production) и открывает браузер с параметрами вида http://localhost:5173/?capture=<id>&figmaendpoint=<url>
Скрипт захватывает отрендеренный DOM — не исходный код, а то, что реально нарисовано в браузере
Данные отправляются на серверы Figma, где DOM конвертируется в нативные Figma-слои
Claude Code опрашивает статус (polling), и через 30-60 секунд вы получаете ссылку на Figma-файл

Что приходит в Figma — это не растровая картинка. Это структурированные слои: текст можно редактировать, кнопки — отдельные объекты, Auto Layout перенесён. Дизайнер может взять эти фреймы и работать с ними как с обычным Figma-дизайном.

Важный нюанс: под капотом технология конвертации HTML→Figma-слои — это, по сути, то, что делает плагин html.to.design от компании divRIOTS. Figma купили эту технологию (code.to.design) — плагином пользуются почти 2 миллиона человек. Именно она превращает DOM в редактируемые Figma-объекты, а не в скриншоты.

Step-by-step: настраиваем Figma MCP с Claude Code

Хватит теории. Вот конкретные шаги — от нуля до работающей связки.

Что нужно

Claude Code — установлен и работает (npm install -g @anthropic-ai/claude-code)
Figma аккаунт — любой, но для полноценной работы нужен Pro+ с Full или Dev seat (подробнее о лимитах ниже)

Шаг 1: Подключаем remote MCP-сервер

Откройте терминал и выполните:

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

Хотите, чтобы сервер был доступен во всех проектах, а не только в текущем?

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

Шаг 2: Аутентификация

Запустите Claude Code (или перезапустите, если он был открыт):

claude

Внутри Claude Code введите:

/mcp

Выберите figma → Authenticate. Откроется браузер — нажмите Allow Access. Вернитесь в терминал — должно появиться: Authentication successful. Connected to figma.

Шаг 3: Проверяем

Снова /mcp — убедитесь, что Figma MCP в статусе Connected и инструменты доступны.

Всё. Три шага, две минуты.

Альтернативный путь: Figma Plugin для Claude Code

Figma также предлагает установить плагин, который включает MCP-настройки и Agent Skills:

claude plugin install figma@claude-plugins-official

Этот способ добавляет не только MCP-сервер, но и Skills — встроенные инструкции для агента, которые помогают ему работать с Figma-дизайнами эффективнее (например, Implement Design, Code Connect Components, Create Design System Rules).

Практика: из Figma в код (Figma → Claude Code)

Допустим, дизайнер сделал карточку товара в Figma. Вам нужен код.

Шаг 1. Откройте Figma-файл. Кликните правой кнопкой по нужному фрейму → Copy/Paste as → Copy link to selection.

Шаг 2. В Claude Code напишите:

Реализуй этот компонент на React + Tailwind:
https://www.figma.com/design/xxxxx/yyy?node-id=123:456

Шаг 3. Claude Code вызовет get_design_context, получит структуру фрейма, и сгенерирует компонент с правильными размерами, отступами, цветами и шрифтами.

Шаг 4. Если хотите другой фреймворк:

Реализуй этот компонент на Vue 3 с Composition API:
https://www.figma.com/design/xxxxx/yyy?node-id=123:456

Или:

Сгенерируй plain HTML + CSS для этого дизайна:
https://www.figma.com/design/xxxxx/yyy?node-id=123:456

Что работает хорошо

Компоненты с чётким Auto Layout — карточки, формы, навбары
Дизайн-системные элементы с переменными (color tokens, spacing tokens)
Файлы с настроенным Code Connect (маппинг Figma-компонентов на реальный код)

Что работает так себе

Сложные вложенные макеты — агент может «потерять» иерархию
Специфичные CSS-эффекты — gradient text, backdrop-blur, сложные тени
Очень большие фреймы — Claude Code может упереться в лимит токенов (ошибка response exceeds maximum allowed tokens). Решение: установите MAX_MCP_OUTPUT_TOKENS=100000 в переменных окружения

Практика: из кода в Figma (Code to Canvas)

А теперь обратное направление — то, что Figma назвали Code to Canvas.

Шаг 1. Сгенерируйте интерфейс в Claude Code:

Создай дашборд для управления задачами: боковая навигация,
карточки со статистикой, таблица задач, графики. React + Tailwind + Recharts.

Шаг 2. Запустите dev-сервер (Claude Code обычно делает это автоматически). Убедитесь, что UI открывается в браузере.

Шаг 3. Скажите Claude Code:

Отправь этот UI в новый Figma-файл

Или в существующий файл:

Захвати этот UI и отправь в https://www.figma.com/design/xxxxx/my-project

Шаг 4. Claude Code запустит захват:

Откроется браузер со специальным тулбаром
Нажмите Entire screen для захвата всей страницы
Или Select element для захвата конкретного элемента
Можете захватить несколько экранов в одной сессии

Шаг 5. Нажмите Open file — и увидите ваш UI как редактируемые фреймы в Figma.

Полный roundtrip: код → Figma → правки → обратно в код

Вот где это становится по-настоящему мощным:

Генерируете UI в Claude Code
Отправляете в Figma через Code to Canvas
Дизайнер открывает фреймы, расставляет экраны рядом, сравнивает варианты, комментирует, дорабатывает
Дизайнер делится ссылкой на обновлённый фрейм
Вы в Claude Code пишете: Реализуй изменения из этого фрейма: <ссылка>
Claude Code читает обновлённый дизайн и применяет изменения в коде

Код → Canvas → правки → обратно в код. Круг замкнулся.

Подводные камни: что demo вам не показывают

Я пробовал + покопался в опыте реальных пользователей, и вот что нужно знать прежде, чем бросаться настраивать.

Скролл-анимации ломают захват

Code to Canvas захватывает то, что видно в viewport. Если у вас landing page с элементами, появляющимися по скролу (IntersectionObserver, scroll-triggered animations), — они просто не попадут в захват. Решение: попросите Claude Code временно отключить анимации перед захватом. Он умеет — сам найдёт хуки и поставит return true.

Фиксированные сайдбары обрезаются

Если основной контент длиннее viewport, а сайдбар фиксированной высоты — в Figma сайдбар окажется короче контента. Это следствие того, как работает захват: сайдбар рендерится на высоту viewport, а контент — на полную высоту.

CSS-эффекты не конвертируются 1:1

Gradient text (background-clip: text), сложные фильтры, некоторые CSS-трансформации — всё это придёт как упрощённая версия. Figma-слои не поддерживают все CSS-свойства.

Figma получает слои, а не код

Когда дизайнер меняет кнопку в Figma и вы просите Claude Code «реализуй изменения» — это не git diff. Агент читает дизайн заново и генерирует код с нуля. Нет event handlers, нет state, нет валидации — только визуал.

MCP-сервер иногда подвисает

Пользователи на форумах жалуются: MCP зависает после нескольких вызовов. Проверенное решение — перезапустить и Figma, и Claude Code. Банально, но работает. Если Claude Code выдаёт ошибку token limit exceeded — увеличьте MAX_MCP_OUTPUT_TOKENS.

Японский, корейский и другие CJK-шрифты

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

Лимиты и цены: сколько стоит удовольствие

Вот главная таблица, которую нужно сохранить в закладки:

План / Seat	Лимит
Starter (бесплатный), View, Collab	6 вызовов в месяц
Pro / Org — Full или Dev seat	200 вызовов в день (10-20/мин)
Enterprise — Full или Dev seat	600 вызовов в день (20/мин)

6 вызовов в месяц на бесплатном плане. Этого хватит только чтобы попробовать и убедиться, что оно работает. Для реальной работы нужен как минимум Pro ($16/мес за Full seat или $12/мес за Dev seat).

Важный нюанс: generate_figma_design (Code to Canvas) не считается в стандартные лимиты. Он вынесен за пределы rate limits. А вот get_design_context, get_variable_defs и другие инструменты — считаются.

Люди на Reddit и Figma Forum регулярно жалуются, что после апгрейда до Dev seat лимиты не обновляются. Решение: переаутентифицируйтесь — /mcp → figma → Authenticate заново.

Community не ждало: альтернативные MCP-серверы

Пока официальный сервер был read-only и платным, community собрало своё. Три главных проекта:

1. Framelink MCP (Figma-Context-MCP)

GitHub: GLips/Figma-Context-MCP Stars: 13 700+ | Downloads: 46K+/нед | Лицензия: MIT

Это де-факто стандарт для community-интеграции Figma с AI-инструментами. Создан Грегом Липсманом, работает через Figma REST API с вашим персональным токеном.

Что умеет:

Читает структуру, стили, layout из Figma-файлов
Оптимизирует данные перед отправкой в AI — сжимает контекст на ~90%
Работает с любым MCP-клиентом: Claude Code, Cursor, VS Code

Чего не умеет:

Запись обратно в Figma (read-only)
Code to Canvas (это эксклюзив официального MCP)

Настройка для Claude Code:

Создайте Personal Access Token в Figma, затем добавьте в ~/.claude.json:

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Когда использовать: если вам нужен только контекст дизайна для генерации кода и не хочется платить за Pro+ план. Лимиты Figma REST API гораздо щедрее, чем лимиты MCP-сервера.

2. Figma Console MCP (southleft)

GitHub: southleft/figma-console-mcp Tools: 59+ (в полной версии) | Лицензия: MIT

Самый мощный community-сервер. Главное отличие — умеет писать в Figma: создавать фреймы, формы, компоненты, управлять переменными, менять свойства элементов.

Три режима работы:

Режим	Инструменты	Запись	Нужен Figma Desktop
Remote (read-only)	~16	Нет	Нет
Cloud Mode	~44	Да	Да (Desktop Bridge plugin)
Local (NPX)	59+	Да	Да

Как работает запись: AI-клиент отправляет команду → Cloud MCP Server → WebSocket Relay → Desktop Bridge Plugin (Figma плагин) → Figma Plugin API выполняет действие. По сути, плагин в Figma работает как «руки» AI-агента.

Ключевой бонус: переменные (variables) доступны на любом плане Figma — потому что работает через Plugin API, а не через Enterprise REST API.

Когда использовать: если нужна полная двусторонняя связь с Figma — чтение и запись через AI. Подходит для автоматизации дизайн-систем.

3. Community Figma MCP (antonytm)

GitHub: antonytm/figma-mcp-server

Ещё один write-enabled MCP, созданный командой EXDST. Архитектура похожа: Figma Plugin + WebSocket-сервер как медиатор + MCP-сервер.

Как это работает:

MCP-сервер получает tool call от AI-агента
Помещает задачу в очередь и отправляет через WebSocket
Figma Plugin слушает WebSocket, забирает задачу, выполняет через Plugin API
Результат возвращается обратно по цепочке

Особенность: полностью бесплатен и open-source. Не нужна подписка Figma. Работает через Plugin API — значит, плагин должен быть запущен в вашем Figma-файле.

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

Сравнительная таблица: что когда брать

Задача	Решение	Цена
Дизайн → код (чтение макетов)	Framelink MCP	Бесплатно
Дизайн → код (с Code Connect)	Официальный Figma MCP	Pro+ ($12-16/мес)
Код → Figma (Code to Canvas)	Официальный Figma MCP	Pro+
AI пишет в Figma (создаёт слои)	figma-console-mcp или antonytm	Бесплатно
Полный roundtrip: код ↔ canvas	Официальный Figma MCP	Pro+
Нет дизайнера, нужна UI-система	shadcn Create (см. ниже)	Бесплатно

Для тех, кто без Figma: shadcn Create

А что если у вас нет дизайнера? Нет Figma Pro? Нет вообще дизайна — просто надо быстро сделать приличный UI?

В конце 2025 года shadcn/ui — самая популярная библиотека компонентов для React (110K+ stars на GitHub, используется в OpenAI, Vercel, Adobe) — выкатил shadcn Create.

Это визуальный конструктор дизайн-системы прямо в браузере. Не drag-and-drop конструктор страниц, а именно инструмент для настройки фундамента вашего UI.

Как это работает:

Заходите на ui.shadcn.com/create
Выбираете пресет — предустановленный визуальный стиль (или нажимаете Shuffle для рандомного варианта)
Настраиваете:
- Base — библиотека компонентов (Radix UI)
- Style — визуальный стиль (Nova и др.)
- Base Color — базовый цвет (Neutral, Slate, Zinc…)
- Theme — цветовая тема
- Icon Library — набор иконок (Lucide)
- Font — шрифт (Inter, и др.)
- Radius — скругление углов
- Menu Color / Accent — стиль навигации
Видите live preview — как будут выглядеть ваши компоненты
Нажимаете Create Project → выбираете фреймворк → получаете команду для установки

Одна команда в терминале — и у вас настроенный проект со всеми цветами, шрифтами, токенами и стилями, которые вы выбрали. Не генерик из коробки, а ваш кастомный вид.

Почему это важно в контексте нашей темы:

Одна из главных проблем shadcn/ui была «все приложения выглядят одинаково». Create решает это: вы начинаете с уникального визуального стиля ещё до того, как написали первую строку кода.

А дальше — shadcn/ui идеально работает с AI-инструментами. У них есть собственный MCP-сервер — и это не просто «ещё один MCP». Он позволяет AI-агентам:

Просматривать все доступные компоненты, блоки и шаблоны из реестра
Искать нужные компоненты по имени или функциональности
Устанавливать компоненты через естественный язык: «добавь форму логина»
Видеть реальные TypeScript-пропсы — не галлюцинировать, а работать с настоящим кодом компонентов

Настройка для Claude Code — одна команда:

npx shadcn@latest mcp init --client claude

После этого Claude Code перестаёт гадать, какие компоненты у вас есть, — он видит реальный реестр и генерирует код, который действительно использует вашу дизайн-систему.

Для продуктовых команд без дизайнера это реальная альтернатива: shadcn Create + shadcn MCP + Claude Code — полный цикл от идеи до продакшена. А если потом захотите привлечь дизайнера — подключаете Figma MCP и получаете roundtrip.

Когда всё это имеет смысл (а когда нет)

Давайте честно — не для каждого проекта нужна интеграция Figma + Claude Code через MCP.

Имеет смысл, когда

Продуктовая команда с дизайнером и разработчиком — roundtrip реально экономит часы на каждой итерации
Быстрое прототипирование — сгенерировать 3 варианта UI, отправить в Figma, обсудить с командой, выбрать лучший
Reverse engineering — нужно затащить чужой или legacy UI в Figma для анализа
Дизайн-система уже живёт в Figma — MCP вытащит все переменные и компоненты, код будет консистентным
Вы разработчик без доступа к дизайнеру — Code to Canvas поможет визуализировать и обсуждать UI с заказчиком

Не имеет смысла, когда

Solo-разработчик на простом проекте — проще взять shadcn Create + Claude Code без Figma
6 вызовов в месяц достаточно сказать «ок, интересно», но не более — нужен Pro+
Вы ждёте pixel-perfect код — это не магия, а хороший контекст для AI. Доработка нужна всегда

Что со всем этим делать

Figma MCP — это не серебряная пуля. Это инфраструктура, которая впервые позволяет дизайну и коду общаться на одном языке через AI. Раньше между Figma и IDE был разрыв, который заполнялся человеческой телепатией. Теперь есть протокол.

Code to Canvas — самая визуально впечатляющая часть, но на практике чтение дизайна из Figma (Figma → код) ценнее. Это то, что реально используют каждый день: дизайнер обновил макет → разработчик даёт ссылку Claude Code → получает код, соответствующий дизайну. Не «примерно похоже», а со структурированными данными: отступами, цветами, шрифтами, переменными.

Community-серверы — реальная альтернатива. Framelink с 13.7K stars и 46K загрузок в неделю — это не эксперимент, а рабочий инструмент. Если вам не нужен Code to Canvas — Framelink бесплатно закроет 80% потребностей.

А если у вас нет Figma вообще — shadcn Create + Claude Code дают удивительно зрелый workflow для команд без дизайнера.

Мир, в котором AI читает ваш дизайн и пишет код, а потом отправляет результат обратно дизайнеру — уже здесь. Он ещё сыроватый (MCP зависает, скролл-анимации не захватываются, CJK-шрифты глючат). Но направление очевидно.

Начните с малого: подключите Figma MCP (claude mcp add --transport http figma https://mcp.figma.com/mcp), попробуйте дать Claude Code ссылку на любой фрейм — и посмотрите, что получится.

Источники: Figma Developer Docs, Figma Blog — Code to Canvas, Codeminer42 — What the Demo Didn’t Show You, Framelink MCP, Figma Console MCP, shadcn/ui Create, Figma MCP Pricing