Figma MCP Bridge: Setup for Claude, Cursor and Other Apps

• Lists the Figma files that are connected

  Shows each open Figma or FigJam file that has the plugin running, with its file key. Use the key to aim other tools at one file.

  Try: “Which Figma files are connected right now?”

  Read · list_files

• Reads what you have selected in Figma

  Returns the nodes you currently have selected in the open file.

  Try: “Describe the layers I have selected.”

  Read · get_selection

• Reads the layer tree of the current page

  Returns the document tree for the page open in Figma or FigJam.

  Try: “Give me an outline of the current page.”

  Read · get_document

• Reads one layer by its ID

  Fetches a single node by ID, including nodes inside component instances. It can also include the prototype links on that node and its children.

  Try: “Read node 4029:12345 and tell me its padding and colors.”

  Read · get_node

• Summarizes the design around your selection

  Returns a trimmed tree for the selection or page that is meant to help the assistant understand the design before it builds code.

  Try: “Build a React component from my selected frame.”

  Read · get_design_context

• Reads exact positions and sizes of layers

  Returns absolute transforms and layout bounds for a chosen root layer. The docs warn that separate screenshot calls are not taken at the same moment.

  Try: “Get exact positions for every layer in the hero frame.”

  Read · get_layout_tree

• Lists the file's saved styles

  Returns every local paint, text, effect and grid style in the document.

  Try: “List the text styles in this file.”

  Read · get_styles

• Lists design variables and tokens

  Returns variable collections, their modes and values, which hold colors, numbers, strings and booleans used as design tokens.

  Try: “Export our color variables as CSS custom properties.”

  Read · get_variable_defs

• Reads the file name, pages and current page

  Returns basic facts about the open document: its name, its pages and which page is showing.

  Try: “What pages does this file have?”

  Read · get_metadata

• Takes an image of selected or named layers

  Exports the selection or listed node IDs as an image and returns it to the assistant as base64 data.

  Try: “Show me a screenshot of the checkout frame.”

  Read · get_screenshot

• Saves layer images to a folder on your computer

  Exports several nodes and writes each image to a file inside the server's working directory. It refuses to overwrite an existing file and returns file details only.

  Try: “Save PNGs of all frames in this section to ./exports.”

  Write · save_screenshots

• Lists prototype links on a layer and its children

  Read-only. Returns Figma's own trigger and action data for each interaction, with destinations named. It does not work in FigJam.

  Try: “What happens when someone taps the Sign up button?”

  Read · get_prototype_connections

• Follows prototype links from a screen

  Read-only. Walks the prototype breadth-first from a screen and returns the screens reached, each link between them and any conditions. Revisited screens are marked.

  Try: “Map every screen reachable from the Welcome screen.”

  Read · trace_prototype_flow

• Selects layers for you

  Sets the page selection to the node IDs you give it, or clears it with an empty list. It also works in Dev Mode.

  Try: “Select the three buttons in the footer.”

  Write · set_selection

• Moves the view to show certain layers

  Scrolls and zooms the Figma viewport so the listed nodes fit on screen. Works in Dev Mode too.

  Try: “Zoom to the pricing table.”

  Write · scroll_and_zoom_into_view

• Changes the words in a text layer

  Replaces the text of a text layer, or of a FigJam sticky or shape label. The plugin loads the layer's fonts first.

  Try: “Change the headline to 'Welcome back'.”

  Write · set_text_content

• Changes font, size, spacing and text color

  Patches font family and style, size, line height, letter spacing and fill color, plus alignment and bounds on text layers.

  Try: “Make all body text 16px Inter Regular.”

  Write · set_text_properties

• Changes name, position, size, opacity or corners

  Applies common property changes to one layer or to a list of layers in one call. Only properties the layer type supports are changed.

  Try: “Round the corners of these cards to 12px.”

  Write · set_node_properties

• Shows or hides layers

  Toggles visibility and returns the earlier state so it can be restored, which helps when isolating one layer for an export.

  Try: “Hide every layer except the logo, then export it.”

  Write · set_node_visibility

