What is Figma Unified MCP?
Figma Unified MCP is a Node.js MCP server that lets an AI coding agent read, create, edit and generate code from Figma designs. Reads and variable edits use a Figma access token, and canvas writes go through a Figma plugin bridge on port 18211.
Figma Unified MCP is a Model Context Protocol server for working in Figma. An agent can read file structure, nodes, styles, components, variables and comments, then create frames, shapes, text, components and pages.
It also modifies colors, gradients, auto-layout and effects, adds prototype interactions, and exports nodes as PNG, JPG, SVG or PDF. Code generation targets CSS, React, SwiftUI, HTML and Tailwind.
Three data paths
- REST API reads. File data, styles, components and variables need only a Figma access token and no plugin.
- REST API writes. Variable and token create, update and delete work without the plugin.
- WebSocket plus plugin. Canvas writes such as frames, shapes, text, auto-layout and prototyping need the Figma plugin connected.
Tool profiles
The TOOL_PROFILE environment variable controls how many tools register: minimal, standard or full. Non-full profiles include the figma_run escape hatch, which runs an excluded tool by name when you need it.
Where it fits
Best for
- Reading a Figma file and exporting its design tokens as CSS variables or a Tailwind config.
- Creating components and screens on the canvas, such as a button or a mobile login screen.
- Linking Figma components to code with Code Connect: scan a codebase, fuzzy-match components and publish dev resources.
Not for
- Querying, transforming and creating elements in a Penpot design file by running code through the Plugin API, which the Penpot MCP server covers.
- Validating every edit inside the design tool and refusing unsafe changes before they run, which the Figma Edit MCP server covers.
- Turning frames into platform-ready specs for React Native, Flutter and Unity and writing implementation contracts, which the Figma Spec MCP server covers.
Connect Figma Unified MCP: Read, Create and Generate Code in Figma to your AI client
./setup.shClone the repository
Run
git clone https://github.com/sso-ss/figma-unified-mcp.git, thencd figma-unified-mcp. Node.js 18 or newer is required.Run the setup script
Run the command above on macOS or Linux, or
.\setup.baton Windows. It installs dependencies, builds the MCP server and Figma plugin, and configures Claude Desktop, Claude Code or Cursor.Import the plugin in Figma
In Figma Desktop, go to Plugins, Development, then Import plugin from manifest, and select
figma-plugin/manifest.json.Connect the plugin
Run the Figma Unified MCP Bridge plugin and click Connect. The defaults are
localhost:18211and channelfigma, and status should show Connected.
Endpoints and ports
FIGMA_ACCESS_TOKENYour Figma personal access token, set in the server's envTOOL_PROFILEminimal, standard or fulllocalhost:18211WebSocket port, changeable with the FIGMA_WS_PORT env varWhat you can do with it
- Read, create and modifyAgents read files, nodes, styles, components, variables and comments, create frames, shapes, text and components, and change colors, sizes, positions and effects.
- Variables without a pluginVariable collections and tokens are created, updated and deleted through the REST API, so a Figma access token is enough for them.
- Code generationTools export CSS, React, SwiftUI, HTML and Tailwind output, plus design tokens and a developer handoff spec.
- Code ConnectScan a codebase, fuzzy-match Figma components to code components and publish code file URLs to Figma Dev Mode.
- Accessibility and layout checksCheck color contrast and touch target sizes, and verify spacing, alignment and overflow.
- Prototype toolsAdd click and hover interactions, flows, default transitions, overlays and scroll behavior.
- Text presetsApply 16 built-in typography presets such as
heading-xlandbody-mdwithfigma_set_text_style. - Standalone CLIThe
unified-designcommand line interface uses the same REST API and plugin bridge, and read operations need no plugin.
Tools it exposes
figma_get_file
Get full file structure and metadata.
figma_get_node
Get a specific node by ID.
figma_get_styles
Get styles, from the REST API when a fileKey is given or from plugin local styles when it is omitted.
figma_get_variables
Get all variables and design tokens.
figma_search
Search for nodes by name or type.
figma_create_frame
Create a new frame or artboard.
figma_create_component
Create a reusable component.
figma_set_fill
Set fills as a solid color, linear, radial, angular or diamond gradients, or images.
figma_set_auto_layout
Configure auto-layout, the flexbox equivalent in Figma.
figma_create_variable_collection
Create a variable collection through the REST API.
figma_create_variable
Create a design token variable through the REST API.
figma_create_interaction
Add a click or hover interaction to a node.
figma_check_accessibility
Check contrast ratios and touch target sizes.
figma_generate_react
Generate a React component from a node.
figma_generate_tailwind_config
Generate a Tailwind config.
figma_scan_codebase
Scan a local directory for UI components in React, Vue, Svelte, Angular, Swift, Flutter or Compose.
figma_match_components
Fuzzy-match Figma components to code components with confidence scores.
Frequently asked questions
What is Figma Unified MCP?
Figma Unified MCP is a Model Context Protocol server that lets an AI coding agent read, create, edit and generate code from Figma designs. It combines REST API reads, REST API variable writes and a plugin bridge for canvas edits, with code generation for CSS, React, SwiftUI, HTML and Tailwind.
How do I install Figma Unified MCP?
Clone the repository, run ./setup.sh on macOS or Linux or setup.bat on Windows, then import figma-plugin/manifest.json in Figma Desktop under Plugins, Development. The script installs dependencies, builds the server and plugin, and configures Claude Desktop, Claude Code or Cursor. Node.js 18 or newer is required.
Do I need the Figma plugin?
Only for canvas writes. Reads and variable management work with a Figma access token alone. Creating frames, shapes, text and auto-layout, and prototyping, need the plugin connected, which defaults to localhost on port 18211 with channel figma. Import figma-plugin/manifest.json in Figma Desktop and click Connect, and the status should show Connected.
What do the tool profiles change?
The TOOL_PROFILE environment variable sets how many tools register. Minimal suits daily design work, standard adds prototyping, variables, Code Connect and advanced modify tools, and full registers everything. Non-full profiles include figma_run, which runs an excluded tool by name on demand.
What code can it generate from a Figma design?
It can generate CSS, a React component, a SwiftUI view, semantic HTML and a Tailwind config from node styles. It also exports design tokens, writes a developer handoff spec and builds a complete HTML, CSS and JS code bundle, using tools such as figma_generate_css, figma_generate_react and figma_codegen_bundle.
How does Code Connect work here?
figma_scan_codebase scans a local directory for components in React, Vue, Svelte, Angular, Swift, Flutter or Compose. figma_match_components fuzzy-matches them to Figma components with confidence scores. After you review the scores, figma_publish_dev_resources attaches code links that appear in Figma Dev Mode.
Is there a command line version?
Yes. The unified-design command line interface uses the same REST API and plugin bridge without the MCP overhead. Read operations need no plugin, piped output is compact JSON, and it can run alongside the MCP server because it connects to the existing bridge as a client.