MCP сервер для Figma: как AI начинает видеть ваш дизайн и генерировать точный код

Figma запустила официальный MCP сервер — теперь AI-агент в Cursor или Claude Code видит ваш дизайн напрямую и генерирует код с учетом реальных переменных, компонентов и Auto Layout. Никаких скриншотов и описаний от руки.

В этом гайде разберем два варианта: официальный Figma MCP и community-альтернативу Framelink (14 000+ звезд на GitHub). Покажем команды подключения к Cursor и Claude Code, объясним чем они отличаются и какой выбрать под вашу задачу.

Что такое MCP сервер и зачем он нужен для Figma

MCP (Model Context Protocol) — стандартный интерфейс, через который AI-агенты получают данные из внешних систем. Проще говоря: раньше вы описывали дизайн словами, теперь агент сам его читает.

Без MCP вы пишете: «кнопка синяя, скругление 8px, отступы 24px». С MCP агент получает структурированные данные из файла Figma — имена слоев, токены, Auto Layout, переменные цветов, компоненты. И генерирует код, который реально совпадает с вашим дизайном.

Тут важный нюанс из практики. Один из наших пользователей протестировал Figma MCP с Cursor на макете калькулятора: агент сам определил структуру, сгенерировал HTML, CSS и рабочий JavaScript с логикой кнопок — за несколько минут вместо нескольких часов верстки вручную. Дизайн перешел в работающий код, хотя 100% совпадение пикселей потребовало пары итераций через промпты.

Framelink vs официальный MCP: кому что подходит

Вопрос не в том, какой лучше. Они решают немного разные задачи.

Официальный Figma MCP — лучший выбор если:

• Начинаете новый проект с нуля, кодовой базы нет
• Нужна запись в Figma (write to canvas, FigJam-диаграммы)
• Работаете с Figma Make
• Хотите Code Connect с реальными компонентами

Framelink — лучший выбор если:

• Есть существующий проект со своими компонентами и соглашениями
• Важно, чтобы агент использовал ваши паттерны, а не копировал чужой код
• Нет Dev/Full seat в Figma и 6 вызовов в месяц — мало
• Работаете в корпоративной среде, где OAuth через браузер сложен

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

Что касается качества кода: Framelink дает более «опрятный» результат в проектах с дизайн-системой. Официальный иногда генерирует произвольные значения типа leading-[22.126px] — это буквальная копия данных Figma. Если у вас настроены Code Connect и переменные, официальный MCP тоже выдает нормальный код. Но настройка Code Connect требует времени.

Два варианта Figma MCP: официальный и Framelink

Их часто путают. Это разные инструменты с разными плюсами.

Главное отличие в том, что именно получает агент. Официальный MCP отдает готовый код (React + Tailwind) — агент его копирует, иногда с произвольными значениями типа leading-[22.126px]. Framelink отдает описательные данные о макете — и агент строит код сам, используя ваши компоненты и паттерны проекта.

Максим: «Мы в VibeCoderz тестировали оба варианта. Для новых проектов, где нет кодовой базы — официальный MCP быстрее стартует. Для проектов с компонентами и дизайн-системой Framelink дает более чистый результат: агент не копирует чужие паттерны, а использует ваши.»

Как подключить официальный Figma MCP к Cursor

Figma рекомендует remote-вариант через плагин — это самый быстрый путь.

Шаг 1. Откройте Cursor, зайдите в Agent Chat и введите команду:

/install-mcp figma

Cursor откроет страницу конфигурации. Нажмите 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 MCP к Claude Code

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 MCP к Cursor и Claude Code

Framelink требует Node.js и Figma API токен. Зато работает без лимитов и подходит для проектов с существующей кодовой базой.

Получить Figma API токен

В Figma: аккаунт > Settings > Security > Personal access tokens > Generate new token. Скопируйте токен — он показывается один раз.

Подключение к Cursor

Добавьте в настройки 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": "ВАШ_ТОКЕН"
      }
    }
  }
}

Подключение к Claude Code

{
  "mcpServers": {
    "framelink-figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "ВАШ_ТОКЕН"
      }
    }
  }
}

