Figwright Figma MCP Server: Setup for Claude, Cursor and Other Apps

• Gets a compact summary of a design for coding

  Returns a depth-limited, token-efficient view of a node. It is the main read for turning designs into code and is preferred over a full node dump.

  Try: “Get the design context for the selected frame.”

  Read · get_design_context

• Reads one layer in full detail

  Returns one node with its full subtree and every field: geometry, paints, effects, auto-layout and text.

  Try: “Show me everything about the selected button.”

  Read · get_node

• Takes an image of layers for the assistant

  Exports nodes as PNG, JPG or SVG that the assistant can see, returned inline.

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

  Read · get_screenshot

• Reads what you have selected

  Returns the nodes currently selected on the page, with geometry, fills, strokes, effects and text.

  Try: “Describe what I have selected.”

  Read · get_selection

• Finds layers by name or type

  Searches the node tree by case-insensitive name part and/or exact type.

  Try: “Find every layer with "button" in its name.”

  Read · search_nodes

• Reads Dev Mode annotations

  Returns annotations on a node, or on the whole current page.

  Try: “Show the annotations on this page.”

  Read · get_annotations

• Shows a component's options and variants

  Returns a component's property contract: variants, toggles, text and swap properties.

  Try: “What options does the Button component have?”

  Read · get_component_api

• Reads the whole current page

  Returns the full node tree of the current page with geometry, opacity, radius and fills.

  Try: “List everything on this page.”

  Read · get_document

• Lists fonts used on the page

  Returns each font in use with a count, most used first.

  Try: “Which fonts does this page use?”

  Read · get_fonts

• Lists components in a selection or subtree

  Returns components and component sets inside a node or the selection.

  Try: “List the components inside this section.”

  Read · get_local_components

• Shows file name, pages and editor type

  Returns the file name, current page, page references and which editor the file is open in.

  Try: “What file and pages do I have open?”

  Read · get_metadata

• Lists animations under a layer

  Lists every Figma Motion animation source in a node and its subtree, including hidden ones.

  Try: “What animations exist inside this frame?”

  Read · get_motion_context

• Lists available animation presets

  Returns the animation presets in the file that apply_animation_style can use.

  Try: “Which animation presets can I use?”

  Read · get_motion_styles

• Reads one layer's animations

  Returns the animation styles, keyframes, tracks and timelines on a node.

  Try: “Show the animation settings on this logo.”

  Read · get_node_motion

• Reads several layers by id

  Returns the listed nodes in order, with null for missing ones.

  Try: “Get details for these four node ids.”

  Read · get_nodes_info

• Lists pages and prototype flows

  Returns each page with its id, name and prototype flows.

  Try: “List the pages in this file.”

  Read · get_pages

• Reads prototype interactions on a layer

  Returns the triggers and actions set on a node, such as click or hover.

  Try: “What happens when this button is clicked?”

  Read · get_reactions

• Lists local styles

  Returns the file's paint, text, effect and grid styles.

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

  Read · get_styles

• Lists variables and their values

  Returns variable collections, modes and each variable's values per mode.

  Try: “What color variables does this file define?”

  Read · get_variable_defs

• Reads a vector's shape

  Returns SVG path data and the vector network of a vector layer.

  Try: “Give me the SVG path of this icon.”

  Read · get_vector

• Shows the visible area of the canvas

  Returns the center, zoom and bounds of the current view.

  Try: “What part of the canvas am I looking at?”

  Read · get_viewport

• Lists Figma files with Figwright open

  Returns each open file with its session id, name, current page and plugin version.

  Try: “Which Figma files are connected?”

  Read · list_files

• Checks the connection

  Returns server information and, when the plugin is connected, details from the Figma side.

  Try: “Is Figwright connected to Figma?”

  Read · ping

• Finds layers of given types

  Returns every node of the listed types under a root or the page.

  Try: “List all the frames and components on this page.”

  Read · scan_nodes_by_types

• Lists all text layers

  Returns every text node in a subtree with its characters, size and font.

  Try: “List all the text in this screen.”

  Read · scan_text_nodes

