What is Figma Mcp

figma_mcp is a Figma Model Context Protocol (MCP) server implemented in Python using FastMCP. It allows AI assistants to interact with Figma through a WebSocket connection for reading data and analyzing designs.

Use cases

Use cases for figma_mcp include automating design audits, generating design documentation, facilitating collaboration between design and development teams, and enhancing prototyping workflows.

How to use

To use figma_mcp, connect to the server via WebSocket and utilize the available tools to retrieve document information, analyze nodes, export images, and view annotations.

Key features

Key features include data reading, node scanning and analysis, image export in various formats, annotation viewing, component management, and prototyping information retrieval.

Where to use

figma_mcp can be used in design and development environments where Figma is utilized, particularly in teams that require AI assistance for layout development and design analysis.

Figma MCP Server (Python)

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

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

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

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

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

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

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

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

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

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

• get_document_info - Получить информацию о текущем документе Figma
• get_selection - Получить информацию о текущем выделении
• read_my_design - Получить детальную информацию о выделении включая все детали узлов
• get_node_info - Получить информацию о конкретном узле по ID
• get_nodes_info - Получить информацию о нескольких узлах
• 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 сервера

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

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

Используйте инструмент 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": "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
  }
}

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

WebSocket Server

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

MCP Server

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

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

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