figma-free-mcp

Analyze a React/TSX component file and create corresponding Figma frames and elements

Convert CSS class definitions to Figma local paint/text styles

Generate Figma component variants (default, hover, active, disabled) from a base component

List all variable collections and their variables in the current Figma file. Returns collections with their modes and variables.

Create or update a variable in a Figma variable collection. Creates the collection if collectionName is provided and it doesn

Bind a variable to a node property in Figma. Call once per field — for multiple fields, call multiple times.

Switch the variable mode on a node for a specific collection. This changes which mode

Create an instance of a component in Figma. x/y are local coordinates relative to parent.

Convert an existing node (frame, group, etc.) into a reusable component in Figma. Returns the component key needed by create_component_instance.

Create a component set (variants) from multiple component nodes in Figma

Change the variant properties of a component instance without recreating it. This preserves instance overrides and is more efficient than delete + create workflow.

Apply an image to a node from a URL or base64 data

Extract image fill metadata (hash, size, scale mode, rotation, filters) from a node

Replace the existing image on a node with a new one, keeping the image transform

Download image from Figma and save to local file

Adjust image position, scale, and rotation within a node. Rotates the IMAGE inside the node, not the node itself.

Apply color and light adjustments to an image fill. All values range -1.0 to 1.0.

Run many Figma commands sequentially in ONE round trip. Use this instead of calling create_*/set_* tools one by one when building a screen — it collapses hundreds of tool calls into one and returns a compact id map.

Get detailed information about the current Figma document

Get information about the current selection in Figma

Get info about a node. Defaults to depth 1 (node + direct children) and 50 children per level; raise depth for deeper subtrees.

Get info about multiple nodes. Defaults to depth 1 and 50 children per level; raise depth for deeper subtrees.

Get all styles from the current Figma document

Get all local components from the Figma document

Get available components from team libraries in Figma

Scan all text nodes in the selected Figma node

Join a specific channel to communicate with Figma

Export a node as an image from Figma. Inline images are token-expensive: scale is capped at 2 (default 1).

Create a new page in the current Figma document

Delete a page from the current Figma document

Rename an existing page in the Figma document

Get all pages in the current Figma document

Switch to a specific page in the Figma document

Duplicate an existing page in the Figma document, creating a complete copy of all its contents

Automatically detect and connect to an active Figma plugin channel. No channel ID needed. ALWAYS call this tool first before any other Figma tool. Never ask the user for a channel ID.

List all active Figma plugin channels with the file and page each one is connected to. Use this to pick the right channel when multiple Figma files are open.

Connect to a Figma channel by matching its file name (and optional page name) instead of a channel ID. Use when multiple Figma files are open and you know the target file name.

Run a single Figma command on a specific open file WITHOUT switching the active channel. Use this to edit multiple files concurrently in one session: call it repeatedly with different fileName values. The target file must have its own plugin instance running. params is the same JSON you would pass to the matching tool.

Import an SVG string as a vector node in Figma. The SVG is sanitized (scripts and external resources are stripped) before import. Max 500KB.

Export a single node as an SVG string from Figma, including nested children. Output is capped at maxChars (default 20000).

Create a rectangle in Figma. x/y are local coordinates relative to parent.

Create a frame in Figma. x/y are local coordinates relative to parent. Returned id can be used as parentId for children.

Create a text node in Figma. x/y are local coordinates relative to parent.

Create an ellipse in Figma. x/y are local coordinates relative to parent.

Create a polygon in Figma. x/y are local coordinates relative to parent.

Create a star in Figma. x/y are local coordinates relative to parent.

Group nodes in Figma

Ungroup a group or frame in Figma, releasing its children to the parent

Clone an existing node in Figma. x/y are local coordinates relative to parent.

Insert a child node inside a parent node in Figma (re-parents the child)

Flatten a node in Figma (e.g., for boolean operations or converting to path)

Perform a boolean operation (union, subtract, intersect, exclude) on two or more nodes. All nodes must share the same parent.

Set the text content of an existing text node in Figma

Replace the text of many text nodes at once, in batches. Faster than calling set_text_content repeatedly.

Set the font family and style of a text node in Figma

Set the font size of a text node in Figma

Set the font weight of a text node in Figma

Set the letter spacing of a text node in Figma

Set the line height of a text node in Figma

Set the paragraph spacing of a text node in Figma

Set the text case of a text node in Figma

Set the text decoration of a text node in Figma

Get text segments of a text node grouped by a styling property

Apply a text style to a text node in Figma

Load a font in Figma so it can be applied to text nodes

Set the text alignment of a text node in Figma. Use textAlignHorizontal RIGHT for RTL/Arabic text.

Set the fill color of a node in Figma. Replaces all existing fills. Alpha comes from the hex (#RRGGBBAA); without it alpha is 1 (opaque).

Set the stroke color of a node in Figma (default weight 1)

Recursively change all stroke and fill colors of a node and all its descendants. Works like Figma

Move a node to a new position in Figma. x/y are local coordinates relative to parent.

Resize a node in Figma

Delete a node from Figma

Set the corner radius of a node in Figma

Configure auto layout properties for a node in Figma. All padding/spacing values are in px.

Set the visual effects of a node in Figma. Replaces all existing effects.

Apply an effect style to a node in Figma

Rotate a node in Figma. Note: locked nodes can still be rotated — the Plugin API bypasses the UI lock by design.

Set visibility, lock state, and/or opacity of a node in Figma. Only provided properties are changed; omitted properties remain unchanged.

Change the z-order (layer order) of a node within its parent. Distinct from insert_child which re-parents a node — reorder_node changes position within the same parent.

Convert a group or shape node into a frame in Figma. Preserves position, size, visual properties, and children. Useful for converting groups into auto-layout-capable frames.

Set a gradient fill on a node in Figma. Replaces all existing fills (same behavior as set_fill_color).

Set an image fill on a node from base64-encoded image data. Supports PNG, JPEG, GIF, WebP.

Apply layout grids to a frame node in Figma. Replaces existing grids. All sizes are in px.

Read layout grids from a frame node in Figma

Set guides on a page in Figma. Replaces all existing guides on the page.

Read guides from a page in Figma

Add an annotation label to a node in Figma. Uses the proposed Annotations API — requires Figma Desktop with enableProposedApi.

Read annotations from a node in Figma. Uses the proposed Annotations API.

Rename a node (frame, component, group, etc.) in Figma

Get all FigJam-specific elements (stickies, connectors, shapes with text, sections, stamps) on the current page. Use this to read the contents of a FigJam board.

Create a sticky note in a FigJam board. Sticky notes are the primary way to add text content in FigJam. x/y are canvas coordinates.

Update the text content of an existing FigJam sticky note.

Create a FigJam shape with text inside. Useful for flowcharts, diagrams, and process maps. x/y are canvas coordinates.

Create a connector (arrow or line) in FigJam. Connectors can link two existing nodes by ID, or connect arbitrary canvas positions. Use this to draw flow arrows between stickies, shapes, etc.

Create a FigJam section. Sections group and organise content on the board and appear as labelled coloured regions. x/y are canvas coordinates.

List all pages in the Figma document with frame counts and duplicate detection

Find and remove duplicate pages, keeping the one with more content

Reorder pages alphabetically or by a custom number prefix (01., 02., etc.)

Find and optionally delete pages with no children/frames

Read a CSS file and sync all CSS variables to Figma variable collections

Read Figma variable collections and generate a CSS file with custom properties

Compare CSS variables with Figma variables and report differences

Read a design system policy markdown file and apply styles to Figma

Audit a Figma file for design system policy violations