MCP-сервер Figma (Model Context Protocol) создает прямое соединение между вашими дизайн-файлами Figma и кодирующими агентами, такими как Claude Code и Cursor. Вместо ручного перевода дизайнов в код — проверки значений отступов, копирования hex-цветов, воссоздания структуры компонентов — кодирующий агент читает ваш файл Figma напрямую и генерирует код, который соответствует вашей дизайн-системе.
MCP-соединение двунаправленное. Кодирующие агенты читают данные дизайна из Figma (компоненты, переменные, структуру макета). Они также могут записывать обратно на холст — передавая закодированные состояния, адаптивные варианты и реализованные экраны как редактируемые слои Figma для проверки дизайнером. Это полностью устраняет традиционное узкое место передачи дизайна.
Ключевой вывод
Настройка занимает менее 10 минут, ничего не стоит (MCP бесплатен во время бета-тестирования) и немедленно трансформирует рабочий процесс от дизайна к коду. Кодирующий агент видит контекст вашей дизайн-системы — компоненты, цвета, токены отступов — и генерирует соответствующий код. Больше не нужно угадывать значения отступов или приблизительно определять цвета по скриншотам. MCP-сервер — это мост между инструментами дизайна и редакторами кода, который команды разработки продуктов хотели получить уже десять лет.
Понимание архитектуры MCP
MCP (Model Context Protocol) — это открытый стандарт, созданный Anthropic, который позволяет AI-агентам подключаться к внешним источникам данных. Это тот же протокол, который обеспечивает соединения между Claude и такими инструментами, как Google Drive, Slack и GitHub. MCP-сервер Figma предоставляет доступ к вашим дизайн-файлам через этот протокол, делая их читаемыми для любого совместимого с MCP кодирующего агента.
| Компонент | Что делает | Кто предоставляет |
|---|---|---|
| Figma MCP Server | Предоставляет данные дизайна через протокол MCP | Figma (размещен на mcp.figma.com/mcp) |
| Кодирующий агент (клиент) | Читает данные дизайна и генерирует код | Claude Code, Cursor, Windsurf и др. |
| Аутентификация | OAuth через аккаунт Figma | Ваш логин Figma |
| Предоставляемые данные | Компоненты, переменные, стили, макет | Ваши файлы Figma |
| Доступ на запись | Отправка закодированных состояний обратно на холст | Через навык /figma-use |
Настройка: Claude Code (5 минут)
Шаг 1: Откройте терминал и перейдите в директорию вашего проекта.
Шаг 2: Запустите Claude Code с настроенным MCP-сервером. Добавьте MCP-сервер Figma в конфигурацию Claude Code (обычно в ~/.claude/mcp_servers.json или .mcp.json вашего проекта):
Шаг 3: Когда Claude Code впервые подключится к MCP-серверу Figma, вам будет предложено пройти аутентификацию через OAuth — войдите с вашим аккаунтом Figma. Это предоставит доступ на чтение к вашим дизайн-файлам.
Шаг 4: Протестируйте соединение, попросив Claude Code описать файл Figma: "Прочитай файл Figma по адресу [вставить URL файла Figma] и опиши структуру его компонентов." Если он возвращает названия компонентов, переменные и информацию о макете, соединение работает.
Настройка: Cursor (5 минут)
Шаг 1: Откройте настройки Cursor → MCP Servers.
Шаг 2: Добавьте новый MCP-сервер с URL: https://mcp.figma.com/mcp
Шаг 3: Пройдите аутентификацию через OAuth при появлении запроса — тот же логин Figma, что и выше.
Шаг 4: В AI-чате Cursor сошлитесь на ваш файл Figma: "Прочитай дизайн по адресу [URL Figma] и сгенерируй React-компонент для секции заголовка, используя Tailwind CSS." Cursor читает контекст дизайна и генерирует соответствующий код.
📬 Получаете пользу от этого?
Одна практическая AI-идея в неделю. Плюс бесплатный набор промптов при подписке.
Подписаться бесплатно →Какие данные предоставляет MCP-сервер
Понимание того, что кодирующий агент может "видеть", поможет вам писать лучшие промпты и организовывать ваши файлы Figma для читаемости MCP:
| Тип данных | Что предоставляется | Как кодирующие агенты используют это |
|---|---|---|
| Компоненты | Название, свойства, варианты, экземпляры | Сопоставляется с библиотеками компонентов кода |
| Цветовые переменные | Название, hex-значение, коллекции | Сопоставляется с CSS-переменными или конфигурацией Tailwind |
| Стили текста | Шрифт, размер, вес, высота строки | Сопоставляется с классами типографики |
| Отступы | Значения padding, gap, margin | Сопоставляется с токенами отступов |
| Макет | Направление автомакета, выравнивание, перенос | Сопоставляется со свойствами flexbox/grid |
| Иерархия слоев | Отношения родитель-ребенок | Сопоставляется со структурой DOM |
Практический вывод: чем лучше вы называете элементы в Figma, тем лучше кодирующий агент их понимает. "Button/Primary/Large" четко сопоставляется с компонентом кода. "Frame 147" не говорит агенту ничего полезного. Это тот же принцип, что и подготовка к Design Agent — хорошо организованные дизайн-системы производят лучший AI-результат независимо от того, занимается ли AI дизайном или кодированием.
Двунаправленный рабочий процесс на практике
Истинная сила MCP заключается не только в чтении из Figma — это возможность обратной записи, которая замыкает цикл. Когда разработчик реализует крайние случаи, которые дизайнер не специфицировал (состояния ошибок, состояния загрузки, пустые состояния, адаптивные точки останова), эти реализации могут быть переданы обратно на холст Figma как редактируемые фреймы. Дизайнер просматривает фактические закодированные состояния без переключения на предварительный просмотр кода.
Этот рабочий процесс устраняет наиболее распространенный источник трения между дизайном и разработкой: разрыв между "что было спроектировано" и "что было построено". С MCP обе стороны работают с одним источником истины, и изменения распространяются двунаправленно. Подробный пошаговый рабочий процесс описан в нашем руководстве по Figma + Claude Code.
Для лучших промптов при использовании подключенных к MCP агентов — будь то для чтения дизайнов или генерации кода — бесплатный Оптимизатор промптов добавляет структуру, которая производит более точный результат. Для одноклик-оптимизации внутри ChatGPT, Claude и Gemini, TresPrompt приносит это прямо в вашу боковую панель.
Часто задаваемые вопросы
Бесплатен ли MCP-сервер?
Да — MCP-сервер бесплатен в период бета-тестирования. AI-кредиты не расходуются на MCP-соединения. Figma не объявила цены на MCP после бета-периода, но расходы на серверную инфраструктуру минимальны (это доступ на чтение, а не вычисления), поэтому вероятно, что он останется бесплатным или очень дешевым.
Работает ли MCP с инструментами, отличными от Claude Code и Cursor?
Да — любой совместимый с MCP агент может подключиться. Это включает Windsurf, Cline и другие инструменты, поддерживающие протокол MCP. URL сервера (https://mcp.figma.com/mcp) одинаков независимо от того, какой клиент подключается.
Может ли MCP читать любой файл Figma, к которому у меня есть доступ?
Да — MCP наследует разрешения вашего аккаунта Figma. Если вы можете просматривать файл в Figma, MCP может его читать. Если у вас нет доступа, MCP не может его читать. Это означает, что командные файлы, общие файлы и ваши личные файлы — все доступны через MCP.
Есть ли риск того, что кодирующий агент изменит мой файл Figma?
Возможность обратной записи включается по желанию и использует специальный навык (/figma-use). Агент не будет изменять ваш файл, если явно не получит указание передать закодированные состояния обратно на холст. Доступ на чтение — по умолчанию; доступ на запись требует преднамеренного вызова. Даже с доступом на запись агент создает новые фреймы, а не изменяет существующие, поэтому ваши оригинальные дизайны сохраняются.
Стоит ли настраивать MCP, если я не программирую?
Если вы дизайнер, который не программирует, MCP имеет ограниченную прямую ценность — он в первую очередь предназначен для кодирующих агентов, которые читают ваши дизайны. Однако понимание того, как работает MCP, поможет вам более эффективно сотрудничать с разработчиками, которые его используют. Вы также можете экспериментировать, подключив Claude.ai к вашим файлам Figma для анализа дизайна, исследований и генерации документации (даже без написания кода).
Раскрытие информации: Некоторые ссылки в этой статье являются партнерскими ссылками. Мы рекомендуем только те инструменты, которые мы лично тестировали и регулярно используем. Ознакомьтесь с нашей полной политикой раскрытия информации.