Cursor + Figma в 2026: актуальная настройка для дизайнера

Актуально на 21 августа 2026 года. Cursor и официальный Figma MCP позволяют агенту читать структуру макета, переменные и компоненты, сопоставлять их с кодовой базой и вносить изменения в проект. Но это не кнопка «превратить Figma в production»: качество зависит от структуры файла, компонентов в коде, правил проекта и проверки результата.

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

Старый способ через сторонний пакет figma-developer-mcp и персональный API-токен больше не нужен. У Figma есть официальный MCP-сервер: удалённый и локальный в desktop-приложении. Figma рекомендует удалённый сервер https://mcp.figma.com/mcp: у него шире набор возможностей, обновления приезжают без локальной установки, а авторизация проходит через OAuth.

В Cursor проще всего поставить официальный Figma plugin. Он добавляет сервер и Agent Skills — инструкции, которые помогают агенту корректно читать дизайн, использовать компоненты и работать с canvas.

Шаг 1. Подготовить проект

До подключения Figma убедитесь, что проект запускается локально и у него есть понятные команды проверки. Для большинства web-проектов нужны Git и актуальная LTS-версия Node.js, но конкретный стек может быть другим.

git --version
node --version
npm --version

Не просите агента сразу «сверстать экран». Сначала откройте репозиторий и попросите найти:

существующие компоненты и паттерны страниц;
токены цвета, типографики, spacing и radius;
команды запуска, тестов, линтера и сборки;
ограничения фреймворка и правила accessibility.

Иначе агент может точно повторить картинку, но создать второй набор кнопок, цветов и отступов рядом с уже существующим.

Шаг 2. Добавить правила проекта

В Cursor есть два основных варианта. Для простых общих инструкций используйте AGENTS.md. Для правил с областью действия используйте файлы .mdc в .cursor/rules/. Обычный .md внутри .cursor/rules/ системой правил не считается.

# AGENTS.md

## UI
- Сначала ищи существующий компонент
- Используй токены из src/styles/tokens.css
- Не добавляй HEX и произвольные отступы
- Сохраняй семантику и keyboard navigation

## Проверка
- npm run lint
- npm test
- npm run build

Правила — это контекст, а не жёсткая гарантия. Линтеры, типы, тесты и review по-прежнему нужны.

Шаг 3. Подключить официальный Figma MCP

Актуальный путь в Cursor:

Откройте Command Palette: Cmd/Ctrl + Shift + P.
Откройте Chat и введите /add-plugin figma.
Подтвердите установку официального plugin.
Откройте Cursor Settings → Tools & MCP.
У Figma нажмите Connect и пройдите OAuth-авторизацию.

Удалённый сервер доступен на всех Figma seats и plans. Desktop MCP требует Dev или Full seat на платном плане и нужен в основном для специальных организационных сценариев. Не кладите персональные Figma-токены в репозиторий и не передавайте их агенту.

Что агент получает из Figma

По ссылке на файл или выбранный node официальный сервер может передать структурированный дизайн-контекст: иерархию, layout, компоненты, переменные, изображения и визуальный референс. Набор доступных действий зависит от клиента, прав и текущих инструментов сервера.

К августу 2026 года remote MCP умеет не только читать дизайн. В поддерживаемых клиентах агент может создавать и обновлять нативный контент в Figma, а также переносить live web-интерфейсы в редактируемые слои. Это отдельные write-сценарии: не смешивайте их с задачей реализации макета в коде.

Code Connect: когда он действительно помогает

Без Code Connect агент видит дизайн-компонент, но может не знать, какой компонент импортировать из вашего пакета. Code Connect связывает Figma library с реализацией в репозитории и передаёт эту связь в Dev Mode и Figma MCP.

Есть два режима:

Code Connect UI работает внутри Figma и подключается к GitHub. Это быстрый способ сопоставить компоненты и дать MCP ссылку на реальный код. В Inspect он показывает имя файла и компонента, но не кастомные snippets.
Code Connect CLI хранит mappings рядом с кодом, поддерживает property mappings и динамические примеры. Именно CLI нужен, если в Dev Mode должны отображаться точные snippets вашей дизайн-системы.

С 17 августа 2026 framework-specific parsers больше не получают обновления и поддержку. Для новых интеграций Figma рекомендует framework-agnostic template files .figma.ts: TypeScript-шаблон явно формирует snippet для нужного языка или фреймворка. Старые mappings можно перенести командой npx figma connect migrate.

Шаг 4. Передать дизайн агенту

Выберите в Figma frame, component или section и скопируйте link to selection. Хороший первый запрос описывает не только внешний вид, но и границы задачи:

Реализуй этот экран: [ссылка на Figma].

Сначала:
1. найди существующие компоненты и токены;
2. прочитай AGENTS.md и правила репозитория;
3. составь короткий план.

Затем реализуй экран без новых зависимостей.
Сохрани адаптивность и accessibility.
После изменений запусти lint, tests и build.

Если нужен точный результат, попросите агента сравнить реализацию со скриншотом Figma на целевых размерах viewport. Проверяйте не только пиксели: tab order, focus states, контраст, переполнение текста, loading/error states и поведение на узком экране не всегда видны в статичном frame.

Что MCP не решает

Неоднозначный дизайн. Если в макете нет состояний и адаптивности, агент их не узнает.
Плохая архитектура Figma. Случайные группы и дубли вместо компонентов дают слабый контекст.
Расхождение библиотек. Одинаковые названия не означают, что Figma и код синхронизированы.
Production-качество. MCP не заменяет тесты, code review, проверку accessibility и производительности.
Безопасность. Агент с доступом к терминалу и внешним системам требует тех же ограничений, что любой автоматизированный инструмент.

Коммит и деплой

Не просите агента слепо «закоммитить и запушить всё». Сначала просмотрите diff, убедитесь, что в нём нет секретов и лишних файлов, затем запустите проверки. GitHub Pages подходит для статических сайтов; способ публикации зависит от конфигурации репозитория и может использовать branch или GitHub Actions. Vercel и другие платформы обычно делают preview-deploy на каждый pull request, но условия бесплатных планов меняются — проверяйте их перед публикацией.

Короткий рабочий процесс

Подготовить работающий проект и команды проверки.
Описать правила в AGENTS.md или .cursor/rules/*.mdc.
Подключить официальный remote Figma MCP через plugin и OAuth.
Связать ключевые компоненты через Code Connect, если есть дизайн-система.
Передать точную ссылку на selection и ограничения задачи.
Сравнить визуально, проверить состояния, accessibility и адаптивность.
Просмотреть diff, запустить проверки и только потом публиковать.