Claude AI-агенты Talk to Figma MCP

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

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

• Claude Desktop

• Claude Code

• Cursor

• Antigravity

• Windsurf

• VS Code + GitHub Copilot

• Cline

• Roo Code

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

UX/UI-команды

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

• Автоматизированный аудит доступности — находите и исправляйте проблемы с контрастностью за секунды

• Массовое обновление стилей — меняйте цвета, типографику или отступы во всем документе одной командой

• Анализ визуальной иерархии — получайте мгновенную обратную связь по структуре вашего дизайна

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

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

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

• Код с дизайн-токенами — поддерживайте синхронизацию дизайна и разработки

• Уменьшение трений при передаче — меньше итераций «туда-сюда» с командой дизайнеров

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

Related MCP server: Figma Console MCP Server

💡 Реальные сценарии использования

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

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

Ребрендинг:

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

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

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

Передача разработчикам:

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

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

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

Требования

• Установленный Node.js

• Figma Desktop

• ИИ-клиент:

  • Claude Desktop

  • Claude Code

  • Cursor

  • Antigravity

  • Windsurf

  • VS Code + GitHub Copilot

  • Cline

  • Roo Code

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

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

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

npx claude-talk-to-figma-mcp

💡 Совет: Эта команда «все-в-одном» (клонирует, устанавливает и запускает). В последующих сессиях, если вы уже находитесь в папке проекта your-project/claude-talk-to-figma-mcp, вы можете просто запустить bun run socket.

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

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

В Figma Desktop перейдите в Menu → Plugins → Development → Import plugin from manifest → внутри папки, куда вы установили MCP, выберите src/claude_mcp_plugin/manifest.json

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

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

Claude Desktop

Скачайте claude-talk-to-figma-mcp.dxt (из раздела Assets последнего релиза) и дважды щелкните по нему. Claude настроится автоматически.

Cursor

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

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

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

{
  "mcpServers": {
    "ClaudeTalkToFigma": {
      "command": "npx",
      "args": ["-p", "claude-talk-to-figma-mcp@latest", "claude-talk-to-figma-mcp-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/claude-talk-to-figma-mcp и выполните bun run socket (или npm run socket).

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

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

🤖 Мультиагентность и параллельное выполнение

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

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

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

🐳 Альтернатива: Использование Docker

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

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

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

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

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

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

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

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

Модификация

• Цвета, границы, углы, тени

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

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

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

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

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

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

• Устранение неполадок — распространенные ошибки и способы их исправления

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

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

🙏 Авторы

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

Если вы хотите узнать обо всех вкладах в проект, вы можете посетить главу «Участники» в руководстве по внесению вклада.

Лицензия MIT

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

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

🚀 В активной разработке:

• Полная поддержка переменных Figma

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

Нужно что-то конкретное?

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

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