• Picks which open file this agent uses

  Claims one open Figma file so this agent's tool calls stop following the foreground file. It lasts for this server process only.

  Try: “Use the file called Marketing site.”

  Read · use_file

• Adds an editable option to a component

  Declares a show/hide, text or swappable-instance property on a component. It does nothing until you attach it to a layer.

  Try: “Add a "Show icon" toggle property to the Button component.”

  Write · add_component_property

• Adds a new page to the file

  Creates a page, optionally with a name.

  Try: “Add a page called Mobile screens.”

  Write · add_page

• Adds a mode such as Dark to a variable set

  Adds a mode to a variable collection. Figma's Starter plan allows only one mode per collection, so this can fail there.

  Try: “Add a Dark mode to the Colors collection.”

  Write · add_variable_mode

• Aligns or evenly spaces layers

  Does what Figma's align and distribute toolbar does, against the parent or against each other.

  Try: “Center these three buttons horizontally and space them evenly.”

  Write · align_nodes

• Detects your project's framework and styling

  Reads your project's manifests and config to work out the framework, language, styling system and how SVGs are handled.

  Try: “What framework and styling system does this project use?”

  Files · analyze_project

• Applies an animation preset to a layer

  Applies a Figma Motion preset to a node, with options for duration and start offset, so entrances can be staggered.

  Try: “Fade in each card one after another, 0.1 seconds apart.”

  Write · apply_animation_style

• Sets hand-made animation keyframes

  Sets a keyframe track for one property of a node, such as position, opacity, rotation or scale.

  Try: “Make the logo slide in from the left over one second.”

  Write · apply_manual_keyframe_track

• Applies a shared style to a layer

  Binds an existing paint, text, effect or grid style to a node.

  Try: “Apply the Heading/H1 text style to this title.”

  Write · apply_style_to_node

• Renames many layers at once

  Renames a list of nodes in one call. Missing nodes are skipped.

  Try: “Rename these layers to card-1, card-2 and card-3.”

  Write · batch_rename_nodes

• Applies several edits as one all-or-nothing step

  Runs an ordered list of edits and rolls all of them back if one fails. Deleting edits are refused.

  Try: “Create this frame, set its fill and add the text in one batch.”

  Write · batch

• Attaches a component option to a layer

  Connects a declared component property to a layer field so the property drives that layer.

  Try: “Hook the Show icon toggle to the icon layer.”

  Write · bind_component_property

• Links a layer value to a variable

  Binds a variable to a node field such as width, spacing or corner radius, or unbinds it.

  Try: “Bind this card's padding to the spacing/md variable.”

  Write · bind_variable_to_node

• Links a fill or stroke color to a variable

  Binds a color variable to a solid fill or stroke, the design-token way to color a layer.

  Try: “Bind this button's fill to the color/primary variable.”

  Write · bind_variable_to_paint

• Combines shapes (union, subtract, intersect)

  Merges shapes into one editable boolean group using union, subtract, intersect or exclude.

  Try: “Subtract the small circle from the big one to make a ring.”

  Write · boolean_nodes

• Duplicates a layer and its contents

  Copies a node with everything inside it and places the copy right after the original.

  Try: “Duplicate this card.”

  Write · clone_node

• Turns components into a variant set

  Combines two or more components named in variant style, such as Size=Small, into one component set.

  Try: “Combine Button/Small and Button/Large into a variant set.”

  Write · combine_as_variants

• Matches Figma components to your code components

  Joins the components in a selection to components found in your project so code can reuse them. A docs/figma-component-map.md row overrides the match.

  Try: “Which of my React components match the Figma components in this selection?”

  Files · component_map

• Makes a reusable component

  Creates a main component, either new or by converting an existing node.

  Try: “Turn this frame into a component called Card.”

  Write · create_component

• Saves a shadow or blur as a style

  Creates a local effect style from drop shadows, inner shadows or blurs.

  Try: “Save this shadow as a style called Elevation/1.”

  Write · create_effect_style

• Draws a circle or ellipse

  Creates an ellipse, a circle when width equals height, at a size and position under a parent.

  Try: “Draw a 48 px circle for an avatar.”

  Write · create_ellipse

