Figma + Claude Code 2026: как подключить и собрать дизайн

Figma MCP даёт Claude Code прямой доступ к вашему макету – цвета, отступы, компоненты, варианты. Дизайн → код без потерь при переводе.

Зачем это нужно

Классический workflow дизайнера: рисуешь макет в Figma, передаёшь разработчику, получаешь результат «почти как в макете, но не совсем». Цвета чуть другие, отступы на глаз, шрифт не тот. Потому что developer интерпретирует макет вручную.

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

Результат: дизайнер сам шипит свой дизайн. Или разработчик получает код, который pixel-perfect совпадает с макетом. Без промежуточных файлов, без потерь при переводе.

Подключение Figma MCP

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

Через плагин (рекомендуется)

claude plugin install figma@claude-plugins-official

Плагин автоматически настраивает MCP и добавляет Agent Skills для типовых сценариев.

Через команду

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

Для глобальной настройки (все проекты):

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

Авторизация

После подключения:

Запустите новую сессию Claude Code
Введите /mcp в чате
Выберите figma → Authenticate
Браузер откроет страницу авторизации Figma – разрешите доступ
Проверка: /mcp должен показать Authentication successful

ВНИМАНИЕ

Официальный remote MCP использует OAuth, не Personal Access Token. PAT работает только со сторонними серверами (например, GLips/Figma-Context-MCP). Если вам нужен PAT – ищите сторонние решения.

Что Claude Code видит в Figma

После подключения Claude Code получает доступ к 19 инструментам. Ключевые:

get_design_context – основной инструмент. Читает выбранный фрейм и возвращает его структуру в виде React + Tailwind кода (фреймворк настраивается). Включает все цвета, отступы, типографику, компоненты.

get_variable_defs – извлекает design tokens: переменные цветов, spacing, typography. Если вы используете Figma Variables – Claude получит их как готовые токены для кода.

get_metadata – слоевое дерево файла: ID, имена, типы, позиции, размеры каждого элемента.

get_screenshot – скриншот выбранного фрейма для визуального сравнения. Claude сопоставляет свой код с картинкой.

search_design_system – поиск по библиотекам компонентов, переменных и стилей. Найдёт кнопку, карточку или цвет по имени.

use_figma – двусторонний: Claude может не только читать, но и создавать/редактировать объекты прямо в Figma canvas.

По умолчанию get_design_context возвращает React + Tailwind. Чтобы сменить стек, не нужен отдельный инструмент – просто попросите целевой фреймворк прямо в промпте: «сгенерируй мой выделенный фрейм на Vue» или «...на чистом HTML + CSS».

Figma – не единственный источник макета для Claude Code. Если макета ещё нет, его можно сгенерировать с нуля через Google Stitch + Claude Code, а потом так же забрать в код через MCP.

4-фазный workflow

Фаза 1: анализ дизайна

Начните с полного анализа макета. Claude должен понять структуру до того, как начнёт генерировать код.

ПРОМПТ · Анализ Figma макета

Проанализируй мой Figma дизайн по ссылке [вставить URL фрейма]. Выдели – общую структуру layout, цветовую палитру, типографику, повторяющиеся компоненты, spacing-систему. Не генерируй код, только анализ.

Claude вызовет get_design_context и get_metadata, прочитает все слои и выдаст структурированный отчёт: какие секции, какие компоненты, какая система отступов.

Фаза 2: извлечение design tokens

После анализа – извлекаем токены дизайна в код.

ПРОМПТ · Извлечение design tokens

Извлеки design tokens из моего Figma файла. цвета (primary, secondary, neutral шкалы), типографику (font-family, sizes, weights, line-heights), spacing (padding, gap, margin шкала), border-radius, shadows. Сохрани в tokens.css или tailwind.config.ts.

Если в Figma используются Variables – Claude получит их напрямую через get_variable_defs. Если нет – извлечёт из стилей конкретных элементов.

Фаза 3: генерация компонентов

Теперь поочерёдно генерируем компоненты. Начинайте с маленьких, заканчивайте большими.

ПРОМПТ · Генерация компонента

Сгенерируй компонент Button из моего Figma дизайна. Используй design tokens из tokens.css. Учти все варианты: primary, secondary, ghost, disabled. Сверь spacing, border-radius и типографику с макетом через Figma MCP.

Claude вызовет get_design_context для конкретного компонента, прочитает все варианты и сгенерирует код с точными значениями из макета.

Порядок генерации: Button → Input → Card → Navigation → Section layouts.

Фаза 4: сборка страниц

Когда компоненты готовы – собираем полные секции и страницы.

ПРОМПТ · Сборка страницы

Собери секцию Hero из моего Figma макета. Используй готовые компоненты (Button, Navigation). Layout, отступы и адаптивность – точно по макету через Figma MCP. Сверь результат через get_screenshot.

