Figma запустила официальный MCP сервер — теперь AI-агент в Cursor или Claude Code видит ваш дизайн напрямую и генерирует код с учетом реальных переменных, компонентов и Auto Layout. Никаких скриншотов и описаний от руки.
400 000+ органических переходов за 3 месяца. Со-основатель GoBanana (231K пользователей, 12+ млн ₽ без рекламы) и NeuroScribe (65K пользователей). SEO/GEO-стратегии для AI-поисковиков, 1 700+ единиц контента, 17+ реализованных стратегий.
Об авторе →Плейбук основателя: как построить AI-нативный стартап в 2026
Полный перевод плейбука Anthropic об AI-нативных стартапах. Как ИИ переизобрёл четыре стадии пути основателя — Идея, MVP, Запуск и Масштабирование — и как использовать Claude, Claude Code и Claude Cowork на каждой из них, чтобы сжать кварталы в недели. С разбором ловушек, упражнениями и 18 ответами на частые вопросы.
Какая нейросеть лучше пишет код в 2026: честный тест Claude, DeepSeek и GPT
Коротко: в мае 2026 года для написания кода лидирует Claude Opus 4.7 по верифицированному SWE-bench Pro (64.3%), GPT-5.5 выигрывает в терминальных задачах (82.7% Terminal-Bench), а DeepSeek V4 — это лучший вариант, когда нужно сэкономить: в 6 раз деш…
Лучшие AI IDE в 2026: честный рейтинг Cursor, Windsurf, Claude Code и конкурентов
Cursor, Windsurf, Claude Code, Antigravity, Kiro, Zed — каждый заявляет, что он лучший AI редактор кода. Рынок за два года прошёл путь от автодополнения строк до параллельных агентов, которые самостоятельно пишут, тестируют и деплоят код. Выбирать ст…
Как подключить MCP сервер к Cursor и Claude: пошаговый гайд с командами
MCP сервер подключается через JSON-конфиг в одном из двух мест: для Cursor это ~/.cursor/mcp.json или .cursor/mcp.json в корне проекта, для Claude Desktop — ~/.claude/claude_desktop_config.json, для Claude Code — команда claude mcp add прямо в термин…
Как создать свой MCP сервер на Python за один вечер: гайд с примером
MCP сервер на Python пишется примерно за 50 строк кода. Официальный SDK от Anthropic настолько хорошо сделан, что рабочий инструмент для Claude Code или Cursor получается быстрее, чем настройка любого REST API.
Где найти MCP серверы: 6 каталогов и репозиториев с тысячами инструментов
MCP серверы — это расширения для Cursor, Claude Code, Windsurf и других AI-инструментов, которые дают им доступ к внешним сервисам: базам данных, GitHub, Notion, браузеру и ещё тысячам источников. К маю 2026 экосистема MCP насчитывает более 14 000 пу…
Figma запустила официальный MCP сервер — теперь AI-агент в Cursor или Claude Code видит ваш дизайн напрямую и генерирует код с учетом реальных переменных, компонентов и Auto Layout. Никаких скриншотов и описаний от руки.
В этом гайде разберем два варианта: официальный Figma MCP и community-альтернативу Framelink (14 000+ звезд на GitHub). Покажем команды подключения к Cursor и Claude Code, объясним чем они отличаются и какой выбрать под вашу задачу.
MCP (Model Context Protocol) — стандартный интерфейс, через который AI-агенты получают данные из внешних систем. Проще говоря: раньше вы описывали дизайн словами, теперь агент сам его читает.
Без MCP вы пишете: «кнопка синяя, скругление 8px, отступы 24px». С MCP агент получает структурированные данные из файла Figma — имена слоев, токены, Auto Layout, переменные цветов, компоненты. И генерирует код, который реально совпадает с вашим дизайном.
Тут важный нюанс из практики. Один из наших пользователей протестировал Figma MCP с Cursor на макете калькулятора: агент сам определил структуру, сгенерировал HTML, CSS и рабочий JavaScript с логикой кнопок — за несколько минут вместо нескольких часов верстки вручную. Дизайн перешел в работающий код, хотя 100% совпадение пикселей потребовало пары итераций через промпты.
Вопрос не в том, какой лучше. Они решают немного разные задачи.
Официальный Figma MCP — лучший выбор если:
Framelink — лучший выбор если:
На практике многие используют оба. Официальный — для первичного импорта дизайна и токенов. Framelink — для итераций внутри проекта. Они не конфликтуют, можно держать оба в конфиге одновременно.
Что касается качества кода: Framelink дает более «опрятный» результат в проектах с дизайн-системой. Официальный иногда генерирует произвольные значения типа leading-[22.126px] — это буквальная копия данных Figma. Если у вас настроены Code Connect и переменные, официальный MCP тоже выдает нормальный код. Но настройка Code Connect требует времени.
Их часто путают. Это разные инструменты с разными плюсами.
| Официальный Figma MCP | Framelink MCP | |
|---|---|---|
| Автор | Figma | Community (GLips) |
| GitHub | figma/mcp-server-guide | GLips/Figma-Context-MCP (14 500+ ⭐) |
| Тип | Remote (hosted) + Desktop | Local (stdio) |
| Аутентификация | OAuth через браузер | Figma API токен |
| Что отдает агенту | Готовый React + Tailwind код | Описательный JSON с данными дизайна |
| Запись в Figma | Да (write to canvas, бета) | Нет |
| Лимиты | 6 вызовов/мес на Starter; без лимита на Dev/Full | Нет лимитов |
| Node.js | Не нужен | Нужен (Node.js + npm) |
| Цена | Бесплатно (лимиты по плану) | Бесплатно |
Главное отличие в том, что именно получает агент. Официальный MCP отдает готовый код (React + Tailwind) — агент его копирует, иногда с произвольными значениями типа leading-[22.126px]. Framelink отдает описательные данные о макете — и агент строит код сам, используя ваши компоненты и паттерны проекта.
Максим: «Мы в VibeCoderz тестировали оба варианта. Для новых проектов, где нет кодовой базы — официальный MCP быстрее стартует. Для проектов с компонентами и дизайн-системой Framelink дает более чистый результат: агент не копирует чужие паттерны, а использует ваши.»
Figma рекомендует remote-вариант через плагин — это самый быстрый путь.
Шаг 1. Откройте Cursor, зайдите в Agent Chat и введите команду:
/install-mcp figmaCursor откроет страницу конфигурации. Нажмите Connect рядом с Figma, затем Open.
Шаг 2. В открывшемся браузере нажмите Allow access — это OAuth-авторизация к вашему Figma-аккаунту.
Шаг 3. Проверьте подключение в Cursor Settings > Tools and MCP. Figma должна появиться как активный инструмент с зеленым статусом.
Или через JSON-конфиг (для ручной настройки):
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "streamable-http"
}
}
}Добавьте это в cursor_mcp.json (Cursor Settings > Tools and MCP > Add new global MCP server).
Лайфхак из практики: убедитесь, что в файле Figma выбран режим can view для вашего аккаунта. И выделите нужный фрейм до того, как пишете промпт — MCP работает по выделению.
Figma выпустила отдельный плагин для Claude Code.
Шаг 1. В терминале с открытым Claude Code выполните:
claude plugin install figma@claude-plugins-officialШаг 2. После установки введите /plugin — откроется маркетплейс плагинов. Перейдите в Installed, выберите figma server и нажмите Enter.
Шаг 3. Авторизуйтесь: откроется внешняя страница, нажмите Allow access.
После этого в списке /plugin появится figma server: connected. Проверить активные MCP: команда /mcp.
Для desktop-версии (локальный сервер, enterprise-сценарии):
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcpНо desktop нужен только для специфических корпоративных случаев. Для большинства задач — remote.
Framelink требует Node.js и Figma API токен. Зато работает без лимитов и подходит для проектов с существующей кодовой базой.
В Figma: аккаунт > Settings > Security > Personal access tokens > Generate new token. Скопируйте токен — он показывается один раз.
Добавьте в настройки MCP (Cursor Settings > Tools and MCP):
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=ВАШ_ТОКЕН", "--stdio"]
}
}
}На Windows:
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=ВАШ_ТОКЕН", "--stdio"]
}
}
}Через переменную окружения (безопаснее — токен не попадает в историю shell):
{
"mcpServers": {
"Framelink MCP for Figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "ВАШ_ТОКЕН"
}
}
}
}{
"mcpServers": {
"framelink-figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "ВАШ_ТОКЕН"
}
}
}
}Добавьте это в .claude/settings.local.json внутри вашего проекта.
Лайфхак по токенам: если у вас несколько Figma-аккаунтов, при подключении desktop-версии оставайтесь залогинены только в основном. Иначе агент может путаться с правами доступа.
Вот как выглядит процесс на практике при подключенном MCP.
Открываете Figma, выбираете фрейм с нужным экраном. Копируете ссылку (правая кнопка > Copy link to selection). Переходите в Cursor, в режим Agent, и пишете промпт — просто вставляете ссылку и описываете задачу.
Cursor вызывает MCP-инструмент, загружает данные дизайна: структуру слоев, переменные, стили, компоненты. И начинает генерировать код — HTML/CSS или React, в зависимости от вашего проекта.
На это уходит 2-5 минут. Из них минуты полторы агент анализирует структуру, потом пишет код. Для макета средней сложности (трекинг-страница, форма, карточка товара) — получается работающий прототип.
Но не ждите идеального совпадения с первой попытки. Особенно если в макете есть сложные интерактивные элементы — progress bar, анимации, кастомные компоненты. Здесь начинается итерационная доработка: смотрите на результат, говорите агенту что именно не так, он правит.
Хороший прием для корректировки — скриншот. Делаете снимок браузера, перетаскиваете в чат и пишете: «progress bar не по макету, точки не на одной линии». Это точнее текстового описания. Агент видит визуальный контекст и правит конкретный элемент.
Ручная верстка такой страницы с нуля заняла бы несколько часов. С MCP — 5-15 минут вместе с итерациями. Даже если потом нужно еще поправить адаптивность или добавить state management, стартовая точка уже готова.
Оба MCP работают по одному принципу: вы копируете ссылку на фрейм или компонент из Figma и вставляете в промпт.
В Figma: правая кнопка на фрейм > Copy link to selection. Затем в Cursor или Claude Code:
Реализуй этот компонент: https://www.figma.com/file/...Агент вызовет MCP-инструмент, загрузит данные дизайна и сгенерирует код.
Перед генерацией — попросите резюме структуры. Особенно для дизайн-систем: попросите агента сначала отдать Markdown с описанием токенов и компонентов. Это позволяет убедиться, что он правильно понял контекст, прежде чем генерировать сотни строк кода.
Если агент пишет сырые HEX вместо токенов — это значит, что он потерял связь с переменными Figma. Явно укажите в промпте: «используй токены из переменных Figma, не хардкоди HEX-значения».
Скриншот помогает при доработке. Если агент сгенерировал компонент неточно — сделайте скриншот браузера и прикрепите его к следующему промпту с описанием, что именно не так. Это точнее, чем описывать текстом.
Для Auto Layout используйте Auto Layout. Если ваш макет использует обычные фреймы без Auto Layout — MCP передаст данные, но качество кода будет хуже. Используйте Auto Layout и переменные в Figma для лучшего результата.
Официальный MCP бесплатен, но с ограничениями:
| Figma план | Лимит вызовов MCP |
|---|---|
| Starter (бесплатный) | 6 вызовов в месяц |
| View / Collab seat | 6 вызовов в месяц |
| Dev seat | По лимитам REST API Tier 1 (посекундные) |
| Full seat | По лимитам REST API Tier 1 |
Для серьезной работы с дизайн-системой 6 вызовов в месяц хватит на один компонент. Framelink в этом смысле свободен — никаких лимитов, только Figma API rate limits (обычно не заметны при ручном использовании).
Официальный MCP добавил несколько инструментов, которых нет в Framelink:
Write to canvas (бета) — агент может создавать и редактировать элементы прямо в Figma: фреймы, компоненты, переменные, Auto Layout. Пока бесплатно в бета-периоде, потом станет платным.
Code to canvas — отправляете URL работающего веб-интерфейса, агент делает из него дизайн в Figma как редактируемые слои.
FigJam — генерация диаграмм архитектуры и ERD из промптов, кода или структурированных данных.
Code Connect — связывает компоненты Figma с реальными компонентами в кодовой базе. Когда настроено, агент получает реальные импорты и маппинг свойств вместо дефолтного React + Tailwind.
Framelink не умеет ни одного из этого — только читает. Но читает точнее для задачи генерации кода в существующем проекте
Отдельная история — работа с дизайн-системами. Это когда у вас есть библиотека компонентов в Figma с переменными цветов, типографики, отступов — и вы хотите, чтобы агент их использовал в коде, а не хардкодил значения.
Вот где часто ломается. Если агент не получил структуру токенов до генерации кода — он использует сырые HEX-коды. Например, вместо color-primary-500 пишет #3B82F6. Связь с переменными Figma теряется, и при следующем изменении цвета в Figma придется вручную обновлять код.
Правильная последовательность работы:
Этот порядок — сначала токены, потом компоненты — дает стабильно лучший результат. Агент работает в контексте вашей дизайн-системы, а не просто копирует числа.
Для официального Figma MCP эту проблему частично решает Code Connect. Но его настройка — отдельная работа: нужно прописать маппинг каждого дизайн-компонента к его коду. Зато после настройки агент получает реальные импорты: не <div className="btn">, а import { Button } from '@/components/ui'.
Figma MCP убирает один из самых неудобных шагов в дизайн-разработке — ручной перевод макета в код. Агент видит ваши переменные, компоненты, Auto Layout и генерирует код, который реально соответствует дизайну.
Официальный MCP (mcp.figma.com) — для тех, кто хочет запуститься быстро, плюс нужна запись в Figma. Framelink — для проектов с кодовой базой, где важно, чтобы агент использовал ваши паттерны, а не копировал автосгенерированный код.
Посмотрите каталог AI-инструментов для вайбкодинга — там подробные обзоры Cursor, Claude Code, Windsurf и других инструментов, которые работают с Figma MCP.
Если хотите разобраться, как выстроить рабочий дизайн-разработка пайплайн для своего проекта — запишитесь на консультацию к Максиму.
MCP (Model Context Protocol) — открытый стандарт для подключения AI-агентов к внешним источникам данных. Позволяет агенту «видеть» содержимое Figma, GitHub, баз данных и других систем.
Remote MCP — сервер запущен на стороне Figma (https://mcp.figma.com/mcp). Вам не нужно ничего устанавливать локально.
Desktop MCP — сервер запускается локально через приложение Figma Desktop. Адрес: http://127.0.0.1:3845/mcp.
Framelink — community MCP сервер (GLips/Figma-Context-MCP на GitHub). Работает локально через stdio, использует Figma REST API.
Design tokens / переменные — именованные значения дизайна (цвета, отступы, радиусы). В Figma создаются как Variables. Когда токены настроены, MCP передает их агенту, и тот использует их в коде вместо хардкоженных значений.
Auto Layout — механизм в Figma, аналог flexbox. Компоненты с Auto Layout корректнее переводятся в CSS.
Code Connect — функция Figma, связывающая дизайн-компоненты с кодом. При настройке агент получает реальные React-импорты вместо генерации с нуля.
stdio — способ запуска MCP сервера как локального процесса. Агент общается с ним через стандартный ввод/вывод.
Streamable HTTP — способ подключения к удаленному MCP по HTTP. Используется для официального remote-сервера Figma.
Можно ли использовать Figma MCP бесплатно?
Да. Официальный remote MCP бесплатен, но на бесплатном Figma Starter — только 6 вызовов в месяц. Framelink полностью бесплатен без лимитов, нужен только Figma API токен (он тоже бесплатный).
Нужно ли устанавливать Figma Desktop для MCP?
Для официального remote-варианта — нет, только браузер и OAuth. Desktop нужен только если вы используете desktop-версию сервера (enterprise-сценарии). Framelink тоже не требует desktop-приложения.
Почему агент генерирует код с leading-[22.126px] и странными значениями?
Это особенность официального Figma MCP — он отдает prescriptive-код, который агент копирует буквально. Если у вас есть переменные в Figma и Code Connect, код будет чище. Или попробуйте Framelink — он отдает descriptive-данные, агент строит код сам.
Работает ли MCP с Claude Code бесплатно?
Claude Code — платный инструмент (требует подписку Anthropic). MCP сервер Figma для него подключается бесплатно командой claude plugin install figma@claude-plugins-official.
Что выбрать: официальный Figma MCP или Framelink?
Для новых проектов с нуля — официальный, он быстрее стартует и умеет write to canvas. Для проектов с существующей кодовой базой и дизайн-системой — Framelink, он дает более чистый код в стиле вашего проекта. Можно использовать оба параллельно.
Почему Figma MCP не видит мой файл?
Убедитесь, что файл доступен для просмотра (View access), а не только для вас. Выделите нужный фрейм перед промптом — MCP работает по выделению. Если проблема с несколькими аккаунтами Figma, оставайтесь залогинены только в одном.
Нужен ли Node.js для официального MCP?
Нет. Remote-вариант официального MCP работает через HTTP, Node.js не нужен. Framelink требует Node.js + npm.
Обновлено: май 2026