Talk to Figma MCP

Проект реализует интеграцию Model Context Protocol (MCP) между AI-агентом (Cursor, Claude Code) и Figma, позволяя AI-агенту взаимодействовать с 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 в активный проект Cursor:

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

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

Видеоурок

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

Примеры автоматизации дизайна

Массовая замена текстового содержимого

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

Распространение переопределений экземпляров компонентов

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

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

MCP-сервер: интеграция с Cursor

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

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp@latest"]
    }
  }
}

WebSocket-сервер

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

Плагин Figma

1. В Figma перейдите в Plugins > Development > New Plugin
2. Выберите «Link existing plugin»
3. Укажите файл src/cursor_mcp_plugin/manifest.json
4. Плагин станет доступен в разделе плагинов разработки Figma

Руководство для Windows + WSL

1. Установите Bun через PowerShell:

2. Раскомментируйте hostname: "0.0.0.0" в файле src/socket.ts:

// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",

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

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

1. Запустите WebSocket-сервер
2. Установите MCP-сервер в Cursor
3. Откройте Figma и запустите плагин Cursor MCP Plugin
4. Подключите плагин к WebSocket-серверу, войдя в канал с помощью join_channel
5. Используйте Cursor для взаимодействия с Figma через MCP-инструменты

Настройка для локальной разработки

Для разработки обновите конфигурацию MCP, указав путь к локальной директории:

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": ["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
    }
  }
}

MCP-инструменты

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

Документ и выделение

• get_document_info — получить информацию о текущем документе Figma
• get_selection — получить информацию о текущем выделении
• read_my_design — получить подробную информацию об узлах текущего выделения без параметров
• get_node_info — получить подробную информацию о конкретном узле
• get_nodes_info — получить подробную информацию о нескольких узлах по массиву их ID
• set_focus — установить фокус на конкретный узел, выделив его и прокрутив вьюпорт к нему
• set_selections — выделить несколько узлов и прокрутить вьюпорт для их отображения

Аннотации

• 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 — задать режим лейаута и поведение переноса фрейма (NONE, HORIZONTAL, VERTICAL)
• set_padding — задать значения отступов для фрейма с автолейаутом (top, right, bottom, left)
• 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 — пакетное удаление нескольких узлов
• flatten_node — объединить узел
• group_nodes — сгруппировать несколько узлов
• ungroup_node — разгруппировать узел
• duplicate_node — дублировать узел

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

• get_styles — получить все стили в документе
• get_local_components — получить все локальные компоненты
• get_team_components — получить компоненты команды
• create_component_instance — создать экземпляр компонента
• get_instance_overrides — получить переопределения экземпляра компонента
• set_instance_overrides — применить переопределения к целевым экземплярам

Экспорт

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

Переменные и токены

• get_variables — получить все переменные в документе
• create_variable — создать новую переменную
• set_variable_value — задать значение переменной