Claude читает layout фрейма, использует готовые компоненты и собирает секцию с точным spacing.

Три workflow для разных задач

A: Design System → Full Site

Для крупных проектов с дизайн-системой в Figma.

Извлечь tokens → tokens.css
Сгенерировать все компоненты из библиотеки
Собрать страницы из компонентов
Проверить через get_screenshot

Медленнее, но результат – полная консистентность. Подходит для продуктов с несколькими страницами.

B: Speedrun одной страницы

Для быстрого прототипирования или лендинга.

Скормить Claude весь фрейм страницы разом
Попросить сгенерировать всё за один проход
Доработать детали итеративно

Быстрее, но компоненты не переиспользуются. Подходит для лендингов и one-pager.

C: Component First

Для зрелых дизайнеров с выстроенной системой.

Настроить Code Connect – связать Figma-компоненты с реальными компонентами кода
Claude будет использовать ваши существующие компоненты вместо генерации новых
Только layout и сборка – через MCP

Самый чистый результат. Требует предварительной настройки Code Connect через Figma CLI.

Подготовка Figma-файла: чеклист

Качество кода напрямую зависит от качества Figma-файла. Перед подключением MCP:

Именование слоёв – замените Frame1268 и Group5 на CardContainer, CTA_Button, profile-card. Имя слоя = контекст для LLM.

Auto Layout везде – задаёт flexDirection, padding, gap. Без Auto Layout Claude угадывает отступы. С Auto Layout – читает точные значения.

Figma Variables – цвета, spacing, border-radius через Variables, не захардкоженные значения. MCP читает переменные и передаёт как токены.

Компоненты – всё что повторяется (кнопки, карточки, инпуты) должно быть компонентом с вариантами.

Аннотации – для поведений, которые визуально не очевидны: «при клике открывается drawer», «scroll horizontal», «tooltip on hover».

ВНИМАНИЕ

Плохо структурированный файл с безымянными слоями и без Auto Layout даст плохой код. MCP не сделает магию из хаоса – он точно переведёт то, что вы ему дали.

Rate limits

Количество запросов зависит от тарифа Figma:

View/Collab-место (на любом тарифе) – 6 запросов в месяц. Это лимит по типу места, а не по «бесплатному тарифу». Фактически только попробовать
Professional (Dev/Full-место) – 200 в день, 10 в минуту. Хватает на полноценную работу
Organization (Dev/Full-место) – 600 в день, 20 в минуту
Enterprise – 600 в день, 20 в минуту

Инструменты use_figma и generate_figma_design (запись в canvas) – сейчас бесплатны в бета, но будут тарифицироваться отдельно.

Если упираетесь в лимиты Figma или не хотите платить за тариф ради дизайна – есть бесплатная замена Claude Design на Open Design, которая закрывает тот же путь «макет → код» без подписки.

Честные ограничения

Только OAuth – Personal Access Token не работает с официальным remote MCP. Если нужен PAT – используйте сторонний сервер GLips/Figma-Context-MCP.

React + Tailwind по умолчанию – get_design_context возвращает код в этом стеке. Для Vue, Svelte или plain CSS просто укажите нужный фреймворк прямо в промпте (например, «сгенерируй на Vue» / «...на чистом HTML + CSS») – отдельный инструмент для смены стека не требуется.

Экспорт ассетов – SVG, PNG и иконки выгружаются через MCP инструментами download_assets и upload_assets. Плюс скриншот для визуальной сверки через get_screenshot. Экспортировать ассеты из Figma вручную больше не нужно.

Нет синхронизации кода → Figma – generate_figma_design конвертирует live UI в слои Figma, но автосинхронизация изменений кода обратно в макет не поддерживается.

Rate limits для View/Collab-места – 6 запросов в месяц (лимит привязан к типу места на любом тарифе, а не к «бесплатному плану»). Для реальной работы нужно Dev/Full-место.

Итого: ваш чеклист

Подготовьте Figma-файл: именование слоёв, Auto Layout, Variables, компоненты
Подключите MCP: claude plugin install figma@claude-plugins-official
Авторизуйтесь через OAuth в /mcp
Фаза 1 – анализ макета (без кода)
Фаза 2 – извлечение tokens в CSS/Tailwind
Фаза 3 – генерация компонентов поочерёдно
Фаза 4 – сборка страниц из компонентов
Сверка через get_screenshot

EDGELAB SPACE

Вступить в Edge Lab edgelab.space

FAQ

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

Через официальный Figma MCP: подключаешь сервер, и Claude видит каждый слой, цвет, шрифт и компонент твоего Figma-файла. Дальше агент работает с дизайном программно.

Может ли Claude Code собрать сайт из макета Figma?

Да — по 4-фазному workflow: анализ дизайна → извлечение токенов → генерация компонентов → сборка страниц. Claude переносит макет в код, опираясь на реальные данные из Figma, а не на скриншот.