Figma MCP Server

Enables AI assistants to interact with Figma via WebSocket for reading data and design analysis.

GitHub

Figma MCP Server (Python)

Figma Model Context Protocol (MCP) server, реализованный на Python с использованием FastMCP. Этот сервер позволяет AI ассистентам взаимодействовать с Figma через WebSocket соединение для чтения данных и анализа дизайнов.

🎯 Возможности

  • 📖 Чтение данных: Получение информации о документах, узлах, компонентах и стилях
  • 🔍 Поиск и анализ: Сканирование узлов по типам, поиск текстового контента
  • 📤 Экспорт: Экспорт узлов как изображений в различных форматах
  • 📋 Аннотации: Просмотр аннотаций в документах
  • 🧩 Компоненты: Работа с компонентами и их экземплярами
  • 🔗 Прототипирование: Получение информации о реакциях и связях

🚫 Ограничения

Для безопасности этот сервер НЕ поддерживает:

  • Создание новых элементов
  • Изменение стилей, цветов или текста (инструменты set_*)
  • Операции изменения узлов (перемещение, изменение размера, удаление, клонирование)

📋 Доступные инструменты (15 шт.)

🔗 Подключение

  • join_channel - Присоединиться к каналу для связи с Figma

📖 Получение информации

  • get_document_info - Получить информацию о текущем документе Figma
  • get_selection - Получить информацию о текущем выделении
  • read_my_design - Получить детальную информацию о выделении включая все детали узлов
  • get_node_info - Получить информацию о конкретном узле по ID
  • get_nodes_info - Получить информацию о нескольких узлах
  • get_node_children - Получить ID всех дочерних узлов с полной рекурсивной вложенностью
  • get_styles - Получить все стили из документа
  • get_local_components - Получить все локальные компоненты

🧩 Компоненты

  • get_instance_overrides - Получить переопределения экземпляра компонента

🔍 Поиск и сканирование

  • scan_text_nodes - Сканировать текстовые узлы внутри заданного узла
  • scan_nodes_by_types - Сканировать узлы определенных типов (TEXT, RECTANGLE, FRAME)

📤 Экспорт

  • export_node_as_image - Экспортировать узел как изображение (PNG, JPG, SVG, PDF)

📋 Аннотации

  • get_annotations - Получить аннотации для узла или всего документа

🔗 Прототипирование

  • get_reactions - Получить реакции (интерактивные связи) для узлов

🏗️ Архитектура

AI Client (Cursor) ←→ MCP Server ←→ WebSocket Server ←→ Figma Plugin
  1. MCP Server - Предоставляет инструменты для AI
  2. WebSocket Server - Координирует соединения и каналы
  3. Figma Plugin - Выполняет команды в Figma

🚀 Быстрый старт

1. Установка зависимостей

cd python-version
python -m venv venv
source venv/bin/activate  # Linux/Mac
# или venv\Scripts\activate  # Windows
pip install -r requirements.txt

2. Запуск WebSocket сервера

python websocket_proxy.py --port 3055 --debug

3. Запуск в Figma

  1. Откройте Figma Desktop
  2. Перейдите в Plugins → Development → Import plugin from manifest...
  3. Выберите src/cursor_mcp_plugin/manifest.json
  4. Запустите плагин "Cursor MCP Plugin"
  5. Подключитесь к серверу на порту 3055
  6. Запомните Channel ID (например: abc123xyz)

4. Настройка MCP в Cursor

Добавьте следующую конфигурацию в настройки MCP Cursor (.cursor/mcp.json):

{
  "mcpServers": {
    "figma-mcp": {
      "command": "python",
      "args": ["-m", "src.figma_mcp.server", "--server", "localhost:3055"],
      "cwd": "/path/to/your/figma_mcp"
    }
  }
}

Альтернативный способ (с виртуальным окружением):

