Open Source · Free

Design with
words

Describe a layout, a color system, or a prototype flow. Watch it appear in Figma. An AI design partner that builds while you direct.

Get Started View on GitHub
92+
Actions
14
Skills
5
Code Formats
∞
Ideas / min
Claude Desktop
You
Build a login screen with email, password, and a sign-in button. Use our brand colors and Inter.
Claude
✓ Created "Login" (375×812) with auto-layout
✓ Email & password fields, primary button
✓ Applied brand colors + Inter typography
✓ Spacing, padding, corner radius set
You
Now set up light and dark color tokens, and wire a tap on Sign In to navigate to the dashboard.
Claude
✓ Created "Colors" collection (Light + Dark modes)
✓ Bound tokens to backgrounds & text
✓ Added tap → Dashboard with slide transition
✓ Prototype ready to preview
Works with Claude Desktop, VS Code, Cursor, and more
What it can do

From idea to design,
in one conversation

Inspect files, build layouts, set up tokens, wire prototypes, and export code. All by describing what you want.

Read & Inspect

Files, styles, components, variables, comments, team libraries, version history. No plugin needed.

get_file get_styles search +29

Create & Build

Frames, shapes, text, components, instances, pages. Build designs programmatically through plain English.

create_frame create_text create_component batch

Modify & Style

Fills, strokes, effects, auto-layout, constraints, text styles, corner radius, opacity. Single or batch.

set_fill set_auto_layout set_effects +16

Generate Code

Export designs as React, SwiftUI, HTML, CSS, or Tailwind config. Design tokens and handoff specs included.

generate_react generate_css generate_html generate_tokens

Design Tokens

Create variable collections, define multi-mode values (light/dark), bind to nodes. All via REST API.

create_variable bind_variable create_style +7

Prototyping

Interactions, flows, transitions, overlays, scroll behaviors. Present prototypes directly from a prompt.

create_interaction create_flow setup_overlay +7
How it works

Three paths into Figma

Most things work without a plugin. Add the companion plugin when you need to write to the canvas.

MCP Server (Node.js)
↓ ↓ ↓

REST API / Read

Files, styles, components, variables, comments, team libraries

NO PLUGIN

REST API / Write

Variable and token CRUD: create collections, set values, update, delete

NO PLUGIN

WebSocket + Plugin

Canvas manipulation: frames, shapes, text, prototyping, code generation

PLUGIN REQUIRED
Tool Profiles

Pick your tool set

Smaller profiles use fewer tokens per message. Every profile includes an escape hatch to call any tool on demand.

Minimal
39
tools
~3,500 tokens/msg
Day-to-day design work
  • Read & inspect designs
  • Basic create & modify
  • Screenshot & export
  • figma_run escape hatch
Standard
62
tools
~6,100 tokens/msg
Prototyping + variables + advanced edits
  • Everything in Minimal
  • Prototyping & interactions
  • Variable management
  • Auto-layout & effects
Full
92+
tools
~9,400 tokens/msg
Everything, no restrictions
  • Everything in Standard
  • Code generation (5 outputs)
  • Accessibility checks
  • Boolean operations
Bonus

A CLI for your terminal

The MCP server talks to AI agents. The Unified Design CLI talks to you. 40+ commands, interactive REPL, tab completion, design audits. No AI required.

unified-design 
$ unified-design

╭────────────────────────────────────────────╮
│                                            │
│  ⣿  █ █ █▄ █ █ █▀▀ █ █▀▀ █▀▄     │
│  ⣷  █ █ █ ▀█ █ █▀  █ █▀  █ █     │
│  ⠿  ▀▀▀ ▀  ▀ ▀ ▀   ▀ ▀▀▀ ▀▀▀     │
│                                            │
│  ⣿  █▀▄ █▀▀ █▀▀ █ █▀▀ █▄ █       │
│  ⣷  █ █ █▀   ▀█ █ █▄█ █ ▀█       │
│  ⠿  ▀▀▀ ▀▀▀ ▀▀  ▀ ▀▀▀ ▀  ▀       │
│                                            │
│     Your design workflow, unified        │
│                                            │
╰────────────────────────────────────────────╯

  v0.1.0  ·  47 commands (25 REST · 22 plugin)

  ● Authenticated  ·  via ~/.figmarc
  ○ Plugin  not connected · reads + variables work

  Quick start:
    whoami              Check auth
    file                Inspect file
    find --query <q>     Find nodes
    audit               Design quality report
    snap --node-id <id>  Export screenshot

  Type a command, or /exit to quit.
  ❯ _

Interactive REPL

Run unified-design with no arguments and drop into an interactive shell. Tab completion, short aliases, and live status at a glance.

40+ commands, 10 categories

Read files, search nodes, export images, create shapes, modify styles, manage variables, generate code, run design audits, post comments, explore team libraries.

Design audits

One command scans your file and reports color usage, font consistency, spacing patterns, naming issues, hidden layers, and empty groups.

Works standalone

No AI agent needed. Use it for quick inspections, scripting, automation, or just exploring your Figma files without opening the app.

Setup

Clone, build, go

One script handles dependencies, build, and client configuration.

bash
$ git clone https://github.com/sso-ss/figma-unified-mcp $ cd figma-unified-mcp $ ./setup.sh # Installs deps, builds everything, # configures Claude Desktop / VS Code / Cursor. # Then import the Figma plugin and restart your client.
bash
$ npm install $ npm run build # Import plugin in Figma: # Plugins → Development → Import from manifest # Select figma-plugin/manifest.json # Configure your client (see Config tab) # Restart Claude Desktop
claude_desktop_config.json
{ "mcpServers": { "figma-unified-mcp": { "command": "node", "args": ["/path/to/figma-unified-mcp/dist/server.js"], "env": { "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN", "TOOL_PROFILE": "standard" } } } }