Курсор Talk to Figma MCP

В этом проекте реализована интеграция протокола контекста модели (MCP) между Cursor AI и Figma, что позволяет Cursor взаимодействовать с Figma для чтения проектов и их программного изменения.

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

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

• src/talk_to_figma_mcp/ - сервер TypeScript MCP для интеграции с Figma

• src/cursor_mcp_plugin/ - плагин Figma для связи с Cursor

• src/socket.ts — сервер WebSocket, который обеспечивает связь между сервером MCP и плагином Figma

Related MCP server: Gravity Global Figma MCP

Начать

1. Установите Bun, если вы этого еще не сделали:

2. Запустите установку, это также установит MCP в активный проект вашего курсора.

3. Запустите сервер Websocket

4. МСР-сервер

5. НОВОЕ Установите плагин Figma со страницы сообщества Figma или установите локально

Краткое видеоруководство

Ссылка на видео

Пример автоматизации проектирования

Массовая замена текстового контента

Спасибо @dusskapark за вклад в функцию массовой замены текста. Вот демо-видео .

Распространение переопределения экземпляра Еще один вклад от @dusskapark Распространение переопределений экземпляра компонента из исходного экземпляра в несколько целевых экземпляров с помощью одной команды. Эта функция значительно сокращает повторяющуюся работу по проектированию при работе с экземплярами компонентов, которым требуются схожие настройки. Посмотрите наше демонстрационное видео .

Ручная настройка и установка

MCP Server: интеграция с курсором

Добавьте сервер в конфигурацию Cursor MCP в ~/.cursor/mcp.json :

Сервер WebSocket

Запустите сервер WebSocket:

Плагин Figma

1. В Figma перейдите в раздел Плагины > Разработка > Новый плагин.

2. Выберите «Связать существующий плагин».

3. Выберите файл src/cursor_mcp_plugin/manifest.json

4. Плагин теперь должен быть доступен в плагинах разработки Figma.

Руководство по Windows + WSL

1. Установить бан через powershell

2. Раскомментируйте имя хоста 0.0.0.0 в src/socket.ts

3. Запустить вебсокет

Использование

1. Запустите сервер WebSocket

2. Установить MCP-сервер в Курсоре

3. Откройте Figma и запустите плагин Cursor MCP.

4. Подключите плагин к серверу WebSocket, присоединившись к каналу с помощью join_channel

5. Используйте курсор для связи с Figma с помощью инструментов MCP

Инструменты МКП

Сервер MCP предоставляет следующие инструменты для взаимодействия с Figma:

Документ и выбор

• get_document_info — Получить информацию о текущем документе Figma

• get_selection - Получить информацию о текущем выборе

• read_my_design - Получить подробную информацию об узле для текущего выбора без параметров

• get_node_info - Получить подробную информацию о конкретном узле

• get_nodes_info — получить подробную информацию о нескольких узлах, указав массив идентификаторов узлов

Аннотации

• get_annotations — получить все аннотации в текущем документе или определенном узле

• set_annotation — создание или обновление аннотации с поддержкой markdown

• set_multiple_annotations — эффективное пакетное создание/обновление нескольких аннотаций

• scan_nodes_by_types — сканирование узлов определенных типов (полезно для поиска целей аннотаций)

Прототипирование и соединения

• get_reactions — Получить все реакции прототипа из узлов с визуальной анимацией подсветки

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

• create_connections — создание соединительных линий FigJam между узлами на основе прототипных потоков или пользовательского сопоставления.

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

• create_rectangle — создать новый прямоугольник с указанием положения, размера и необязательного имени

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

• create_text — создание нового текстового узла с настраиваемыми свойствами шрифта.

Изменение текстового содержимого

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

• set_text_content — Установить текстовое содержимое одного текстового узла

• set_multiple_text_contents — эффективное пакетное обновление нескольких текстовых узлов

Автоматическая раскладка и интервалы

• set_layout_mode — Установить режим макета и поведение обтекания кадра (НЕТ, ГОРИЗОНТАЛЬНЫЙ, ВЕРТИКАЛЬНЫЙ)

• set_padding — установка значений отступов для рамки автоматической компоновки (сверху, справа, снизу, слева)

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