Добавьте это в .claude/settings.local.json внутри вашего проекта.

Лайфхак по токенам: если у вас несколько Figma-аккаунтов, при подключении desktop-версии оставайтесь залогинены только в основном. Иначе агент может путаться с правами доступа.

Cursor и Figma MCP: реальный сценарий работы

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

Открываете Figma, выбираете фрейм с нужным экраном. Копируете ссылку (правая кнопка > Copy link to selection). Переходите в Cursor, в режим Agent, и пишете промпт — просто вставляете ссылку и описываете задачу.

Cursor вызывает MCP-инструмент, загружает данные дизайна: структуру слоев, переменные, стили, компоненты. И начинает генерировать код — HTML/CSS или React, в зависимости от вашего проекта.

На это уходит 2-5 минут. Из них минуты полторы агент анализирует структуру, потом пишет код. Для макета средней сложности (трекинг-страница, форма, карточка товара) — получается работающий прототип.

Но не ждите идеального совпадения с первой попытки. Особенно если в макете есть сложные интерактивные элементы — progress bar, анимации, кастомные компоненты. Здесь начинается итерационная доработка: смотрите на результат, говорите агенту что именно не так, он правит.

Хороший прием для корректировки — скриншот. Делаете снимок браузера, перетаскиваете в чат и пишете: «progress bar не по макету, точки не на одной линии». Это точнее текстового описания. Агент видит визуальный контекст и правит конкретный элемент.

Ручная верстка такой страницы с нуля заняла бы несколько часов. С MCP — 5-15 минут вместе с итерациями. Даже если потом нужно еще поправить адаптивность или добавить state management, стартовая точка уже готова.

Как работать с Figma MCP после подключения

Оба 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 для лучшего результата.

Лимиты и цены по планам Figma

Официальный MCP бесплатен, но с ограничениями:

Для серьезной работы с дизайн-системой 6 вызовов в месяц хватит на один компонент. Framelink в этом смысле свободен — никаких лимитов, только Figma API rate limits (обычно не заметны при ручном использовании).

Что умеет официальный Figma MCP сверх чтения дизайна

Официальный MCP добавил несколько инструментов, которых нет в Framelink:

Write to canvas (бета) — агент может создавать и редактировать элементы прямо в Figma: фреймы, компоненты, переменные, Auto Layout. Пока бесплатно в бета-периоде, потом станет платным.

Code to canvas — отправляете URL работающего веб-интерфейса, агент делает из него дизайн в Figma как редактируемые слои.

FigJam — генерация диаграмм архитектуры и ERD из промптов, кода или структурированных данных.

Code Connect — связывает компоненты Figma с реальными компонентами в кодовой базе. Когда настроено, агент получает реальные импорты и маппинг свойств вместо дефолтного React + Tailwind.

Framelink не умеет ни одного из этого — только читает. Но читает точнее для задачи генерации кода в существующем проекте

Figma MCP и дизайн-система: как не потерять токены

Отдельная история — работа с дизайн-системами. Это когда у вас есть библиотека компонентов в Figma с переменными цветов, типографики, отступов — и вы хотите, чтобы агент их использовал в коде, а не хардкодил значения.

Вот где часто ломается. Если агент не получил структуру токенов до генерации кода — он использует сырые HEX-коды. Например, вместо color-primary-500 пишет #3B82F6. Связь с переменными Figma теряется, и при следующем изменении цвета в Figma придется вручную обновлять код.

Правильная последовательность работы:

1. Подключаете MCP к Cursor или Claude Code
2. Сначала просите агента прочитать и описать структуру переменных (токенов): «Опиши все переменные цветов, типографии и отступов из файла»
3. Агент выдает Markdown или JSON с описанием токенов
4. Проверяете — он правильно понял? Если да — идете дальше
5. Только потом просите сгенерировать компоненты: «Создай этот компонент используя токены из переменных, которые ты описал»

Этот порядок — сначала токены, потом компоненты — дает стабильно лучший результат. Агент работает в контексте вашей дизайн-системы, а не просто копирует числа.

Для официального 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.

FAQ

Можно ли использовать 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