figma-unified-mcp

Scan a local codebase directory for UI components (React, Vue, Svelte, Swift, Compose, Angular, Flutter). Returns a list of discovered components with their file paths and frameworks. Use this before figma_match_components to find code-to-design mappings.

Match Figma components to codebase components using fuzzy name matching. Requires plugin connection for Figma scanning, and a codebase path for code scanning. Returns a mapping with confidence scores. Review before publishing.

Publish dev resource links to Figma Dev Mode. Attaches code file URLs to component nodes. Run figma_match_components first to generate the mapping, then publish selected matches. The links will appear in Figma's Dev Mode panel for each component.

Get existing dev resources (code links) attached to nodes in a Figma file.

Generate CSS from a node's styles.

Generate React component from a node.

Generate SwiftUI code from a node.

Generate semantic HTML from a node.

Generate Tailwind config from Figma design tokens.

Export design tokens (CSS vars, JSON, SCSS).

Analyze node structure for best codegen strategy.

Get a complete design-to-code bundle in a single call (REST-only, no plugin needed). Returns: - Compact tree with colors, fonts, layout, image refs, gradients, shadows - Image fill URLs (CDN links for raster images) - Vector/icon SVG URLs (rendered via Figma API) - Screenshot of the node (base64 PNG…

Check server, bridge, and REST API status.

Connect to Figma plugin via WebSocket.

Send a raw command to the plugin.

Create a frame with full auto-layout, stroke, and nested children support.

Create a rectangle.

Create an ellipse/circle.

Create a text node. Accepts 'text' or 'content' for the string value.

Create a reusable component with full auto-layout, stroke, and nested children support.

Create an instance of a component.

Create a line.

Create a vector path from points. Much simpler than create_from_svg for charts, curves, and shapes. Supports straight lines and smooth (Catmull-Rom) curves. Examples: - Line chart: points=[{x:0,y:80},{x:50,y:20},{x:100,y:60}], curveType="smooth" - Triangle: points=[{x:50,y:0},{x:100,y:100},{x:0,y:1…

Create a vector node from raw SVG markup. Use this for charts, icons, curves, and any complex shapes that can't be made with rectangles/ellipses/lines. Supports <path>, <circle>, <rect>, gradients, and all SVG elements.

Batch multiple create, modify, and variable operations in one round-trip. Max 200 ops. ALWAYS prefer this over calling individual tools in a loop. Use "$ref:N" to reference node ID from operation N. create_frame/create_component support nested "children" and inline auto-layout params. Commands: cre…

Move a node to a new position.

Resize a node.

Set fill of a node. Supports solid colors, gradients, and images. Simple solid: { nodeId, color: {r,g,b} } Gradient: { nodeId, fills: [{ type:"GRADIENT_LINEAR", gradientStops:[{color:{r,g,b,a},position:0},{color:{r,g,b,a},position:1}] }] } Image: { nodeId, fills: [{ type:"IMAGE", imageUrl:"https://…

Set stroke (border) of a node.

Set node opacity.

Show or hide a node.

Set corner radius of a node.

Update text content. Supports batch via updates array. Accepts 'text' or 'content' for the string value.

Rename a node.

Delete one or more nodes.

Configure auto-layout (flexbox) on a frame.

Apply effects (shadows, blurs) to a node.

Group nodes together.

Set resize constraints for a node.

Move a node to a different parent.

Clone a node with optional offset.

Get annotations on a node or the whole document.

Set annotation(s) on node(s).

Get override properties from a component instance.

Apply overrides to component instances.

Add a prototype interaction to a node.

Remove all interactions from a node.

Create a prototype flow starting point on a frame.

Remove a flow starting point from a frame.

Get all prototype flows in the current page.

Set default transition for this frame.

Configure a frame as an overlay in prototypes.

Configure scrolling for a frame in prototypes.

Get all interactions on a node.

Open prototype presentation view.

Get file document tree. Defaults to depth=2 (pages + top-level frames). Set higher depth for deeper traversal, or use figma_get_node for a specific subtree.

Get a node with properties, styles, and children.

Get multiple nodes in one request. Batch alternative to get_node.

Get styles. fileKey→REST file styles, omit→plugin local styles.

Get components. source: file (REST — published components with importable keys), local (plugin — current page), library (plugin — discovered from instances on canvas).

Get local variables and collections (design tokens). Filter by type or name to reduce token usage.

Get comments on a file.

Post a comment on a file or node.

Search for nodes by name or type in a file.

Get currently selected nodes.

Get published components from a team. Requires Organization or Enterprise plan.

Get published styles from a team.

Get a published component by key.

Get a published style by key.

Find external library components/styles used in a file.

Get version history of a file.

List all projects in a team.

List all files in a project.

Scan text nodes with chunking for large pages.

Find nodes by type (FRAME, TEXT, COMPONENT, etc.).

Select and scroll viewport to a node.

Select multiple nodes and scroll to show them.

Get enabled library variable collections.

Get variables from a library collection by key. Filter by type or name to reduce token usage.

Get viewport position, zoom, and visible bounds.

Import a published component by its library key and create an instance. Get keys from figma_get_components with source='file'. IMPORTANT: This only works for components published within the same Figma team library. For external/linked design system libraries, use figma_clone_node to clone an existin…

Import library styles by key so they become available locally. Use figma_get_styles to find keys. Supports batch import via styleKeys array. After import, styles can be applied with figma_apply_style by name.

Map Figma components to source code locations.

Extract design system rules: colors, typography, spacing, etc.

Export a node as PNG/SVG/PDF with base64 data.

Create a new page. Optionally switch to it.

Switch to a page by name, ID, or index.

Boolean op (union/subtract/intersect/exclude) on 2+ nodes.

Comprehensive WCAG 2.1 accessibility audit. Works via REST API (no plugin needed) when fileKey is provided, or via plugin bridge for the live canvas. Checks: text contrast (1.4.3/1.4.6), non-text contrast (1.4.11), touch targets (2.5.5/2.5.8), alt text (1.1.1), typography & text spacing (1.4.4/1.4.…

Check overlaps, bounds, padding, alignment issues.

Manage library/component/style cache. action: 'stats' (view cached keys), 'clear' (clear all), 'invalidate' (clear by prefix, e.g., 'get_components'). Cache auto-expires after 5 minutes. Cached tools: get_components, get_styles, get_library_collections, get_library_variables, get_team_components, ge…

Create a variable collection for design tokens. Uses REST API — no plugin required.

Create a variable (COLOR, FLOAT, STRING, BOOLEAN). Uses REST API — no plugin required.

Set variable value for a mode. Uses REST API — no plugin required. Use mode ID (get from figma_get_variables).

Update variable properties (name, description, scopes). Uses REST API — no plugin required.

Delete a variable. Uses REST API — no plugin required.

Delete a variable collection. Uses REST API — no plugin required.