DevTrends Logo

Как подружить Figma с вашим IDE через протокол MCP

24 Apr, 2026
⭐ 1,256 🔱 116 👥 22

Знакомая история: открываешь макет в Figma, начинаешь переносить стили в код, и тут понимаешь, что отступы «на глаз» не совпадают, а названия цветов в проекте совсем другие. Приходится постоянно переключаться между вкладками браузера и редактором кода. Ребята из Figma решили, что пора это прекратить, и выкатили свой сервер для Model Context Protocol (MCP).

Что это вообще такое

Если вы пропустили хайп вокруг MCP, то вкратце: это открытый протокол от Anthropic, который позволяет ИИ-ассистентам (вроде Claude, GitHub Copilot или Cursor) напрямую общаться с внешними инструментами.

Репозиторий figma/mcp-server-guide — это не просто документация, а полноценный мост. Он дает вашему ИИ-агенту «глаза» внутри Figma-файлов. Теперь нейронка не гадает, какой там border-radius, а запрашивает точные данные через API.

Чем это полезно на практике

Самое крутое здесь — контекст. Когда вы просите ИИ «напиши компонент карточки как в дизайне», он обычно выдает что-то среднее по больнице. С MCP-сервером агент получает структуру слоев, переменные и даже скриншоты конкретных узлов.

Генерация кода из фреймов

Вы копируете ссылку на фрейм в Figma, вставляете её в чат Cursor или Copilot и говорите: «Реализуй это на React + Tailwind». Агент через сервер вытягивает get_design_context и пишет код, который максимально близок к оригиналу. Кстати, по умолчанию он выдает связку React + Tailwind, но никто не мешает попросить Vue или обычный CSS.

Работа с дизайн-токенами

Инструмент get_variable_defs вытаскивает все переменные: цвета, отступы, типографику. Это спасает от хардкода. Агент видит, что у вас в Figma используется переменная Primary/Button-Active, и может сопоставить её с вашим theme.colors.primary в коде.

Обратная связь: запись в Figma

Это пока в бете, но функция use_figma позволяет агенту самому создавать или менять элементы на холсте. Например, можно попросить: «Создай в файле страницу с набором иконок из моей папки assets». И он это сделает.

Как это завести у себя

Настройка зависит от того, чем вы пользуетесь. Для VS Code понадобится установленный GitHub Copilot.

В VS Code нужно нажать ⌘ Shift P, найти MCP: Add Server, выбрать HTTP и вставить адрес: https://mcp.figma.com/mcp. После этого в конфиге появится такая запись:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Для Cursor всё еще проще — там есть встроенный плагин. Достаточно написать в чате /add-plugin figma.

Тонкие моменты и ограничения

Figma — коммерческий продукт, так что без лимитов не обошлось. Если вы на бесплатном тарифе Starter или у вас роль View/Collab на платном, вам дадут всего 6 вызовов инструментов в месяц. Этого хватит только чтобы «потыкать палочкой».

Для нормальной работы нужен Dev или Full seat на тарифах Professional, Organization или Enterprise. Там лимиты соответствуют Tier 1 их REST API, чего вполне хватает для ежедневной разработки.

Интересная деталь: функции записи на холст (write to canvas) сейчас бесплатны, пока идет бета-тест, но позже Figma планирует сделать их платными на основе потребления.

Как выжать максимум из связки

Чтобы ИИ не тупил, Figma советует придерживаться простых правил в макетах:

  • Использовать Auto Layout (это помогает агенту понять логику верстки).
  • Называть слои по-человечески (вместо Group 452 лучше SubmitButton).
  • Использовать компоненты.

Если у вас уже есть готовая библиотека компонентов в коде, обязательно посмотрите в сторону Code Connect. Это штука, которая связывает ID компонента в Figma с путем к файлу в вашем репозитории. Тогда агент не будет изобретать велосипед, а просто импортирует нужный Button из вашей библиотеки.

Стоит ли пробовать

Если вы работаете в продуктовой команде и Figma — ваш основной источник правды, то однозначно да. Это сильно сокращает время на рутинную верстку «пиксель в пиксель».

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

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

Проект на GitHub