• Sets a layer's fill or stroke to one color

  Replaces a fill or stroke with a single solid paint from a hex value and optional opacity.

  Try: “Make the primary button #0A84FF.”

  Write · set_solid_fill

• Sets a layer's fill or stroke to a gradient

  Replaces a fill or stroke with a gradient built from color stops. Linear, radial, angular and diamond types are supported.

  Try: “Give the banner a purple to blue gradient.”

  Write · set_gradient_fill

• Replaces shadows and blurs on a layer

  Overwrites the effect list with drop shadows, inner shadows, layer blurs or background blurs. An empty list clears all effects.

  Try: “Add a soft drop shadow to the card.”

  Write · set_effects

• Changes outline weight, dashes and corners

  Patches stroke weight, alignment, dash pattern, cap and join. The stroke color is set with the fill tools.

  Try: “Make the border 2px and dashed.”

  Write · set_stroke_properties

• Turns on or edits auto layout on a frame

  Sets direction, gap, padding, alignment, sizing and wrap on a frame, or turns auto layout off. Sections do not support it.

  Try: “Put these items in a vertical stack with 16px gap.”

  Write · set_auto_layout

• Adds a page to the file

  Creates a page, optionally named and switched to, and returns its ID so other create tools can place content on it.

  Try: “Add a page called 'Mobile v2'.”

  Write · create_page

• Adds a frame

  Creates a frame, optionally inside a parent, with name, size, position and a solid fill.

  Try: “Create a 375 by 812 frame called 'Home'.”

  Write · create_frame

• Adds a section

  Creates a named container with its own background. Works in Figma and FigJam.

  Try: “Add a section called 'Onboarding' on the canvas.”

  Write · create_section

• Adds a text layer

  Creates text with content, font, size, alignment, color, position and bounds. New text defaults to Inter Regular.

  Try: “Add a heading that says 'Pricing' above the table.”

  Write · create_text

• Adds a rectangle, ellipse or line

  Creates a basic shape with size, position, rotation, fill and stroke.

  Try: “Draw a 200 by 200 blue circle.”

  Write · create_shape

• Adds a FigJam shape with a label

  Creates a FigJam shape such as a rounded rectangle, diamond or database that carries its own text. FigJam only.

  Try: “Add a diamond labeled 'Approved?'.”

  Write · create_shape_with_text

• Adds an image from a file, link or data

  Creates an image-filled rectangle from a local path, a web URL or a data URI. It can read a local file or download from the web.

  Try: “Add the logo at ./assets/logo.png to the header.”

  Write · create_image

• Imports SVG as editable shapes

  Turns raw SVG markup, or an SVG file inside the working folder, into editable vector layers. Limited to 2 MiB.

  Try: “Import ./icons/arrow.svg as a vector.”

  Write · create_svg

• Imports a web page capture as layers

  Reads a JSON file made by html-figma and builds frames, text, rectangles and vectors inside one wrapper frame. The file must sit inside the working folder.

  Try: “Import ./capture.json into this file.”

  Write · import_html_layers

• Adds a FigJam sticky note

  Creates a sticky with text, position and a wide option. FigJam only.

  Try: “Add a sticky: 'Ask legal about the terms'.”

  Write · create_sticky

• Draws a connector in FigJam

  Links two nodes, or two positions, with chosen attachment sides on each end. FigJam only.

  Try: “Connect the Login box to the Dashboard box.”

  Write · create_connector

• Copies layers in place

  Duplicates nodes under the same parent as the originals.

  Try: “Duplicate this card.”

  Write · duplicate_nodes

• Copies layers and shifts the copies

  Duplicates nodes, moves each copy by a fixed offset and returns which copy came from which original.

  Try: “Make 3 copies of this card, 24px apart.”

  Write · duplicate_with_offset

• Resizes a section to wrap its contents

  Shifts children so their bounding box starts at the padding, then resizes the section around them. Sections only.

  Try: “Shrink the section to fit its frames with 40px padding.”

  Write · fit_to_content

• Spaces layers evenly across

  Equalizes the gaps between three or more nodes, keeping the leftmost and rightmost where they are.

  Try: “Space these five icons evenly.”

  Write · distribute_horizontally

