Figma MCP Server

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

MCP-серверВыбор редакцииСредний риск

figma/mcp-server-guide

Установка

claude plugin install figma@claude-plugins-official

Плагин со скиллами и настройкой сервера.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Репозиторий содержит руководство по официальному MCP-серверу Figma, расширение для Gemini CLI и отдельные скиллы. По ссылке на фрейм или слой агент получает контекст дизайна: переменные, компоненты, раскладку и ассеты, а затем пишет код. С Code Connect сгенерированный код переиспользует реальные компоненты проекта. Удаленный сервер умеет создавать и менять фреймы, компоненты, переменные и auto layout в файлах Figma. В разделе лучших практик описано, как устроить файл, чтобы код получался чище.

Для кого. Для фронтенд-разработчиков и дизайнеров, которые переносят макеты Figma в код и обратно с помощью агента.

Подходит, если

  • Нужно сверстать экран по конкретному фрейму Figma
  • Нужно подтянуть токены и компоненты дизайн-системы в проект
  • Нужно, чтобы агент собрал или обновил макет прямо в Figma

Не подходит, если

  • Нет платного места Dev или Full: на Starter и местах View или Collab лимит в несколько вызовов в месяц
  • Макеты лежат не в Figma

Пример запроса к агенту

Сверстай этот экран по ссылке на фрейм Figma, используя наши компоненты из src/components

Ограничения

Нужен аккаунт Figma, вход через OAuth. Инструменты чтения ограничены по частоте, а на бесплатном плане и местах View или Collab вызовов очень мало. Запись на холст бесплатна только на время беты, скиллы тоже в бета-статусе. Figma ограничила работу с российскими пользователями, доступ из России без VPN не гарантирован.

Как отключить. В Claude Code выполните claude mcp remove figma или удалите плагин figma. В Gemini CLI: gemini extensions uninstall figma. В других клиентах удалите блок figma из конфигурации MCP.

MCP

Транспорт
http
Авторизация
OAuth

Проверка безопасности

  • Может изменять содержимое файлов Figma
  • Получает доступ к аккаунту через OAuth

Коротко о README

README начинается с лимитов на вызовы по тарифам и перечня возможностей. Затем идут инструкции для VS Code, Cursor, Claude Code, Gemini CLI и других клиентов с поддержкой Streamable HTTP. Описано, как передавать агенту ссылку на макет, какие скиллы лежат в репозитории, и дан большой раздел рекомендаций по структуре файлов и промптам.

Частые вопросы

Как указать агенту нужный макет?

Скопируйте в Figma ссылку на фрейм или слой и вставьте в запрос. Агент не открывает страницу, а берет из ссылки node-id.

Чем плагин лучше ручного подключения?

Плагин кроме настроек сервера ставит скиллы для реализации дизайна, Code Connect и правил дизайн-системы.

Выбор редакции

Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки

СкиллСредний риск123,8 тыс.
Выбор редакции

Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов

СкиллВысокий риск68 тыс.
Выбор редакции

Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой

СкиллСредний риск31,2 тыс.
Выбор редакции

MCP-сервер, который передает агенту упрощенные данные макета Figma по ссылке, чтобы тот сверстал экран точнее, чем по скриншоту

MCP-серверСредний риск15,9 тыс.