• Creates a frame

  Creates a frame, the main container for UI and the only layer that can hold auto-layout.

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

  Write · create_frame

• Saves a layout grid as a style

  Creates a reusable grid style of squares, rows or columns.

  Try: “Save a 12-column grid as a style.”

  Write · create_grid_style

• Places a copy of a component

  Creates an instance of a local or published component, with optional name, position and parent.

  Try: “Put an instance of the Button component inside this frame.”

  Write · create_instance

• Saves a color or gradient as a style

  Creates a local paint style from solid or gradient fills. Slashes in the name group styles in folders.

  Try: “Save this blue as a color style called Brand/Primary.”

  Write · create_paint_style

• Draws a rectangle

  Creates a rectangle for blocks, dividers or color areas.

  Try: “Draw a 1 px wide divider line under the header.”

  Write · create_rectangle

• Creates a section to group screens

  Creates a section on a page for grouping and labelling flows or sets of screens.

  Try: “Create a section called Onboarding flow.”

  Write · create_section

• Draws a line, polygon or star

  Creates a line, polygon or star at a size and position.

  Try: “Draw a five-point star.”

  Write · create_shape

• Makes text follow a shape's outline

  Turns a shape, line or vector into text that runs along its outline, such as lettering round a badge.

  Try: “Put "Fresh and local" in a circle around this badge.”

  Write · create_text_path

• Saves typography as a text style

  Creates a reusable text style that can be applied to text layers.

  Try: “Save 32 px bold Inter as a style called Heading/H1.”

  Write · create_text_style

• Adds a text layer

  Creates a text node with the given characters, in a default font loaded automatically.

  Try: “Add the text "Welcome back" at the top of this frame.”

  Write · create_text

• Creates a set of variables

  Creates a variable collection that starts with one default mode.

  Try: “Create a collection called Colors.”

  Write · create_variable_collection

• Creates a variable

  Creates a variable of type true/false, number, text, color, easing or timing inside a collection.

  Try: “Create a color variable called primary.”

  Write · create_variable

• Draws an editable vector shape

  Creates one vector layer from SVG path data or a vector network.

  Try: “Draw this icon from its SVG path data.”

  Write · create_vector

• Shows what changed in a design since last time

  The first call saves a snapshot of a node under .figwright/snapshots in your project. Later calls report the added, removed and changed parts so you update only that code.

  Try: “What changed in the Pricing frame since the last snapshot?”

  Write · design_diff

• Turns an instance into a plain frame

  Breaks the link to the main component for good. The frame keeps its look.

  Try: “Detach this button from its component.”

  Write · detach_instance

• Changes a component option

  Renames a component property, changes its default value or its preferred swaps.

  Try: “Rename the property "label" to "text" on Button.”

  Write · edit_component_property

• Saves a layer or page as a PDF file

  Writes a single-page vector PDF of a node or the current page to disk.

  Try: “Export the Pricing frame as a PDF.”

  Write · export_pdf

• Saves an animated frame as video

  Writes an MP4, WebM or GIF of an animated top-level frame to disk. It is a heavy render, so run it alone.

  Try: “Export the animated hero frame as an MP4.”

  Write · export_video

• Finds and replaces text across layers

  Replaces a substring in all text layers under a scope, or in the whole page.

  Try: “Replace "Acme" with "Globex" everywhere on this page.”

  Write · find_replace_text

• Merges layers into one vector

  Flattens shapes, text and boolean groups into a single editable vector. It cannot be undone through this server.

  Try: “Flatten these shapes into one icon.”

  Write · flatten_nodes

• Mirrors layers

  Flips nodes horizontally or vertically around their own center.

  Try: “Flip this arrow horizontally.”

  Write · flip_nodes

• Groups layers

  Groups nodes under their shared parent and returns the new group.

  Try: “Group these three layers.”

  Write · group_nodes

• Matches Figma icons to your SVG files

  Matches icon layers to .svg files in your project so code reuses them. Unsure matches are left as new exports.

  Try: “Which of my SVG files match the icons in this frame?”

  Files · icon_map

