Figma MCP Server
Официальный MCP-сервер Figma: код по выбранному фрейму, переменные и компоненты дизайн-системы, запись макетов прямо на холст
Установка
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 и держится правил библиотеки
Скилл для фронтенд-дизайна: 23 команды, итерации в браузере и 61 правило поиска типичных огрехов AI-интерфейсов
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой
MCP-сервер, который передает агенту упрощенные данные макета Figma по ссылке, чтобы тот сверстал экран точнее, чем по скриншоту