Talk to Figma MCP

Курсор 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

Начать

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 для наглядного визуального отображения потока.

Лицензия

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