• Spaces layers evenly down

  Equalizes the gaps between three or more nodes, keeping the top and bottom ones fixed.

  Try: “Space these list rows evenly.”

  Write · distribute_vertically

• Snaps layers to a grid

  Rounds each node's x and y position to the grid size you give.

  Try: “Snap everything on this page to an 8px grid.”

  Write · align_to_grid

• Moves a layer under another one

  Positions a node directly below a reference node with an optional gap and start or center alignment.

  Try: “Put the caption below the image with 8px gap.”

  Write · place_below

• Moves a layer beside another one

  Positions a node directly right of a reference node with an optional gap and alignment.

  Try: “Put the button to the right of the input.”

  Write · place_right_of

• Moves layers into another container

  Moves one or more nodes under a different parent.

  Try: “Move these layers into the Header frame.”

  Write · reparent_nodes

• Groups layers together

  Wraps nodes that share a parent in a new group and returns the group's ID.

  Try: “Group the logo and the title.”

  Write · group_nodes

• Breaks up a group or frame

  Moves the children up to the parent and removes the wrapper. It can remove a frame, not only a group.

  Try: “Ungroup the 'Header' group.”

  Delete · ungroup_node

• Deletes layers

  Deletes the listed nodes and only runs when confirm is set to true. It cannot delete pages or the document.

  Try: “Delete the unused 'Old banner' layers.”

  Delete · delete_nodes

• Runs JavaScript inside Figma (off by default)

  Runs code against the Figma Plugin API in the plugin sandbox. It is only registered when FIGMA_BRIDGE_ENABLE_RUN_SCRIPT is 1, and calls to remove need an extra flag.

  Try: “Run a script to rename all layers in this frame.”

  Runs code · run_script

• Lists animation presets

  Returns the animation presets Figma offers. Uses the beta Motion API.

  Try: “Which animation presets can I use?”

  Read · get_motion_styles

• Reads a layer's animations

  Returns a node's animation styles, animations, keyframe tracks and timelines (beta Motion API).

  Try: “What animations does the hero image have?”

  Read · get_node_motion

• Applies an animation preset

  Applies a preset animation style to a node (beta Motion API).

  Try: “Fade in the title with a preset.”

  Write · apply_animation_style

• Removes an animation preset

  Removes one applied animation style from a node, or all of them if none is named (beta Motion API).

  Try: “Remove all animations from this button.”

  Delete · remove_animation_style

• Sets keyframes on a layer property

  Applies or replaces a manual keyframe track for a property, paint or effect field on a node (beta Motion API).

  Try: “Animate the opacity from 0 to 1 over a second.”

  Write · apply_manual_keyframe_track

• Removes keyframes from a property

  Removes the manual keyframe track for a property, paint or effect field (beta Motion API).

  Try: “Remove the keyframes on the logo's position.”

  Delete · remove_manual_keyframe_track

• Sets how long a timeline runs

  Sets a timeline's length in seconds (beta Motion API).

  Try: “Make the timeline 3 seconds long.”

  Write · set_timeline_duration

Watch out for

• It can delete layers and remove frames

  delete_nodes removes layers once confirm is true, and ungroup_node removes the wrapper frame. Keep the Figma file's version history handy and use a copy for big jobs. github.com

• It edits your file directly

  More than 30 tools change layers, text, fills and layout in the file where the plugin runs. Open the plugin in Dev Mode if you only want the assistant to read. github.com

• Opt-in tool runs any code in Figma

  run_script appears only if FIGMA_BRIDGE_ENABLE_RUN_SCRIPT is 1. It runs arbitrary JavaScript against your open file, and the README says its remove guard is not a security boundary. github.com

• Local port has no sign-in

  The server listens on 127.0.0.1 port 1994 by default and has no authentication. Setting FIGMA_BRIDGE_HOST to 0.0.0.0 opens it to your network, so leave it at the default. github.com

• It writes and reads files in its working folder

  save_screenshots writes image files, and the image, SVG and HTML import tools read files. Paths for exports and imports must stay inside the folder the server starts in. github.com

Security advisories