Figma MCP Cursor 2026: от макета до React-компонента за 30 минут

Figma MCP плюс Cursor -- это способ превратить готовый дизайн в рабочий код без привлечения верстальщика. Дизайнер открывает Dev Mode в Figma, подключает MCP-сервер, выбирает фрейм и дает задачу Cursor или Claude Code. На выходе получает React-компонент с правильными отступами, цветами из дизайн-системы и рабочей интерактивностью.

В этой статье разберем пошаговую настройку Figma Dev Mode MCP, подключение к Cursor и Claude Code, обязательные условия для качественного результата и реальные ограничения связки в 2026 году.

Что такое Figma MCP и зачем он нужен

Figma MCP (Model Context Protocol) -- это протокол, который позволяет AI-инструментам (Cursor, Claude Code) читать данные из Figma-файла напрямую: координаты, отступы, цвета, шрифты, переменные, Auto Layout структуру.

До появления MCP дизайнеры делали скриншоты или описывали компоненты текстом. Теперь AI сам считывает структуру макета и генерирует код на ее основе.

Figma MCP выпустила как отдельную бета-функцию в конце 2025 года. В 2026 году она доступна через Dev Mode без дополнительных плагинов.

Figma MCP интеграция с Cursor дает три ключевых преимущества: AI видит точную структуру вместо скриншота, токены подтягиваются напрямую без ручного переноса, генерация компонентов занимает минуты вместо часов.

Как подключить Figma MCP к Cursor: пошаговая настройка

Подключение занимает около 10 минут при первой настройке.

Шаг 1. Активировать Dev Mode в Figma

Открой нужный файл в Figma. В левом верхнем углу переключись в режим Dev Mode (иконка с угольником и кодом). Именно там, а не в обычном режиме, теперь доступна вкладка MCP.

Шаг 2. Запустить локальный MCP-сервер

В правой панели Dev Mode найди раздел MCP. Нажми "Start local server". Figma запустит локальный MCP-сервер на порту 3845. Убедись, что Figma открыта в десктопном приложении, а не в браузере -- локальный сервер работает только через десктоп.

Шаг 3. Подключить Cursor к MCP

В Cursor открой Settings -- MCP. Добавь новый сервер:

{
  "figma": {
    "command": "npx",
    "args": ["-y", "figma-mcp"],
    "env": {
      "FIGMA_API_KEY": "твой_токен"
    }
  }
}

Или используй прямое подключение к локальному серверу Figma:

{
  "figma-local": {
    "url": "http://localhost:3845/mcp"
  }
}

Шаг 4. Проверить подключение

В Cursor в режиме агента напиши: "Что ты видишь в моем Figma-файле?" Если MCP подключен правильно, агент опишет структуру открытого файла.

Если Cursor выдает ошибку перегрузки при работе с MCP -- подожди 2-3 минуты и повтори запрос. Это известная проблема при высокой нагрузке.

Обязательные условия для качественного результата

Figma в код AI работает хорошо только при правильной подготовке дизайна. Половина проблем с плохим кодом -- это не проблема AI, а проблема неподготовленного Figma-файла.

Auto Layout везде

Auto Layout в Figma -- это аналог flexbox в CSS. AI использует его для понимания структуры: как элементы располагаются относительно друг друга, какие отступы между ними, как они тянутся при изменении размера.

Без Auto Layout AI генерирует код с абсолютным позиционированием, который ломается на разных экранах.

Переменные для всех числовых значений

Цвета, отступы, размеры шрифтов, радиусы скруглений -- всё должно быть вынесено в переменные Figma (Variables). При экспорте через MCP переменные становятся дизайн-токенами, которые AI использует как ссылки, а не как захардкоженные значения.

Если переменные не настроены, AI вставит в код сырые HEX-коды и числа без структуры. Потом изменить цветовую схему будет почти невозможно.

Режим доступа к файлу

Файл Figma должен быть с доступом "Can view" или выше. MCP может работать и с приватными файлами через токен API, но для первого тестирования проще открыть общий доступ.

Генерация React-компонента через Cursor и Figma MCP

После подключения MCP процесс генерации выглядит так.

Шаг 1. Подготовить дизайн-токены

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

Проанализируй переменные из этого Figma-файла: [ссылка на фрейм]
Создай tokens.css с CSS-переменными для всех цветов, отступов и типографики

