Figma MCP Server
Официальный MCP-сервер Figma: код по выбранному фрейму, переменные и компоненты дизайн-системы, запись макетов прямо на холст
- 2 129 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Может изменять содержимое файлов Figma
- Получает доступ к аккаунту через OAuth
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/figma-mcp-serverОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Может изменять содержимое файлов Figma
- Получает доступ к аккаунту через OAuth
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Репозиторий содержит руководство по официальному MCP-серверу Figma, расширение для Gemini CLI и отдельные скиллы. По ссылке на фрейм или слой агент получает контекст дизайна: переменные, компоненты, раскладку и ассеты, а затем пишет код. С Code Connect сгенерированный код переиспользует реальные компоненты проекта. Удаленный сервер умеет создавать и менять фреймы, компоненты, переменные и auto layout в файлах Figma. В разделе лучших практик описано, как устроить файл, чтобы код получался чище.
Для кого. Для фронтенд-разработчиков и дизайнеров, которые переносят макеты Figma в код и обратно с помощью агента.
Подходит, если
- Нужно сверстать экран по конкретному фрейму Figma
- Нужно подтянуть токены и компоненты дизайн-системы в проект
- Нужно, чтобы агент собрал или обновил макет прямо в Figma
Не подходит, если
- Нет платного места Dev или Full: на Starter и местах View или Collab лимит в несколько вызовов в месяц
- Макеты лежат не в Figma
Пример запроса к агенту
Сверстай этот экран по ссылке на фрейм Figma, используя наши компоненты из src/componentsMCP
- Транспорт
- http
- Авторизация
- OAuth
Ограничения
Нужен аккаунт Figma, вход через OAuth. Инструменты чтения ограничены по частоте, а на бесплатном плане и местах View или Collab вызовов очень мало. Запись на холст бесплатна только на время беты, скиллы тоже в бета-статусе. Figma ограничила работу с российскими пользователями, доступ из России без VPN не гарантирован.
Как отключить. В Claude Code выполните claude mcp remove figma или удалите плагин figma. В Gemini CLI: gemini extensions uninstall figma. В других клиентах удалите блок figma из конфигурации MCP.
Частые вопросы
Как указать агенту нужный макет?
Скопируйте в Figma ссылку на фрейм или слой и вставьте в запрос. Агент не открывает страницу, а берет из ссылки node-id.
Чем плагин лучше ручного подключения?
Плагин кроме настроек сервера ставит скиллы для реализации дизайна, Code Connect и правил дизайн-системы.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыБесплатный двусторонний MCP-сервер для Figma: превращает дизайн в код с учетом фреймворка и возвращает код обратно на холст
Figma Console MCP
figma-console-mcp
MCP-сервер Figma для дизайн-систем в обе стороны: читает и записывает переменные, компоненты и стили, синхронизирует токены с кодом
MCP-сервер, который передает агенту упрощенные данные макета Figma по ссылке, чтобы тот сверстал экран точнее, чем по скриншоту
Figma To Code MCP — макет Figma в код
Figma To Code MCP
Figma в код через MCP: сервер отдает агенту макет в виде компактного YAML с именами свойств как в CSS, раскрытыми переменными и вынесенными в файл SVG
MCP-сервер сервиса F2C: по ссылке на узел Figma агент получает верстку на HTML, React или Tailwind и локальные картинки
MCP-сервер, который дает агенту читать и менять макеты Figma: цвета, типографику, компоненты, экспорт
Из блога
Коротко о README
README начинается с лимитов на вызовы по тарифам и перечня возможностей. Затем идут инструкции для VS Code, Cursor, Claude Code, Gemini CLI и других клиентов с поддержкой Streamable HTTP. Описано, как передавать агенту ссылку на макет, какие скиллы лежат в репозитории, и дан большой раздел рекомендаций по структуре файлов и промптам.