• Places a picture on the canvas

  Imports a PNG, JPG or GIF from a local file, base64 data or a public URL and places it as a rectangle with an image fill. The server reads a local path itself.

  Try: “Import ~/Pictures/hero.png into this frame.”

  Write · import_image

• Brings in a library style

  Imports a published paint, text, effect or grid style by its key.

  Try: “Import the brand text style from our library.”

  Write · import_style

• Places an SVG as editable vectors

  Imports SVG markup as a frame of vector paths, suited to logos and icons.

  Try: “Add this SVG logo to the page.”

  Write · import_svg

• Brings in a library variable

  Imports a published variable by its key into the file.

  Try: “Import the library color variable by key.”

  Write · import_variable

• Locks layers

  Locks nodes so they cannot be selected or edited on the canvas. Locked nodes still render and export.

  Try: “Lock the background layers.”

  Write · lock_nodes

• Moves layers by an offset

  Translates nodes by a dx and dy.

  Try: “Move these layers 40 px to the right.”

  Write · move_nodes

• Switches the active page

  Makes another page current so later tools act on it.

  Try: “Go to the Components page.”

  Write · navigate_to_page

• Turns a stroke into a filled shape

  Outlines a node's stroke into a vector, or into glyph outlines for text.

  Try: “Outline the stroke on this line.”

  Write · outline_stroke

• Renames one layer

  Renames a layer without touching the component name elsewhere.

  Try: “Rename this layer to Primary button.”

  Write · rename_node

• Renames a page

  Renames a page by id without changing its contents.

  Try: “Rename this page to Final designs.”

  Write · rename_page

• Renames a variable

  Renames a variable. Its id stays the same, so bindings keep working.

  Try: “Rename color/primary to color/brand.”

  Write · rename_variable

• Changes the stacking order

  Moves nodes to a position in their parent's layer order, 0 being the bottom.

  Try: “Send this shape to the back.”

  Write · reorder_nodes

• Moves layers into another container

  Moves nodes into a different parent at a chosen position. On-screen positions may shift.

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

  Write · reparent_nodes

• Repeats a layer in a live pattern

  Wraps layers in a repeat group (Figma Draw) that draws copies and stays editable.

  Try: “Make a row of 10 dots from this circle.”

  Write · repeat_nodes

• Resizes layers

  Sets width and height on nodes.

  Try: “Make this card 320 by 200.”

  Write · resize_nodes

• Rotates layers

  Sets an absolute rotation in degrees.

  Try: “Rotate this arrow to 90 degrees.”

  Write · rotate_nodes

• Saves the original images behind layers

  Writes the original uploaded image files of a node's image fills to a folder, with no cropping or effects.

  Try: “Save the original photos from this frame to ./assets.”

  Write · save_image_fills

• Saves images of layers to disk

  Exports nodes as PNG, JPG or SVG files into a folder you name.

  Try: “Export these frames as PNGs to ./screens.”

  Write · save_screenshots

• Finds UI components in your codebase

  Scans your project for existing components so generated code reuses them. It reads files on the server machine, not in Figma.

  Try: “Which components exist in my project that I could reuse?”

  Files · scan_components

• Makes an ellipse a pie or ring

  Sets arc angles and inner radius on an ellipse to carve a wedge, gauge or donut.

  Try: “Turn this circle into a donut chart ring.”

  Write · set_arc

• Sets up auto-layout on a frame

  Turns auto layout on or off and sets direction, padding, spacing, alignment and wrapping.

  Try: “Make this frame a vertical stack with 16 px spacing.”

  Write · set_auto_layout

• Sets how a layer blends

  Sets the blend mode such as multiply, screen or overlay.

  Try: “Set this shadow layer to multiply.”

  Write · set_blend_mode

• Gives a stroke a brush or varying width

  Applies a Figma Draw look such as a brush, hand-drawn wobble or width that varies along the stroke.

  Try: “Give this line a brush stroke look.”

  Write · set_complex_stroke

• Sets how a layer reacts to resizing

  Pins a layer to edges or center of its parent frame when the frame resizes.

  Try: “Pin this header to the top and stretch it left to right.”

  Write · set_constraints

• Rounds corners

  Sets uniform or per-corner radius and corner smoothing.

  Try: “Round the card's corners to 12 px.”

  Write · set_corner_radius

