The figma-tunnel-mcp server lets AI agents and MCP clients (e.g., Claude, Cursor) programmatically read, modify, and export Figma designs via a local WebSocket bridge, optionally exposed through a Cloudflare tunnel.

Document & Selection

• get_document_info, get_selection, read_my_design, get_node_info, get_nodes_info – Read document and node details

• set_focus, set_selections – Control viewport focus and selection

Creating Elements

• create_rectangle, create_frame, create_text – Draw rectangles, frames, and text nodes with full styling options

Modifying Nodes

• set_fill_color, set_stroke_color, set_corner_radius – Style nodes

• move_node, resize_node, clone_node, delete_node, delete_multiple_nodes – Transform and manage nodes

Text Operations

• scan_text_nodes – Find all text nodes within a node

• set_text_content, set_multiple_text_contents – Update text content individually or in batch

Auto Layout & Spacing

• set_layout_mode, set_padding, set_axis_align, set_layout_sizing, set_item_spacing – Configure auto-layout properties on frames

Components & Styles

• get_styles, get_local_components – List local styles and components

• create_component_instance, get_instance_overrides, set_instance_overrides – Instantiate components and manage overrides

Annotations

• get_annotations, set_annotation, set_multiple_annotations – Read and write annotations (Markdown supported)

• scan_nodes_by_types – Find nodes by type (useful for annotation targeting)

Prototyping & Connections

• get_reactions – Extract prototype flows from nodes

• set_default_connector, create_connections – Draw FigJam connector lines between nodes

Export

• export_node_as_image – Export a node as PNG, JPG, SVG, or PDF (returns base64)

Connection Management

• join_channel – Join a named WebSocket channel to establish communication with the Figma plugin

Allows AI agents to control and export from Figma, including reading designs, modifying nodes, text content, styling, layout, creating elements, and bulk text replacement via a WebSocket bridge.

1. Click on "Install Server".

2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.

3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@figma-tunnel-mcp Export the main frame as a 2x PNG"

That's it! The server will respond to your query, and you can continue using it as needed.

Here is a step-by-step guide with screenshots.