Claude ИИ-агенты общаются с Figma MCP

Предоставьте вашим ИИ-агентам возможность читать, анализировать и изменять дизайны Figma.

Установка из этого Git-репозитория

Этот форк доступен для Codex, Claude Desktop, Claude Code, Cursor, Windsurf, Cline, Roo Code и любого клиента, поддерживающего локальные stdio MCP-серверы.

Codex:

codex plugin marketplace add Desrid/desrid-html-to-figma --ref main
codex plugin add desrid-html-to-figma@desrid-html-to-figma

Универсальный MCP-клиент: используйте корневой .mcp.json или настройте команду из GitHub:

{
  "mcpServers": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": [
        "--yes",
        "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz",
        "desrid-html-to-figma-server"
      ]
    }
  }
}

Claude Desktop: откройте desrid-html-to-figma.dxt из GitHub Releases.

Всем клиентам также понадобится локальный плагин разработки Figma и WebSocket-мост. См. руководство по установке для кроссячей или руководство по Codex.

Работает с вашими любимыми агентными инструментами:

• Claude Desktop

• Claude Code

• Cursor

• Antigravity

• Windsurf

• VS Code + GitHub Copilot

• Cline

• Roo Code

Related MCP server: figma-mcp-write-server

👩🏽💻 Для кого это

UX/UI-команды

Автоматизируйте повторяющиеся задачи в дизайне и сохраняйте единый стиль бренда без ручной работы:

• Автоматический аудит доступности - Быстрое обнаружение и исправление проблем с контрастностью

• Одновременное обновление стилей - Изменяйте цвета, типографику или интервалы во всём документе одной командой

• Анализ визуальной иерархии - Мгновенная обратная связь о структуре вашего дизайна

Разработчики

Создавайте готовый к продакшен-код прямо из дизайна:

• React/Vue/SwiftUI-компоненты - От дизайна к коду за один шаг

• Код с дизайн-токенами - Держите дизайн и разработку засинхронизированными

• Снижение трений при передаче дизайна - Меньше итераций с командой дизайна

Ключевое преимущество: В отличие от официального MCP Figma, который требует лицензии Dev Mode, этот MCP работает с любой учётной записью Figma (даже бесплатной).

💡 Примеры из реального мира

Доступность:

"Найди весь текст с контрастностью <4.5:1 и предложи цвета, соответствующие WCAG AA"

Ребрендинг:

"Замените #FF6B6B на #E63946 во всех основных кнопках по всему документу"

Анализ дизайна:

"Проанализируйте визуальную иерархию этого экрана и предложите улучшения на основе принципов дизайна"

Работа с разработкой:

"Сгенерируй React-компонент для 'CardProduct', включая PropTypes и стили внутри CSS modules"

⚡️ Быстрая установка

Настройка: 5 минут | Первая автоматизация: 2 минут

Требования

• Node.js установлен

• Figma Desktop

• ИИ-клиент:

  • Claude Desktop

  • Claude Code

  • Cursor

  • Antigravity

  • Windsurf

  • VS Code + GitHub Copilot

  • Сlein

  • Roo Code

Шаг 1. Установите и запустите websocket

Даёт агенту возможность отправлять команды в Figma.

Откройте терминал, перейдите в папку, куда вы хотите установить инструмент, и выполните:

npx --yes --package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz desrid-html-to-figma

💡 Совет: Эта команда скачивает версионированный GitHub-релиз и запускает локальный мост. В случае склонированного репозитория в последующих сессиях запускайте npm run socket.

Шаг 2: Установите плагин в Figma

Позволяет Figma принимать команды от агента и возвращать ответы.

В Figma Desktop откройте меню → Плагины → Разработка → Импорт плагина из манифеста → в папке, где вы установили MCP, выберите src/claude_mcp_plugin/manifest.json

Шаг 3. Настройте свой агентный инструмент

Позволяет агенту использовать возможности MCP по чтению и редактированию.

Claude Desktop

Скачайте desrid-html-to-insta-figma.dxt из последнего релиза, а затем двойным кликом подключите его. Claude настроит себя автоматически.