• Sets shadows and blurs

  Sets a node's effects: drop shadows, inner shadows and blurs.

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

  Write · set_effects

• Sets the fill color or gradient

  Sets solid, gradient or image fills on a node.

  Try: “Fill this rectangle with a blue to purple gradient.”

  Write · set_fills

• Puts a picture inside an existing shape

  Sets a PNG, JPG or GIF as the fill of an existing node, keeping its size, corners and effects.

  Try: “Use ~/Pictures/me.jpg as the fill of this avatar circle.”

  Write · set_image_fill

• Changes the options on a component copy

  Sets variant, toggle, text and swap properties on an instance, using names from get_component_api.

  Try: “Set this button to Size=Large and label "Buy now".”

  Write · set_instance_properties

• Sets a frame's layout grid

  Sets columns, rows or square grids laid over a frame.

  Try: “Add a 12-column grid to this frame.”

  Write · set_layout_grids

• Sets sizing and clipping

  Sets sizing behavior, child alignment properties and whether a frame clips its content.

  Try: “Make this frame hug its content and clip overflow.”

  Write · set_layout_props

• Turns a layer into a mask

  Sets whether a node is a mask and its type: alpha, luminance or geometry.

  Try: “Use this circle as a mask for the photo.”

  Write · set_mask

• Switches a layer to another variable mode

  Sets which mode of a variable collection a node uses, for example the Dark version of a frame.

  Try: “Show this frame in Dark mode.”

  Write · set_node_variable_mode

• Sets layer transparency

  Sets opacity from 0 to 1.

  Try: “Set this overlay to 50% opacity.”

  Write · set_opacity

• Sets exact position

  Sets x and y relative to the parent, or canvas coordinates for top-level nodes.

  Try: “Place this frame at x 0, y 0.”

  Write · set_position

• Replaces prototype interactions

  Replaces all of a node's prototype reactions with new trigger and action pairs.

  Try: “Make this button open the Pricing screen on click.”

  Write · set_reactions

• Changes a repeat pattern

  Replaces how a repeat group repeats its content.

  Try: “Change the dot pattern to 6 columns.”

  Write · set_repeat

• Sets outline color and style

  Sets stroke paints, weight, alignment and dash pattern.

  Try: “Give this box a 2 px dashed gray border.”

  Write · set_strokes

• Moves where path text starts

  Changes where text on a path starts along the path.

  Try: “Start the badge text at the top.”

  Write · set_text_path

• Sets font, size and spacing of text

  Sets typography such as font, size, line height and letter spacing, plus text layout and overflow.

  Try: “Make this heading 32 px bold Inter.”

  Write · set_text_properties

• Styles part of a text layer

  Styles character ranges for inline formatting such as a link, bold word or colored span.

  Try: “Make the word "free" bold and green.”

  Write · set_text_range

• Replaces the text of a layer

  Replaces all characters of a text layer or path text, loading the current fonts first.

  Try: “Change this title to "Welcome back".”

  Write · set_text

• Sets an animation timeline length

  Sets the duration in seconds of a Motion timeline.

  Try: “Make the intro timeline 2 seconds long.”

  Write · set_timeline_duration

• Sets a variable's code name

  Sets the token name for each coding platform so codegen can use it.

  Try: “Set the web code name of color/primary to --color-primary.”

  Write · set_variable_code_syntax

• Sets a variable's value for a mode

  Sets the value of a variable in one mode. The value must match its type.

  Try: “Set color/primary to #0055FF in Light mode.”

  Write · set_variable_value

• Redraws a vector's shape

  Replaces a vector layer's geometry with new path data or a vector network.

  Try: “Redraw this icon with the new path.”

  Write · set_vector

• Shows or hides a layer

  Toggles a node's visibility. A hidden node stays in the tree but is not rendered or exported.

  Try: “Hide the grid overlay.”

  Write · set_visible

• Swaps an instance's component

  Replaces an instance's main component with another local or published one.

  Try: “Swap this button for the Secondary Button component.”

  Write · swap_component

