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

Key Capabilities

Design System Extraction

Pull complete design systems from existing Figma files:

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:

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:

FigJam Boards

Create and populate FigJam boards for brainstorming and planning:

Slides Presentations

Build Figma Slides programmatically:

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

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.