Figma console mcp

Figma Console MCP

Give your AI agent direct access to Figma -- read, create, and edit designs programmatically.

Figma Console MCP is an MCP server with 92+ tools that bridges AI agents and Figma. It supports design system extraction, component creation, variable management, FigJam boards, and Slides presentations.

---

When to Use

Use this skill when an agent needs to:

• Extract design systems -- pull colors, typography, spacing, components from existing Figma files
• Create UI components -- build frames, shapes, text, and auto-layout structures via natural language
• Manage design tokens -- read/create/update Figma variables and styles
• Visual debugging -- capture screenshots, inspect component properties for development
• FigJam collaboration -- create stickies, connectors, tables for brainstorming boards
• Slides presentations -- build and manage Figma Slides programmatically

Don't use when you only need static image exports (use Figma REST API directly) or when working with non-Figma design tools.

---

Prerequisites

Figma Personal Access Token (PAT)

Generate at: https://www.figma.com/developers/api#access-tokens

Required scopes:

• File content → Read
• Variables → Read
• Comments → Read + Write

For Write Access (creating/editing designs)

• Figma Desktop app (not web) with the Desktop Bridge plugin installed
• The Desktop Bridge plugin is a one-time import -- it auto-updates via its bootloader

For NPX Mode

• Node.js 18+
• Environment variable: ENABLE_MCP_APPS=true

---

Setup

Three connection modes, depending on your environment:

Mode 1: NPX (Recommended -- Full 92+ Tools)

Best for: Local AI agents, CLI-based workflows, full read+write access.

Add to your MCP client configuration (e.g. claude_desktop_config.json, mcp.json):