• set_layout_sizing - Установка режимов горизонтального и вертикального размера для фреймов с автоматической компоновкой (FIXED, HUG, FILL)

• set_item_spacing — Установить расстояние между дочерними элементами в рамке с автоматической компоновкой

Стайлинг

• set_fill_color — Установить цвет заливки узла (RGBA)

• set_stroke_color — устанавливает цвет и толщину обводки узла

• set_corner_radius — установка радиуса угла узла с возможностью управления каждым углом

Макет и организация

• move_node — Переместить узел на новую позицию

• resize_node — Изменить размер узла с новыми размерами

• delete_node — Удалить узел

• delete_multiple_nodes — эффективное удаление нескольких узлов одновременно

• clone_node — создать копию существующего узла с необязательным смещением позиции

Компоненты и стили

• get_styles - Получить информацию о локальных стилях

• get_local_components — Получить информацию о локальных компонентах

• create_component_instance — Создать экземпляр компонента

• get_instance_overrides — извлечение свойств переопределения из выбранного экземпляра компонента

• set_instance_overrides — применить извлеченные переопределения к целевым экземплярам

Экспорт и расширенные возможности

• export_node_as_image — экспорт узла как изображения (PNG, JPG, SVG или PDF) — ограниченная поддержка изображений, в настоящее время возвращающих base64 как текст

Управление подключением

• join_channel — присоединяйтесь к определенному каналу для общения с Figma

Подсказки MCP

Сервер MCP включает в себя несколько вспомогательных подсказок, которые помогут вам справиться со сложными задачами проектирования:

• design_strategy — Лучшие практики работы с дизайном Figma

• read_design_strategy — Лучшие практики чтения проектов Figma

• text_replacement_strategy — Системный подход к замене текста в проектах Figma

• annotation_conversion_strategy — Стратегия преобразования ручных аннотаций в собственные аннотации Figma

• swap_overrides_instances — Стратегия передачи переопределений между экземплярами компонентов в Figma

• reaction_to_connector_strategy — стратегия преобразования реакций прототипа Figma в соединительные линии с использованием выходных данных «get_reactions» и руководство использованием «create_connections» в последовательности

Разработка

Создание плагина Figma

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

   cd src/cursor_mcp_plugin

2. Редактировать code.js и ui.html

Лучшие практики

При работе с Figma MCP:

1. Всегда присоединяйтесь к каналу перед отправкой команд.

2. Сначала получите обзор документа, используя get_document_info

3. Проверьте текущий выбор с помощью get_selection перед внесением изменений

4. Используйте соответствующие инструменты создания в зависимости от потребностей:

   • create_frame для контейнеров

   • create_rectangle для базовых фигур

   • create_text для текстовых элементов

5. Проверьте изменения с помощью get_node_info

6. По возможности используйте экземпляры компонентов для обеспечения согласованности.

7. Обрабатывайте ошибки соответствующим образом, поскольку все команды могут вызывать исключения.

8. Для больших дизайнов:

   • Использовать параметры фрагментации в scan_text_nodes

   • Отслеживайте прогресс с помощью обновлений WebSocket

   • Реализуйте соответствующую обработку ошибок

9. Для текстовых операций:

   • По возможности используйте пакетные операции.

   • Рассмотрите структурные отношения

   • Проверка изменений с помощью целевого экспорта

10. Для преобразования устаревших аннотаций:

• Сканируйте текстовые узлы, чтобы идентифицировать пронумерованные маркеры и описания.

• Используйте scan_nodes_by_types для поиска элементов пользовательского интерфейса, на которые ссылаются аннотации.

• Сопоставьте маркеры с их целевыми элементами, используя путь, имя или близость

• Категоризируйте аннотации соответствующим образом с помощью get_annotations

• Создавайте собственные аннотации с помощью set_multiple_annotations в пакетном режиме

• Убедитесь, что все аннотации правильно связаны со своими целями.

• Удалить устаревшие узлы аннотаций после успешного преобразования

11. Визуализируйте прототипы лапши в виде соединителей FigJam:

• Используйте get_reactions для извлечения прототипных потоков,

• установить соединитель по умолчанию с помощью set_default_connector ,

• и сгенерируйте соединительные линии с помощью create_connections для наглядного визуального отображения потока.

Лицензия

Массачусетский технологический институт