• Matches Figma variables to your design tokens

  Maps variables and shared color styles to tokens in your project's CSS or Tailwind config so code uses existing tokens.

  Try: “Which of my CSS tokens match this file's color variables?”

  Files · token_map

• Ungroups layers

  Ungroups groups, and repeat groups, leaving the contents in place.

  Try: “Ungroup this group.”

  Write · ungroup_nodes

• Unlocks layers

  Unlocks locked nodes so they can be edited again.

  Try: “Unlock the background layers.”

  Write · unlock_nodes

• Edits a shadow or blur style

  Updates an effect style by id; effects replace the whole list when given.

  Try: “Make the Elevation/1 shadow softer.”

  Write · update_effect_style

• Edits a page's prototype flows

  Renames, adds, removes or reorders the named starting points of a page.

  Try: “Rename the first flow to Onboarding.”

  Write · update_flows

• Edits a color style

  Updates the name, paints or description of a paint style. Paints replace the old ones wholesale.

  Try: “Change Brand/Primary to a darker blue.”

  Write · update_paint_style

• Edits a text style

  Updates the font, size, spacing, name or description of a text style.

  Try: “Make the Heading/H1 style 36 px.”

  Write · update_text_style

• Renames a variable set or its modes

  Renames a collection and/or its modes. Ids stay the same, so bindings keep working.

  Try: “Rename the Light mode to Day.”

  Write · update_variable_collection

• Removes a component option

  Removes a show/hide, text or swap property from a component and all references to it.

  Try: “Remove the Show icon property from Button.”

  Delete · delete_component_property

• Permanently deletes layers

  Deletes nodes by id. Missing nodes are skipped. Hiding is the reversible alternative.

  Try: “Delete the three unused frames on this page.”

  Delete · delete_nodes

• Deletes a page

  Deletes a page by id. The current page and the last page cannot be deleted.

  Try: “Delete the page called Old drafts.”

  Delete · delete_page

• Deletes a local style

  Deletes a paint, text, effect or grid style by id.

  Try: “Delete the unused style Brand/Old.”

  Delete · delete_style

• Deletes a whole variable set

  Deletes a collection with all its variables and modes. Bindings fall back to raw values.

  Try: “Delete the collection called Legacy colors.”

  Delete · delete_variable_collection

• Removes a mode from a variable set

  Removes one mode from a collection.

  Try: “Remove the High contrast mode.”

  Delete · delete_variable_mode

• Deletes one variable

  Deletes a variable. Layers bound to it keep their current raw value.

  Try: “Delete the variable color/old-blue.”

  Delete · delete_variable

• Removes an animation preset

  Removes an applied animation style from a node by its applied id.

  Try: “Remove the fade-in from this card.”

  Delete · remove_animation_style

• Removes a keyframe track

  Removes the hand-made keyframe track for one property of a node.

  Try: “Remove the opacity keyframes on the logo.”

  Delete · remove_manual_keyframe_track

• Clears a layer's prototype interactions

  Removes every prototype reaction from a node.

  Try: “Remove all interactions from this button.”

  Delete · remove_reactions

Watch out for

• It can delete pages, layers, styles and variables

  Tools such as delete_nodes, delete_page, delete_style and delete_variable_collection remove things from your open Figma file. Keep tool approval on and work in a duplicate file when trying it. github.com

• It edits your Figma file with 99 write tools

  Write tools change layers, text, styles, variables, components, prototype links and animations. The batch tool rolls back a failed group of edits, but only for edits it accepts. github.com

• Export tools write files to paths the agent picks

  save_screenshots, save_image_fills, export_pdf and export_video write to disk, and design_diff saves snapshots under .figwright/snapshots in your project. The README warns that a prompt-injected agent can misuse this. github.com

• It reads your project files

  scan_components, component_map, icon_map, token_map and analyze_project read your codebase on the server machine. import_image can read a local image path you or the agent give it. github.com

• A local port is open while it runs

  The relay listens on 127.0.0.1:3055 and refuses requests whose Host or Origin is not the plugin or loopback, per the source. FIGWRIGHT_ALLOW_ANY_ORIGIN=1 turns the origin check off, so leave it unset. github.com

Security advisories