{
  "mcpServers": {
    "figma-mcp": {
      "command": "/path/to/your/figma_mcp/venv/bin/python",
      "args": ["/path/to/your/figma_mcp/src/figma_mcp/server.py", "--server", "localhost:3055"]
    }
  }
}

Примечание: Замените /path/to/your/figma_mcp на реальный путь к проекту.

5. Запуск MCP сервера

python -m src.figma_mcp.server --server localhost:3055

6. Подключение к каналу

Используйте инструмент join_channel с полученным Channel ID:

{
  "tool": "join_channel",
  "arguments": {
    "channel": "abc123xyz"
  }
}

🛠️ Примеры использования

Получение информации о документе

{
  "tool": "get_document_info",
  "arguments": {}
}

Получение информации о узле

{
  "tool": "get_node_info", 
  "arguments": {
    "node_id": "4472:98013"
  }
}

Получение всех дочерних узлов

{
  "tool": "get_node_children",
  "arguments": {
    "node_id": "4472:98012"
  }
}

Поиск текстовых узлов

{
  "tool": "scan_text_nodes",
  "arguments": {
    "node_id": "4472:98012",
    "use_chunking": true,
    "chunk_size": 50
  }
}

Экспорт как изображение

{
  "tool": "export_node_as_image",
  "arguments": {
    "node_id": "4472:98013",
    "format": "PNG",
    "scale": 2.0
  }
}

🔧 Конфигурация

WebSocket Server

  • Порт: 3055 (по умолчанию)
  • Host: localhost
  • Debug режим: --debug

MCP Server

  • Server URL: localhost:3055 (по умолчанию)
  • Протокол: MCP 2024-11-05
  • Transport: stdio

Cursor MCP Settings

Создайте файл .cursor/mcp.json в корне вашего проекта или в домашней директории:

{
  "$schema": "https://schema.cursor.com/mcp.json",
  "mcpServers": {
    "figma-mcp": {
      "command": "python",
      "args": ["-m", "src.figma_mcp.server", "--server", "localhost:3055"],
      "cwd": "/absolute/path/to/figma_mcp",
      "env": {
        "PYTHONPATH": "/absolute/path/to/figma_mcp"
      }
    }
  }
}

Основные параметры:

  • command: Команда для запуска Python
  • args: Аргументы для запуска MCP сервера
  • cwd: Рабочая директория (абсолютный путь к проекту)
  • env: Переменные окружения (опционально)

📁 Структура проекта

python-version/
├── src/figma_mcp/
│   ├── __init__.py
│   ├── server.py          # Главный MCP сервер
│   ├── websocket_client.py # WebSocket клиент
│   ├── types.py           # Типы Pydantic
│   └── utils.py           # Утилиты
├── tests/                 # Тесты (41 тест)
├── websocket_proxy.py     # WebSocket сервер
├── requirements.txt       # Зависимости
└── README.md             # Документация

🧪 Тестирование

Запуск всех тестов:

python -m pytest tests/ -v

Тестирование подключения:

python test_mcp.py

🔒 Безопасность

  • Фильтрация конфиденциальных данных из ответов Figma
  • Валидация всех параметров с Pydantic
  • Обработка ошибок и таймаутов
  • Логирование в stderr для отладки

📦 Зависимости

  • fastmcp: 2.4.0 - MCP сервер фреймворк
  • websockets: 15.0.1 - WebSocket клиент/сервер
  • pydantic: 2.11.5 - Валидация данных
  • pytest: 8.3.5 - Тестирование

🐛 Отладка

  1. Проблемы с подключением: Проверьте статус WebSocket сервера
  2. Таймауты: Увеличьте timeout в WebSocket клиенте
  3. Ошибки каналов: Убедитесь, что используете правильный Channel ID
  4. Логи: Смотрите вывод в stderr для детальной информации

📝 Лицензия

MIT License

🤝 Вклад

  1. Форкните репозиторий
  2. Создайте ветку для функции
  3. Добавьте тесты
  4. Отправьте pull request

संबंधित सर्वर