Talk to Figma MCP

A server for integrating with Figma, allowing you to interact with your design files.

"TalkToFigma": { "command": "bunx", "args": ["hyun1202/talk-to-figma-mcp#dist"] }

npm repository에 등록이 되어있지 않으므로 실제로 프로젝트를 실행하도록 설정해야 한다.

"TalkToFigma": { "command": "cmd", "args": ["/c", "npm", "--silent", "-C", "C:/cursor-talk-to-figma-mcp", "start"] }

- 로컬 컴포넌트도 생성 가능하도록 수정
- 컴포넌트 생성 시 상위 요소에 생성될 수 있도록 수정

- src/talk_to_figma_mcp/- TypeScript MCP server for Figma integration
- src/cursor_mcp_plugin/- Figma plugin for communicating with Cursor
- src/socket.ts- WebSocket server that facilitates communication between the MCP server and Figma plugin
- Install Bun if you haven't already:

curl -fsSL https://bun.sh/install | bash

- Run setup, this will also install MCP in your Cursor's active project
- NEWInstall Figma plugin fromFigma community pageorinstall locally

Thanks to@dusskaparkfor contributing the bulk text replacement feature. Here is thedemo video.

Instance Override PropagationAnother contribution from@dusskaparkPropagate component instance overrides from a source instance to multiple target instances with a single command. This feature dramatically reduces repetitive design work when working with component instances that need similar customizations. Check out ourdemo video.

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

- In Figma, go to Plugins > Development > New Plugin
- Choose "Link existing plugin"
- Select thesrc/cursor_mcp_plugin/manifest.jsonfile
- The plugin should now be available in your Figma development plugins

powershell -c "irm bun.sh/install.ps1|iex"

- Uncomment the hostname0.0.0.0insrc/socket.ts

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

- Start the WebSocket server
- Install the MCP server in Cursor
- Open Figma and run the Cursor MCP Plugin
- Connect the plugin to the WebSocket server by joining a channel usingjoin_channel
- Use Cursor to communicate with Figma using the MCP tools

The MCP server provides the following tools for interacting with Figma:

- get_document_info- Get information about the current Figma document
- get_selection- Get information about the current selection
- read_my_design- Get detailed node information about the current selection without parameters
- get_node_info- Get detailed information about a specific node
- get_nodes_info- Get detailed information about multiple nodes by providing an array of node IDs

- get_annotations- Get all annotations in the current document or specific node
- set_annotation- Create or update an annotation with markdown support
- set_multiple_annotations- Batch create/update multiple annotations efficiently
- scan_nodes_by_types- Scan for nodes with specific types (useful for finding annotation targets)

- get_reactions- Get all prototype reactions from nodes with visual highlight animation
- set_default_connector- Set a copied FigJam connector as the default connector style for creating connections (must be set before creating connections)
- create_connections- Create FigJam connector lines between nodes, based on prototype flows or custom mapping

- create_rectangle- Create a new rectangle with position, size, and optional name
- create_frame- Create a new frame with position, size, and optional name
- create_text- Create a new text node with customizable font properties

- scan_text_nodes- Scan text nodes with intelligent chunking for large designs
- set_text_content- Set the text content of a single text node
- set_multiple_text_contents- Batch update multiple text nodes efficiently

- set_layout_mode- Set the layout mode and wrap behavior of a frame (NONE, HORIZONTAL, VERTICAL)
- set_padding- Set padding values for an auto-layout frame (top, right, bottom, left)
- set_axis_align- Set primary and counter axis alignment for auto-layout frames
- set_layout_sizing- Set horizontal and vertical sizing modes for auto-layout frames (FIXED, HUG, FILL)
- set_item_spacing- Set distance between children in an auto-layout frame

- set_fill_color- Set the fill color of a node (RGBA)
- set_stroke_color- Set the stroke color and weight of a node
- set_corner_radius- Set the corner radius of a node with optional per-corner control

- move_node- Move a node to a new position
- resize_node- Resize a node with new dimensions
- delete_node- Delete a node
- delete_multiple_nodes- Delete multiple nodes at once efficiently
- clone_node- Create a copy of an existing node with optional position offset

- get_styles- Get information about local styles
- get_local_components- Get information about local components
- create_component_instance- Create an instance of a component
- get_instance_overrides- Extract override properties from a selected component instance
- set_instance_overrides- Apply extracted overrides to target instances

- export_node_as_image- Export a node as an image (PNG, JPG, SVG, or PDF) - limited support on image currently returning base64 as text

- join_channel- Join a specific channel to communicate with Figma

The MCP server includes several helper prompts to guide you through complex design tasks:

- design_strategy- Best practices for working with Figma designs
- read_design_strategy- Best practices for reading Figma designs
- text_replacement_strategy- Systematic approach for replacing text in Figma designs
- annotation_conversion_strategy- Strategy for converting manual annotations to Figma's native annotations
- swap_overrides_instances- Strategy for transferring overrides between component instances in Figma
- reaction_to_connector_strategy- Strategy for converting Figma prototype reactions to connector lines using the output of 'get_reactions', and guiding the use 'create_connections' in sequence
- Navigate to the Figma plugin directory:

cd src/cursor_mcp_plugin

- Always join a channel before sending commands
- Get document overview usingget_document_infofirst
- Check current selection withget_selectionbefore modifications
- Use appropriate creation tools based on needs:

- create_framefor containers

- create_rectanglefor basic shapes
- create_textfor text elements

- Use chunking parameters inscan_text_nodes

- Monitor progress through WebSocket updates
- Implement appropriate error handling

- Use batch operations when possible

- Consider structural relationships
- Verify changes with targeted exports

- Scan text nodes to identify numbered markers and descriptions

- Usescan_nodes_by_typesto find UI elements that annotations refer to
- Match markers with their target elements using path, name, or proximity
- Categorize annotations appropriately withget_annotations
- Create native annotations withset_multiple_annotationsin batches
- Verify all annotations are properly linked to their targets
- Delete legacy annotation nodes after successful conversion

- Useget_reactionsto extract prototype flows,
- set a default connector withset_default_connector,
- and generate connector lines withcreate_connectionsfor clear visual flow mapping.

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Integrates Cursor AI with Figma to read and programmatically modify designs.

Integrate Figma design data with AI coding tools using a local MCP server.

Enables AI assistants to interact with and automate Figma designs programmatically.

Figma MCP server for accessing Figma files, projects, comments, components, and design metadata from Claude, Cursor, and other AI agents.

Connects to the Figma API, allowing AI tools to access and interact with your Figma designs.

Enables AI assistants to interact with Figma via WebSocket for reading data and design analysis.

Connect AI coding agents to Anima Playground, Figma designs, and your team's design system. Bridge the gap between prototypes and production code.

A growing collection of MCP tools for Android Development. Currently features a deterministic Figma-SVG-to-Android-XML converter, with plans for Gradle analysis, Resource management, and ADB integration tools.

Interact with the Figma API to access and manage design files and resources.