{
  "mcpServers": {
    "figma-console-mcp": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp"],
      "env": {
        "FIGMA_PAT": "<your-figma-personal-access-token>",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Requirements: Node.js 18+, Figma Desktop with Desktop Bridge plugin for write operations.

Mode 2: Cloud Mode (82 Tools -- No Node.js)

Best for: Web-based AI clients (ChatGPT, Gemini, etc.) that support MCP but can't run Node.js.

1. Go to https://figma-console-mcp.southleft.com/
2. Connect your Figma account
3. Add the provided MCP endpoint to your AI client

Key advantage: Uses the Figma Plugin API instead of the REST API -- this means variables work on ALL Figma plans, not just Enterprise.

Limitation: 82 tools (no local file system tools). Requires Figma Desktop with Desktop Bridge.

Mode 3: Remote SSE (22 Tools -- Read-Only)

Best for: Quick read-only access, no Figma Desktop needed.

{
  "mcpServers": {
    "figma-console-mcp": {
      "url": "https://figma-console-mcp.southleft.com/sse",
      "headers": {
        "Authorization": "Bearer <your-figma-pat>"
      }
    }
  }
}

Limitation: Read-only -- no design creation or editing. Uses REST API only (22 tools).

Mode Comparison

Feature	NPX (Full)	Cloud Mode	Remote SSE
Tools available	92+	82	22
Read designs	✅	✅	✅
Create/edit designs	✅	✅	❌
Variables (all plans)	❌ (Enterprise only via REST)	✅	❌
Requires Node.js	✅	❌	❌
Requires Figma Desktop	✅ (for writes)	✅	❌

---

Key Capabilities

Design System Extraction

Pull complete design systems from existing Figma files:

Tool	Purpose
figma_get_design_system_kit	Extract full design system (colors, typography, spacing, effects)
figma_get_variables	Read all variables/tokens from a file
figma_get_styles	Get paint, text, effect, and grid styles
figma_get_component	Inspect a specific component's structure

Example -- Extract design tokens:

Agent prompt: "Extract the design system from file XYZ and output it as CSS custom properties."

Tools used:
1. figma_get_design_system_kit (fileKey: "abc123") → returns colors, typography, spacing
2. Agent transforms the output into CSS variables

Design Creation & Editing

Build and modify designs programmatically:

Tool	Purpose
figma_execute	Execute arbitrary Figma plugin commands (create frames, shapes, text)
figma_create_variable	Create new variables/tokens
figma_arrange_component_set	Auto-arrange component variants in a set

Example -- Create a button component:

Agent prompt: "Create a primary button component with label text, 16px padding, rounded corners."

Tools used:
1. figma_execute → create frame with auto-layout, padding, corner radius
2. figma_execute → add text node with label
3. figma_execute → set fill color from design system

Visual Context & Development Handoff

Get visual context for code implementation:

Tool	Purpose
figma_get_component_for_development	Get component specs optimized for developers (props, variants, spacing)
figma_capture_screenshot	Capture a screenshot of any node or frame

FigJam Boards

Create and populate FigJam boards for brainstorming and planning:

Tool	Purpose
figjam_create_sticky	Add sticky notes
figjam_create_connector	Draw connectors between elements
figjam_create_table	Create data tables

Slides Presentations

Build Figma Slides programmatically:

Tool	Purpose
figma_create_slide	Create a new slide
figma_add_text_to_slide	Add text content to slides
figma_set_slide_transition	Set slide transitions

---

Workflow Examples

1. Extract Design System → Implement in Code

Step 1: Extract the design system
  → figma_get_design_system_kit(fileKey: "your-file-key")
  → Returns: colors, typography scales, spacing tokens, effects

Step 2: Extract variables for token mapping
  → figma_get_variables(fileKey: "your-file-key")
  → Returns: all variable collections with values and modes

Step 3: Agent generates code
  → Transform tokens into CSS custom properties, Tailwind config, or design token JSON
  → Output structured token files (e.g., tokens.css, theme.ts)

2. Create UI Components via Natural Language

User: "Create a card component with an image placeholder, title, description, and a CTA button."

Agent workflow:
1. figma_execute → Create outer frame (auto-layout, vertical, 16px gap)
2. figma_execute → Add image placeholder rectangle (fill: gray, 16:9 ratio)
3. figma_execute → Add title text (24px, bold)
4. figma_execute → Add description text (16px, regular, secondary color)
5. figma_execute → Create button frame (auto-layout, horizontal, padding 12/24)
6. figma_execute → Add button label text
7. figma_arrange_component_set → Clean up layout

3. Manage Design Tokens / Variables

User: "Add a new 'warning' color token set: warning-50 through warning-900."

Agent workflow:
1. figma_get_variables → Check existing variable collections
2. figma_create_variable → Create warning-50 (#FFF8E1)
3. figma_create_variable → Create warning-100 (#FFECB3)
   ... (continue for each shade)
4. figma_get_variables → Verify all tokens were created correctly

4. "Brand Therapy" -- Inspect & Improve Existing Brand

User: "Analyze our current brand file and suggest improvements."

Agent workflow:
1. figma_get_design_system_kit → Extract current brand system
2. figma_capture_screenshot → Visual audit of key screens
3. Agent analyzes:
   - Color contrast ratios (accessibility)
   - Typography consistency
   - Spacing rhythm
   - Component reuse patterns
4. Agent creates a FigJam board with findings:
   - figjam_create_sticky → Add observation notes
   - figjam_create_connector → Link related findings
   - figjam_create_table → Summary matrix of issues and suggestions

---

Gotchas & Tips

Desktop Bridge Plugin

• One-time setup: Import the plugin into Figma Desktop via the MCP server's instructions
• Auto-updates: The plugin uses a bootloader pattern -- once installed, it updates itself
• Required for: All write operations (NPX and Cloud Mode)
• Not needed for: Remote SSE (read-only mode)

Cloud Mode vs REST API

Cloud Mode connects through the Figma Plugin API, not the REST API. This is important because:

• Variables work on ALL Figma plans (Starter, Professional, Organization, Enterprise)
• REST API variable access requires Enterprise plan
• If your team isn't on Enterprise but needs variable/token access → use Cloud Mode

Environment Variables

For NPX mode, ensure ENABLE_MCP_APPS=true is set:

# In your shell
export ENABLE_MCP_APPS=true

# Or in the MCP config (recommended)
"env": { "ENABLE_MCP_APPS": "true" }

File Keys

Most tools require a Figma fileKey. Extract it from the Figma URL:

https://www.figma.com/design/ABC123xyz/My-Design-File
                              ^^^^^^^^^^^
                              This is the fileKey

Rate Limits

• The Figma REST API has rate limits. The MCP server handles retries internally.
• For bulk operations (many variable creates), add small delays between calls.
• Cloud Mode (Plugin API) has more generous limits than REST API.

Common Issues

Problem	Solution
"Plugin not found"	Install Desktop Bridge plugin in Figma Desktop
Variables return empty	Check PAT has "Variables Read" scope; or use Cloud Mode for non-Enterprise
Write operations fail	Ensure Figma Desktop is running with Desktop Bridge active
NPX won't start	Check Node.js 18+ and ENABLE_MCP_APPS=true
SSE connection drops	Remote SSE is stateless -- reconnect automatically handled by MCP client

---

References

• Documentation: https://docs.figma-console-mcp.southleft.com/
• GitHub: https://github.com/southleft/figma-console-mcp
• npm: https://www.npmjs.com/package/figma-console-mcp
• Website: https://figma-console-mcp.southleft.com/

---

🐾 Built for Yesterday's UI Designer Agent (Walsh persona) and any agent that needs to speak Figma.