Cursor создаст файл токенов вроде:

:root {
  --brand-primary: #4F46E5;
  --brand-secondary: #818CF8;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --text-heading-1: 32px;
  --text-body: 16px;
}

Шаг 2. Сгенерировать компонент

Теперь давай задачу на компонент со ссылкой на конкретный фрейм:

Создай React-компонент из этого фрейма Figma: [ссылка]
Используй токены из tokens.css
Компонент должен быть адаптивным, использовать Tailwind классы

Шаг 3. Запустить и проверить

После генерации в терминале Cursor:

npm install
npm run dev

Открой localhost:3000 и сравни с оригинальным макетом.

Figma MCP плюс Claude Code: planning mode

Claude Code для figma cursor интеграции работает немного иначе, чем Cursor. Главная фишка -- "planning mode".

Перед тем как Claude Code начнет писать код, попроси его сначала составить план:

Посмотри на этот Figma-фрейм и составь план реализации компонента.
Задай уточняющие вопросы если нужно.
Не пиши код пока я не подтвержу план.

Такой подход значительно сокращает количество итераций. Claude Code заметит потенциальные проблемы (например, нестандартный шрифт или анимации, которые нужно описать отдельно) до того, как потратит время на генерацию кода.

Коммить результат в git каждый раз, когда получился хороший рабочий компонент. Это экономит время если следующая итерация пойдет не так.

Экспорт Figma Variables в JSON и дизайн-система в коде

Если у тебя большая дизайн-система с несколькими коллекциями переменных (цвета, типографика, отступы -- отдельно), есть более структурированный подход.

Экспорт через Dev Mode

В Figma Dev Mode можно экспортировать переменные напрямую в JSON без сторонних плагинов. Если коллекций несколько, получится несколько zip-архивов.

Объедини их в один мастер-файл через Cursor:

У меня есть несколько JSON-файлов с дизайн-токенами из Figma.
Объедини их в один tokens.json с четкой структурой: colors, typography, spacing, radii

Подача токенов AI перед генерацией компонентов

Ключевой лайфхак для Figma cursor интеграции: сначала "скормить" AI понимание структуры токенов в виде Markdown-сводки, и только потом просить строить компоненты.

Вот структура наших дизайн-токенов [вставь tokens.json]
Создай краткую Markdown-сводку: какие коллекции есть, как называются токены
Я хочу убедиться, что ты понимаешь нашу дизайн-систему перед генерацией кода

Если AI подтвердил правильную структуру -- просим генерировать компоненты. Если нет -- поправляем токены в Figma.

Tailwind и Figma: как настроить интеграцию

Для проектов на Tailwind CSS дизайн в код AI работает особенно удобно, потому что у Tailwind есть готовая структура конфига.

Создание tailwind.config из Figma-токенов

На основе этих дизайн-токенов из Figma создай tailwind.config.js
Замапь наши переменные на Tailwind: colors, spacing, fontSize, borderRadius

Результат:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          primary: '#4F46E5',
          secondary: '#818CF8',
        },
      },
      spacing: {
        'sm': '8px',
        'md': '16px',
        'lg': '24px',
      },
    },
  },
}

Теперь при генерации компонентов Cursor будет использовать классы bg-brand-primary и p-md вместо инлайн-стилей.

Реальные ограничения Figma MCP в 2026 году

Figma в код AI через MCP -- это прорыв, но у него есть честные ограничения. Знать их заранее -- значит не разочаровываться.

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

• Генерация новых компонентов из подготовленного макета
• Экспорт дизайн-системы и токенов
• Простые и средние по сложности фреймы
• Статические компоненты с базовой интерактивностью

Что работает плохо:

• Обновление существующего кода при изменении дизайна (MCP не видит текущий код)
• Мультифреймовые потоки (каждый фрейм нужно конвертировать отдельно, потом объединять вручную)
• Сложные анимации и микроинтеракции
• Компоненты с мобильными и десктопными вариантами одновременно

Проблема с переменными: MCP не всегда переносит Figma Variables напрямую в код. Если переменные не привязаны к правильным alias-коллекциям, AI получит сырые HEX-коды. Решение -- вручную переносить JSON с токенами или настраивать alias-коллекции в Figma перед экспортом.

