Figma Edit MCP

Figma Edit MCP

neozhehanMIT
4 звёзд1 форков
Figma Edit MCP соединяет AI-ассистентов с редактором Figma. Сервер читает, создаёт и изменяет элементы дизайна через Model Context Protocol. Разработчики и дизайнеры автоматизируют рутину: заменяют текст в десятках слоёв, правят стили, управляют переменными. AI работает вместо человека во всех операциях, требующих внимания к деталям. В основе сервера три принципа: безопасность, чистота и скорость. Он проверяет каждое действие — не даёт удалить переменную, если на неё ссылаются другие элементы. Batch-операции проходят без пропуска узлов. То, на что раньше уходили часы, AI делает за секунды.
ДизайнFigma
Подключить MCPОткрыть на GitHub
Подключение

Подключить Figma Edit 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-edit-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 Edit MCP

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

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

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

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

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

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

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

Общее

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

Технологии

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

Описание

Возможности

  • Читает данные из Figma: получает информацию о слоях, компонентах, стилях и переменных.
  • Создаёт новые элементы дизайна — фреймы, текстовые блоки, фигуры, компоненты.
  • Массово заменяет текст в нескольких слоях или компонентах одной командой.
  • Изменяет свойства элементов: цвет, размер, положение, заливку, толщину обводки.
  • Применяет overrides для экземпляров компонентов.
  • Управляет переменными: создаёт, редактирует и удаляет с проверкой целостности ссылок.
  • Работает с дизайн-системами: библиотеки компонентов и стили.
  • Выполняет несколько действий одной командой — batch-операции.

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

Подключение состоит из трёх шагов: настройка MCP-сервера в AI-клиенте, запуск WebSocket-моста и установка плагина в Figma.

1. Добавьте сервер в конфигурацию MCP. Пример для Claude Desktop и других клиентов:

{ "mcpServers": { "FigmaEdit": { "command": "npx", "args": ["-y", "figma-edit-mcp"] } } }

2. Запустите WebSocket-мост. Он соединяет MCP-сервер с плагином в Figma. Выполните в терминале:

npx -y --package figma-edit-mcp figma-edit-mcp-socket

3. Установите плагин в Figma. Скачайте пакет из npm в любую удобную папку:

npm install figma-edit-mcp

В десктопном приложении Figma откройте меню Plugins → Development → Import plugin from manifest… и укажите путь к файлу manifest.json внутри папки пакета.

4. Перезапустите AI-клиент. После перезапуска ассистент сможет выполнять команды в Figma.

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

  • «Покажи список всех компонентов на текущей странице и их свойства.»
  • «Найди все текстовые слои со шрифтом Inter Regular и замени их на Roboto Regular.»
  • «Создай новый фрейм размером 1440×900, залей его цветом #FFFFFF и добавь текст «Заголовок» по центру.»
  • «Проверь, не используется ли переменная primary-color в других компонентах, и удали её.»

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

  • Язык: TypeScript
  • Транспорт: stdio (стандартный ввод-вывод)
  • Лицензия: MIT
  • Совместимость: Claude Desktop, Claude Code, Cursor, GitHub Copilot (VS Code), Google Antigravity, LM Studio

Поделиться