Figma MCP Server: как передать контекст дизайна в Cursor, Windsurf, Claude и VS Code

Что такое MCP и зачем он нужен дизайнерам и разработчикам

MCP (Model Context Protocol) — открытый протокол, созданный Anthropic для обмена контекстом между большими языковыми моделями и внешними инструментами. В связке с Figma он позволяет ИИ-ассистенту получать данные о макетах: структуру слоёв, тексты, цвета, отступы, стили и даже экспортированные ассеты. Без MCP разработчику приходится вручную переносить описание дизайна в промпт — это долго, неточно и теряет половину деталей.

Figma MCP Server — это серверная часть, которая подключается к API Figma и отдаёт информацию о выбранном фрейме или странице по запросу. Клиентская часть — например, плагин в Cursor или VS Code — позволяет ИИ-модели «видеть» дизайн и использовать его при генерации кода. В результате контекст дизайна передаётся без копирования скриншотов и ручного описания каждой кнопки.

Протокол поддерживают редакторы Cursor, Windsurf, VS Code и такие приложения, как Claude Desktop. Настройка занимает 10–15 минут и требует только токен доступа к Figma и знание ID нужного файла.

Как работает передача контекста из Figma в код

Процесс выглядит так: MCP-сервер принимает запрос от клиента (редактора или ассистента), обращается к Figma API, получает JSON-описание выбранных элементов, преобразует его в структурированный текст или JSON-схему и возвращает модели. Модель на основе этих данных может писать CSS, HTML, React-компоненты или даже SwiftUI-код.

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

Основные сценарии использования

• Генерация вёрстки по макету: модель получает фрейм и выдаёт чистый HTML/CSS в стиле проекта.
• Создание UI-библиотек: на основе дизайн-системы Figma MCP формирует компоненты React или Vue.
• Проверка соответствия кода макету: разработчик просит ассистента сверить фактические стили с указанными в Figma.
• Обработка текстовых контентов: извлечение всех текстовых слоёв для локализации или контент-плана.
• Экспорт иконок и изображений: MCP может скачать нужные ассеты в указанную папку.

Какие инструменты поддерживают MCP на практике

На момент написания статьи поддержка MCP встроена в Cursor, Windsurf, VS Code (через расширение), а также в Claude Desktop. В каждом случае способ подключения немного отличается, но базовый принцип — указать команду запуска сервера и переменные окружения. Ниже таблица с типичными способами.

Важно: не все редакторы автоматически находят Figma MCP Server. Чаще всего нужно явно указать путь к исполняемому файлу или использовать пакет из npm (например, figma-mcp-server), который запускается как локальный процесс. Перед началом работы стоит проверить, что в проекте установлена минимальная версия Node.js — обычно 18 и выше.

Настройка Figma MCP Server в Cursor, Windsurf, Claude и VS Code

Общий алгоритм для всех сред такой:

1. Получить персональный токен доступа в Figma (Account Settings → Security → Personal Access Tokens).
2. Установить MCP-сервер глобально или в локальную папку проекта через npm.
3. Найти ID нужного файла или фрейма в Figma (он указан в URL после /file/).
4. В конфигурации редактора добавить запись о сервере с обязательными параметрами: command, args, env.

Ниже рассмотрены нюансы для каждой среды.

Cursor

В Cursor MCP-серверы прописываются в файле .cursor/mcp.json в корне проекта или в глобальных настройках. Пример блока для Figma:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-mcp-server"],
      "env": {
        "FIGMA_API_KEY": "ваш_токен",
        "FIGMA_FILE_ID": "айди_файла"
      }
    }
  }
}

После сохранения файла перезапустите Cursor, и в панели MCP появится активный сервер. Если сервер не запускается, проверьте, что путь к npx доступен в переменных окружения.

Windsurf

Windsurf использует аналогичный формат, но файл расположен в разделе «MCP Servers» в настройках. Можно указать несколько серверов для разных проектов. Удобно, что в интерфейсе виден статус подключения и последние ошибки — это помогает быстро отладить.

VS Code

Для VS Code нужно установить расширение «MCP Client» из маркетплейса. Затем в настройках расширения добавить параметр mcp.servers с той же структурой, что и в Cursor. После перезагрузки окна сервер появится в списке. В VS Code команда MCP: List Servers показывает все доступные подключения.

Claude Desktop

