Об этом проекте
TalkToFigma реализует мост Model Context Protocol (MCP) между ИИ-агентами (Cursor, Claude Code, Codex) и Figma. Через WebSocket-сервер и сопутствующий плагин Figma агент может изучать документы и выделенные элементы, создавать и редактировать узлы, управлять текстом, авто-раскладкой, стилями, компонентами и аннотациями, а также экспортировать узлы как изображения.
Архитектура
- src/talk_to_figma_mcp: MCP-сервер на TypeScript, предоставляющий операции Figma в виде инструментов.
- src/cursor_mcp_plugin: плагин Figma, который взаимодействует со стороной агента.
- src/socket.ts: WebSocket-сервер, передающий сообщения между MCP-сервером и плагином.
Настройка
Установите Bun, выполните `bun setup` (это также регистрирует MCP-сервер в активном проекте Cursor), запустите сокет командой `bun socket`, затем установите плагин Figma со страницы сообщества или подключите его локально через manifest.json. Ручная настройка MCP использует `bunx cursor-talk-to-figma-mcp@latest` в ~/.cursor/mcp.json. В руководстве для Windows + WSL отмечено, что нужно раскомментировать hostname 0.0.0.0 в socket.ts.
Порядок использования
Запустите WebSocket-сервер, установите MCP-сервер, откройте Figma и запустите плагин, присоединитесь к каналу с помощью `join_channel`, затем отправляйте команды от агента. Рекомендации включают: сначала присоединиться к каналу, прочитать информацию о документе и выделении перед изменениями, проверять результат через get_node_info и использовать пакетные операции для больших дизайнов.
Покрытие инструментов
- Документ и выделение: get_document_info, get_selection, read_my_design, get_node_info, get_nodes_info, set_focus, set_selections.
- Аннотации: get_annotations, set_annotation, set_multiple_annotations, scan_nodes_by_types.
- Прототипирование: get_reactions, set_default_connector, create_connections для линий-коннекторов FigJam.
- Создание: create_rectangle, create_frame, create_section, create_text.
- Текст: scan_text_nodes, set_text_content, set_multiple_text_contents.
- Авто-раскладка: set_layout_mode, set_padding, set_axis_align, set_layout_sizing, set_item_spacing.
- Стилизация: set_fill_color, set_stroke_color, set_corner_radius, set_image_fill.
- Организация: move_node, resize_node, delete_node, delete_multiple_nodes, clone_node, rename_node, set_parent.
- Компоненты и стили: 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.
Промпты
Вспомогательные промпты направляют сложные задачи: design_strategy, read_design_strategy, text_replacement_strategy, annotation_conversion_strategy, swap_overrides_instances, reaction_to_connector_strategy.
Среди заметных добавленных возможностей — массовая замена текста и распространение переопределений экземпляров. Лицензия MIT.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.