Cursor

1. Откройте Cursor Settings → Tools & Integrations

2. Нажмите "New MCP Server", чтобы открыть файл mcp.json

3. Добавьте конфигурацию:

{
  "mcpServers": {
    "desrid_html_to_figma": {
      "command": "npx",
      "args": ["--yes", "--package=https://github.com/Desrid/desrid-html-to-figma/releases/download/v1.1.2/desrid-html-to-figma-1.1.2.tgz", "desrid-html-to-figma-server"]
    }
  }
}

4. Сохраните файл и перезапустите Cursor

Другие агентные инструменты

Для других инструментов (Claude Code, Windsurf, VS Code + GitHub Copilot, Cline, Roo Code) вы можете следовать инструкциям из главы "Настройка агентного инструмента" подробного руководства по установке.

Шаг 4. Начните работу

1. Откройте плагин в Figma

2. Скопируйте ID канала (жирный код внутри зелёной рамки)

3. Введите в чате: Connect to Figma, channel {your-ID}

✅ Готово — проектируйте с помощью ИИ!

Повторные рабочие сессии

Чтобы использовать MCP в повседневной работе, не нужно повторять весь процесс полностью:

1. Запустите сокет: В терминале перейдите в папку your-project/desrid-html-to-figma и выполните npm run socket.

2. Откройте плагин в Figma: вы найдёте его в списке недавних плагинов.

3. Подключите AI: скопируйте ID канала и укажите агенту: Connect to Figma, channel {your-ID}.

🤖 Multi-Agents и параллельное выполнение

Этот MCP-сервер поддерживает безопасное параллельное выполнение "в коробке", позволяя нескольким ИИ-агентам (например, субагентам Claude Code или командным роям) одновременно работать с файлом Figma, не блокируя плагин. Встроенная очередь команд обрабатывает запросы последовательно на стороне сервера, предотвращая тайм-ауты Figma API.

Примечание: Поскольку несколько агентов могут одновременно изменять документ, опираться на неявный контекст страницы небезопасно. Поэтому stateful-команды (например, setockage) заблокированы. Все агенты должны явно передавать parentId при выполнении любой команды создания или структурного изменения (например, create_frame, create_text).

(Особая благодарность mmabas77 за спроектирование и контрибуцию этого функции.)

🐳 Альтернативный вариант: Docker

Если вы предпочитаете Docker или хотите запустить WebSocket-сервер в командной среде, см. Docker-руководство в подробной документации.

🛠️ Возможности

Анализ дизайна

• Получение информации о документе, текущей выделенной рамке и стилях

• Сканирование текста, аудит компонентов, экспорт ассетов

Создание элементов

• Фигуры, текст, фрейства с полным контролем стилей

• Клонирование, группировка, организации элементов

Редактирование

• Цвета, обводки, скругления, тени

• Auto-layout, продвинутая типографика

• Локальные компоненты и командные библиотеки

См. полный список команд.

📚 Документация

• Подробная установка — Ручная настройка, Cursor, Windsurf и другие IDE

• Доступные команды — Полный справочник инструмента

• Диагностика — Частые ошибки и их устранение

• Вклад в проект — Архитектура, тестирование, руководство для контрибьюторов

• Журнал изменений — История версий

🙏 Благодарности

Основано на cursor-talk-to-figma-mcp Сонни Лазаарди. Адаптировано для Claude Desktop и расширено новыми инструментами Xúlio Zé.

Если вы хотите узнать обо всех вкладах в проект, загляните в раздел "Участники" в руководстве по разработке.

MIT License

📊 Статус проекта

✅ Стабильный продакшен — Инструмент готов для ежедневного использования дизайн- и дев-командами

🚀 Активная разработка:

• Полная поддержка Figma Variables

• Усовершенствованный экспорт в Tailwind CSS / SwiftUI

Нужно что-то своё?

Предложите новые идеи в GitHub Issues

Ваш отзыв и вклад помогают проекту жить. ❤️