Figma MCP Server — Figma

Figma MCP Server — Figma

figma
1.5k звёзд140 форков
Figma MCP Server — официальный сервер Model Context Protocol от команды Figma. Он передаёт AI-ассистентам контекст дизайна из Figma. Разработчики и дизайнеры используют его, чтобы AI мог анализировать макеты, извлекать переменные и компоненты, генерировать код и даже редактировать файлы Figma. Сервер работает как облачный сервис с балансировкой нагрузки и ограничениями на количество запросов в минуту в зависимости от тарифа. На бесплатном плане Starter доступно до 6 инструментальных вызовов в месяц. Владельцы Dev- или Full-мест на тарифах Professional, Organization и Enterprise получают стандартные лимиты Figma API.
ДизайнAI и машинное обучениеПродуктивностьFigma
Подключить MCPОткрыть на GitHub
Подключение

Подключить Figma MCP Server — Figma

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

1

Способ подключения

2

Куда подключить

3

Скопируйте и проверьте

Claude

Official Figma remote MCP server with OAuth.

  1. 1.Получите endpoint и токен доступа, если он требуется.
  2. 2.Добавьте remote MCP endpoint в Claude.
  3. 3.Проверьте подключение в списке доступных инструментов.
json
{
  "mcpServers": {
    "figma-mcp": {
      "url": "https://mcp.figma.com/mcp",
      "transport": "http"
    }
  }
}

Official docs include Claude Code, Codex, Cursor, VS Code, and Xcode setup.

Claude Code plugin and Codex app plugin are preferred paths where available.

Инструкция собрана из данных карточки и пока не отмечена как проверенная редакцией. Сверьте команду с README источника и не передавайте лишние права или секреты.

Как оценить Figma MCP Server — Figma

Figma MCP Server — Figma относится к Дизайн, AI и машинное обучение, Продуктивность, Figma. Ниже собраны проверяемые признаки, по которым его можно сравнить с другими серверами каталога.

Происхождение
Проект сообщества
Лицензия
Не указана
Реализация
JavaScript
Транспорт
streamable-http

Что проверить перед выбором

  • Изучите README, открытые issues и историю последних изменений в репозитории.
  • Уточните воспроизводимый способ установки и удаления сервера.
  • Ограничьте доступ MCP-сервера только нужными файлами, API и переменными окружения.

Карточка отредактирована 20.07.2026.

Автоматическая проверка источника ещё не выполнена. Внешних источников в карточке: 1.

Характеристики

Общее

  • СтатусСообщество
  • Разработчикfigma

Технологии

  • Языки
    JavaScript
  • Транспорт
    streamable-http

Описание

Возможности

  • Создавать и изменять элементы на холсте Figma: фреймы, компоненты, переменные, Auto Layout. Функция доступна только через удаленный сервер.
  • Генерировать код по выбранным фреймам. Можно превратить дизайн в React, HTML/CSS или другие форматы.
  • Получать контекст дизайна: переменные, компоненты, структуру слоёв и макетов. Данные подгружаются напрямую в среду AI.
  • Использовать Code Connect — AI обращается к реальным компонентам из вашей кодовой базы, что улучшает качество сгенерированного кода.
  • Преобразовывать веб-страницы в Figma-дизайн (функция внедряется). AI может снять скриншот и превратить его в слои Figma.
  • Работать с дизайн-системой как с источником истины. AI автоматически применяет существующие стили и токены.
  • Получать информацию о фреймах, страницах и элементах файла Figma для анализа и рефакторинга.

Как подключить

1. Получите персональный токен доступа Figma. Зайдите в настройки аккаунта, раздел «Личные токены доступа», создайте новый токен с правами на чтение файлов и (опционально) на запись.

2. Отдельная установка сервера не требуется. Figma MCP Server — это облачный сервис, доступный по HTTPS. Настройте MCP-клиент на использование удалённого сервера Figma.

3. Пример конфигурации для Claude Desktop. Добавьте в файл claude_desktop_config.json следующий блок. Замените ВАШ_ТОКЕН на полученный токен.

{ "mcpServers": { "figma": { "command": "npx", "args": ["@figma/mcp-server"], "env": { "FIGMA_ACCESS_TOKEN": "ваш_токен" } } } }

4. Перезапустите Claude Desktop. После перезапуска AI сможет вызывать инструменты Figma MCP Server.

Альтернативный способ — указать URL удалённого сервера, если ваш клиент поддерживает streamable-HTTP. Пример для клиентов, принимающих remote MCP серверы:

{ "mcpServers": { "figma": { "url": "https://mcp.figma.com/v1", "headers": { "Authorization": "Bearer ваш_токен" } } } }

Подробнее читайте в официальной документации Figma.

Примеры запросов

  • «Преобразуй текущий фрейм в код React. Используй Code Connect с репозиторием проекта.»
  • «Извлеки все переменные из файла дизайн-системы и покажи их в виде таблицы.»
  • «Создай новый компонент Button на основе стилей из библиотеки и добавь его в файл.»
  • «Импортируй страницу https://example.com как Figma-дизайн и помести в новый фрейм.»

Технические детали

Язык: JavaScript
Транспорт: streamable-http (удалённый сервер)
Лицензия: Figma Developer Terms (бесплатно для бета-версии, планируется платная модель для функции записи на холст)
Совместимые клиенты: Claude Desktop, VS Code, JetBrains IDE, универсальные MCP-клиенты

Поделиться