Сильные стороны связки Figma и Cursor

• Дизайнеры могут отправлять код в продакшн без разработчика -- это не метафора, а реальный сценарий 2026 года
• Cursor Pro за $20/мес дает доступ к мощному агенту с Visual Editor для ручных правок
• Figma MCP активируется без плагинов -- только Dev Mode в официальном приложении
• Claude Code с planning mode дает более предсказуемый результат на сложных компонентах
• Экспорт Variables в JSON без сторонних инструментов наконец-то работает из коробки
• Visual Editor в Cursor позволяет поправить отступы и цвета напрямую без написания кода

Слабые стороны -- говорим честно

• Figma Variables не всегда корректно переносятся через MCP, требуется ручная настройка alias-коллекций
• При работе с несколькими аккаунтами Figma на одном компьютере MCP подключение может глючить -- лучше быть залогиненным только в одном аккаунте
• Мультифреймовые потоки (онбординг, многошаговые формы) нужно собирать вручную -- MCP не понимает связи между фреймами
• Результат сильно зависит от качества подготовки Figma-файла: нет Auto Layout -- нет нормального кода
• Для правки существующего кода при изменении дизайна связка бесполезна -- придется генерировать заново

Полные обзоры на VibeCoderz

• Cursor -- AI IDE для вайбкодинга
• Claude Code -- терминальный AI-кодер от Anthropic
• Каталог всех AI-инструментов для разработки
• Windsurf -- альтернатива Cursor с другим подходом

FAQ

Что такое Figma MCP простыми словами? Это способ подключить Figma к AI-инструментам (Cursor, Claude Code) так, чтобы они читали структуру макета напрямую. AI видит Auto Layout, отступы, цвета и переменные -- и генерирует код, который повторяет дизайн точнее, чем по скриншоту.

Нужен ли Cursor Pro для работы с Figma MCP? Базовая интеграция работает и на бесплатном плане, но для агентного режима с длинными задачами нужен Cursor Pro за $20 в месяц. Claude Code -- отдельный инструмент, подключается независимо от Cursor.

Почему Cursor генерирует плохой код из Figma? Чаще всего причина в неподготовленном файле: нет Auto Layout, нет переменных, или переменные не привязаны к alias-коллекциям. Исправь структуру в Figma -- качество кода вырастет в разы.

Как подключить Figma MCP к Claude Code? Claude Code подключается к MCP через конфиг ~/.claude/settings.json. Добавь секцию mcpServers с адресом локального Figma MCP сервера (localhost:3845) или настрой через Figma API-токен.

Figma в код -- это замена верстальщика? Для простых и средних компонентов -- да. Для сложных анимаций, нестандартных интерактивных паттернов и поддержки legacy-кода -- пока нет. Правильнее считать это инструментом, который ускоряет верстальщика в 3-5 раз или позволяет дизайнеру закрывать простые задачи самостоятельно.

Что лучше -- Figma MCP плюс Cursor или специализированные Figma-to-code SaaS? Для старта и прототипирования Cursor плюс MCP хватит. Для продакшн-воркфлоу с обновляемой кодовой базой, мультифреймовыми потоками и визуальным редактором лучше смотреть на специализированные инструменты типа Builder Fusion, хотя они дороже.

Глоссарий

MCP (Model Context Protocol) -- протокол для передачи данных от внешних инструментов к AI-агентам. Позволяет Cursor и Claude Code читать структуру Figma-файлов.

Dev Mode -- режим Figma, предназначенный для разработчиков. Содержит инспектор свойств, экспорт ассетов и MCP-сервер.

Auto Layout -- функция Figma, задающая поведение элементов внутри фрейма: аналог flexbox в CSS. Без него AI генерирует абсолютное позиционирование.

Design Tokens / Дизайн-токены -- переменные с базовыми значениями дизайн-системы (цвета, отступы, радиусы). В Figma -- Variables, в коде -- CSS-переменные или Tailwind конфиг.

Planning Mode -- режим работы Claude Code, при котором агент сначала составляет план и задает вопросы перед написанием кода. Снижает количество итераций.

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

Статья подготовлена командой VibeCoderz -- крупнейшей базы знаний по AI IDE и вайбкодингу в СНГ. Последнее обновление: апрель 2026.