À propos du projet
TalkToFigma implémente un pont Model Context Protocol (MCP) entre des agents IA (Cursor, Claude Code, Codex) et Figma. Via un serveur WebSocket et un plugin Figma compagnon, un agent peut inspecter des documents et des sélections, créer et modifier des nœuds, gérer du texte, la mise en page automatique, les styles, les composants et les annotations, et exporter des nœuds sous forme d'images.
Architecture
- src/talk_to_figma_mcp : serveur MCP TypeScript exposant les opérations Figma comme outils.
- src/cursor_mcp_plugin : plugin Figma qui communique avec le côté agent.
- src/socket.ts : serveur WebSocket relayant les messages entre le serveur MCP et le plugin.
Configuration
Installer Bun, exécuter `bun setup` (qui enregistre aussi le serveur MCP dans le projet Cursor actif), démarrer le socket avec `bun socket`, puis installer le plugin Figma depuis la page communautaire ou le lier localement via manifest.json. La configuration MCP manuelle utilise `bunx cursor-talk-to-figma-mcp@latest` dans ~/.cursor/mcp.json. Un guide Windows + WSL note de décommenter le hostname 0.0.0.0 dans socket.ts.
Flux d'utilisation
Démarrer le serveur WebSocket, installer le serveur MCP, ouvrir Figma et exécuter le plugin, rejoindre un canal avec `join_channel`, puis émettre des commandes depuis l'agent. Les bonnes pratiques incluent rejoindre un canal d'abord, lire les informations du document et la sélection avant les modifications, vérifier avec get_node_info, et utiliser des opérations par lots pour les grands designs.
Couverture des outils
- Document et sélection : get_document_info, get_selection, read_my_design, get_node_info, get_nodes_info, set_focus, set_selections.
- Annotations : get_annotations, set_annotation, set_multiple_annotations, scan_nodes_by_types.
- Prototypage : get_reactions, set_default_connector, create_connections pour les lignes de connexion FigJam.
- Création : create_rectangle, create_frame, create_section, create_text.
- Texte : scan_text_nodes, set_text_content, set_multiple_text_contents.
- Mise en page automatique : set_layout_mode, set_padding, set_axis_align, set_layout_sizing, set_item_spacing.
- Styles : set_fill_color, set_stroke_color, set_corner_radius, set_image_fill.
- Organisation : move_node, resize_node, delete_node, delete_multiple_nodes, clone_node, rename_node, set_parent.
- Composants et styles : get_styles, get_local_components, create_component_instance, get_instance_overrides, set_instance_overrides.
- Export : export_node_as_image (PNG, JPG, SVG, PDF ; l'export d'image renvoie actuellement du texte base64).
- Connexion : join_channel.
Invites
Des invites d'aide guident les tâches complexes : design_strategy, read_design_strategy, text_replacement_strategy, annotation_conversion_strategy, swap_overrides_instances, reaction_to_connector_strategy.
Les fonctionnalités contribuées notables incluent le remplacement de texte en masse et la propagation de remplacements d'instances. Sous licence MIT.
Comments
0 people shared their preference · Deer Point appears after 10 participants
Sign in to join the discussion.