Figma MCP Server

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

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

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

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

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

- 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

- MCP Server- Предоставляет инструменты для AI
- WebSocket Server- Координирует соединения и каналы
- Figma Plugin- Выполняет команды в Figma

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

python websocket_proxy.py --port 3055 --debug

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

Добавьте следующую конфигурацию в настройки 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на реальный путь к проекту.

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

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

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

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

Создайте файл.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 # Документация

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

- fastmcp: 2.4.0 - MCP сервер фреймворк
- websockets: 15.0.1 - WebSocket клиент/сервер
- pydantic: 2.11.5 - Валидация данных
- pytest: 8.3.5 - Тестирование
- Проблемы с подключением: Проверьте статус WebSocket сервера
- Таймауты: Увеличьте timeout в WebSocket клиенте
- Ошибки каналов: Убедитесь, что используете правильный Channel ID
- Логи: Смотрите вывод в stderr для детальной информации
- Форкните репозиторий
- Создайте ветку для функции
- Добавьте тесты
- Отправьте pull request

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Figma MCP server for accessing Figma files, projects, comments, components, and design metadata from Claude, Cursor, and other AI agents.

Integrates Cursor AI with Figma to read and programmatically modify designs.

Integrate Figma design data with AI coding tools using a local MCP server.

Enables AI assistants to interact with and automate Figma designs programmatically.

Connects to the Figma API, allowing AI tools to access and interact with your Figma designs.

A server for integrating with Figma, allowing you to interact with your design files.

Connect AI coding agents to Anima Playground, Figma designs, and your team's design system. Bridge the gap between prototypes and production code.

Turn UI designs into responsive applications with Visily MCP

An MCP server that allows AI assistants to interact with Adobe After Effects.