Figma UI MCP

Figma UI MCP

TranHoaiHungMIT
206 звёзд43 форков
figma-ui-mcp — это двусторонний мост между AI-ассистентами и Figma. Сервер запускает плагин в Figma Desktop. Через него ИИ рисует интерфейсы на холсте и читает готовые макеты обратно. Для работы не нужен API-ключ Figma. Все данные остаются на вашем компьютере. Сервер создаёт локальный HTTP-сервер на порту 38451. Figma Desktop через плагин опрашивает этот сервер (long polling), задержка не превышает 100 мс. Требуется Figma Desktop. Веб-версия Figma не поддерживает локальный доступ к localhost.
ДизайнAI и машинное обучениеFigma
Подключить MCPОткрыть на GitHub
Подключение

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

Выберите способ запуска и свой 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-ui-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 UI MCP

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

Происхождение
Проект сообщества
Лицензия
MIT
Реализация
JavaScript
Транспорт
stdio

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

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

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

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

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

Общее

  • СтатусСообщество
  • РазработчикTranHoaiHung
  • ЛицензияMIT

Технологии

  • Языки
    JavaScript
  • Транспорт
    stdio

Описание

Возможности

  • Рисовать фреймы, фигуры, текст и связи через вызов figma_write. Размеры и позиции задаёте кодом.
  • Читать структуру макета: дерево узлов, цвета, типографику, названия слоёв — команда figma_read.
  • Делать скриншоты фреймов и передавать их AI для анализа.
  • Проверять соединение между сервером и плагином через figma_status.
  • Получать справку по API прямо в чате через figma_docs.
  • Генерировать дизайн-токены: цвета, шрифты, отступы. figma_rules выводит их в формате, готовом для вёрстки.
  • Работать с несколькими файлами Figma одновременно. Каждой вкладке присваивается sessionId.

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

  1. Установите сервер одной командой:
npx -y figma-ui-mcp
  1. Откройте Figma Desktop. Запустите плагин figma-ui-mcp в нужном файле.
  2. Добавьте конфигурацию в ваш MCP-клиент. Пример для Claude Desktop:
{ "mcpServers": { "figma-ui-mcp": { "command": "npx", "args": ["-y", "figma-ui-mcp"] } }}
  1. Перезапустите клиент. В чате появятся инструменты figma_write, figma_read и другие.

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

  • «Нарисуй экран логина. Вызови figma_write. Создай фрейм 400x600 с заголовком, двумя полями ввода и кнопкой.»
  • «Прочитай первый фрейм на странице. Вызови figma_read и покажи все слои и их размеры.»
  • «Найди в макете все цвета, которые не входят в палитру дизайн-системы. Используй figma_rules для генерации токенов.»
  • «Сравни шрифты в макете со стандартными токенами. Выведи расхождения.»

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

  • Язык: JavaScript (Node.js)
  • Транспорт: stdio (MCP)
  • HTTP-сервер: localhost:38451
  • Лицензия: MIT
  • Разработчик: TranHoaiHung
  • Релиз: 2024
  • Звёзды на GitHub: 206
  • Совместимые клиенты: Claude Desktop, Cursor, VS Code Copilot, Windsurf, Zed, Antigravity
  • Требования: Node.js 18+, Figma Desktop

Поделиться