В приложении Claude Desktop достаточно открыть файл конфигурации (обычно claude_desktop_config.json в папке пользователя) и добавить блок mcpServers с тем же содержимым. После перезапуска приложения можно в любом чате запросить данные из Figma, обращаясь к инструменту figma_get_file_info или figma_get_node_styles.

Ограничения и подводные камни

Несмотря на удобство, у Figma MCP Server есть ограничения, о которых стоит знать до внедрения.

• Только платные тарифы Figma. Персональные токены доступны в любом плане, но API чтения данных может быть ограничен для бесплатных аккаунтов. Рекомендуется проверить доступность файла через API отдельно.
• Токен не должен попадать в общий репозиторий. Если проект хранится в публичном GitHub, злоумышленники смогут прочитать ваши макеты. Используйте переменные окружения и .gitignore.
• Пропускная способность. При работе с большими файлами или фреймами с тысячами слоёв ответ от API может занимать несколько секунд, а сам JSON — превышать лимиты контекста модели. Приходится разбивать макет на части.
• Зависимость от версии API. Figma периодически меняет структуру ответов, поэтому MCP-сервер может потребовать обновления. Устаревшие версии выдают ошибки или неполные данные.
• Нет поддержки плагинов и компонентов. MCP видит только элементы, доступные через REST API: фреймы, слои, тексты, стили. Плагины, переменные и компоненты с пропсами не всегда отображаются корректно.

Если в макете активно используются автолейауты, фреймы с переменными или нативные компоненты — передача контекста может терять часть структуры. В таких случаях лучше использовать экспорт через вспомогательный плагин, который собирает данные в HTML-разметку, либо добавлять ручные пояснения в промпт.

Сравнение с альтернативными способами передачи контекста

До появления MCP разработчики использовали несколько методик, и они по-прежнему актуальны для определённых задач.

Ручное описание — самый гибкий, но медленный метод. Скриншот помогает модели сформировать общее представление, но детали (цвета, отступы) часто «выдумываются». Экспорт через плагин — хорошая альтернатива, однако требует отдельного инструмента и не обновляется автоматически. MCP выигрывает за счёт автоматизации и прямой интеграции с ИИ-ассистентом.

В ситуациях, когда макет изменяется часто, а команда работает в Agile-цикле, MCP сокращает время на передачу актуального состояния. Если же проект статичен и изменения редки, достаточно разового экспорта.

Практические рекомендации по использованию MCP в команде

Чтобы внедрение было удачным, стоит выработать общие правила.

Во-первых, определите, какие именно данные нужны модели. Для вёрстки чаще всего хватает фреймов, стилей текста, цветов, отступов и градиентов. Доступ к переменным и компонентам требует более тонкой настройки сервера, поэтому сначала протестируйте на простом макете.

Во-вторых, создайте изолированный файл-эталон, который содержит тестовый фрейм с минимальным набором элементов. Это позволит быстро проверить работоспособность соединения и отладить ошибки без обращения к реальному проекту.

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

В-четвёртых, учитывайте лимиты контекста. Если макет занимает 3000+ слоёв, лучше передавать модель только конкретный фрейм или секцию, а не весь файл. Иначе вы получите ошибку превышения длины запроса.

Наконец, регулярно обновляйте MCP-сервер и следите за changelog Figma API. Иногда появляются новые поля или изменяются типы данных, что влияет на корректность работы сервера.

«MCP не заменяет понимание дизайн-системы, но он убирает рутину по переносу значений из макета в код. Это инструмент, который ускоряет процесс, а не решает все проблемы автоматически.»
Из опыта интеграции в продуктовой команде

Что в итоге выбрать и когда стоит отключить MCP

Figma MCP Server — практичный инструмент для команд, которые активно разрабатывают на базе макетов и хотят повысить точность работы ИИ-ассистентов. Он особенно полезен в Cursor, Windsurf, VS Code и Claude Desktop, так как встраивается в привычный рабочий процесс.

В то же время для разовых задач или очень сложных макетов с большим количеством кастомных плагинов MCP может оказаться избыточным. Если команда не готова следить за обновлениями и ограничениями токенов, проще использовать плагин для экспорта в HTML или просто делать скриншоты и описывать их словами. Проверьте, как MCP работает на вашем типовом файле, прежде чем вводить его в ежедневную практику.