---
title: "Figma Console MCP"
description: "Your design system as an API. Connect AI to Figma for extraction, creation, debugging, and token sync."
---

<Note>
**New in v1.28.0 (patched v1.28.1) — Full Formatter Coverage:** `figma_export_tokens` now ships 10 fully-implemented output formats — DTCG JSON, CSS custom properties, Tailwind v4 `@theme inline`, Tailwind v3 config, SCSS, TypeScript module, JSON flat/nested, Style Dictionary v3, and Tokens Studio. Pull Figma variables, emit code in any popular styling flavor — no third-party build tool install required. v1.28.1 fixes four alias-resolution bugs found in live-fire testing against multi-tier semantic-token design systems. 103 tools total. [See what's new →](/tools#-token-sync-tools)
</Note>

# Your Design System as an API

Design systems shouldn't be static documents locked in a visual tool. They should be **queryable**, **programmable**, and **always in sync** with your codebase.

Figma Console MCP bridges the gap between design and development—giving AI assistants complete access to your Figma files for extraction, creation, and debugging.

<Columns cols={4}>
  <Card title="Extract" icon="download">
    Variables, styles, and components as structured data
  </Card>
  <Card title="Sync" icon="arrows-rotate">
    Bidirectional token sync between Figma and your codebase
  </Card>
  <Card title="Create" icon="wand-magic-sparkles">
    Design files, FigJam boards, and Slides presentations
  </Card>
  <Card title="Audit" icon="universal-access">
    Accessibility scanning across design and code
  </Card>
</Columns>

---

## The Problem

Every time a developer opens Figma, eyeballs the padding, and writes `margin: 16px` instead of `var(--spacing-md)`—that's design system debt.

Every design token manually transcribed to CSS, every component spec described in a Slack message, every "just check Figma" that leads to approximation—it compounds.

**What if your design system was queryable?**

```
"Get the Button component specs and implement it in React with our design tokens."
```

Real component data. Real token values. Real code that uses your actual design system.

---

## Three Workflows

<Tabs>
  <Tab title="For Designers">
    ### Make Your Work Programmable

    Your design system is a product. Developers are your users. Give them an API.

    <Steps>
      <Step title="Define in Figma">
        Create tokens and components as you normally would
      </Step>
      <Step title="AI Extracts">
        Design tokens export to CSS, Tailwind, or Sass automatically
      </Step>
      <Step title="Stay in Sync">
        Single source of truth that developers can query directly
      </Step>
    </Steps>

    **Result:** Developers stop guessing at values. Design debt decreases. Documentation stays accurate.
  </Tab>
  <Tab title="For Developers">
    ### Query Design Systems Directly

    Stop treating Figma as a screenshot machine.

    <Steps>
      <Step title="Connect">
        Add the MCP server to your AI assistant
      </Step>
      <Step title="Query">
        Ask for token values, component specs, or visual references
      </Step>
      <Step title="Implement">
        Get code that uses your actual design system variables
      </Step>
    </Steps>

    **Result:** Implement components correctly the first time. Auto-generate token files. Debug plugins without Figma's dev tools.
  </Tab>
  <Tab title="For Web AI Clients">
    ### Design from Any AI Chat

    Use Claude.ai, v0, Replit, or Lovable to create and modify Figma designs — no local install needed.

    <Steps>
      <Step title="Open Figma">
        Run the Desktop Bridge plugin in your file
      </Step>
      <Step title="Tell Your AI to Connect">
        Say "Connect to my Figma plugin" — enter the pairing code in the plugin
      </Step>
      <Step title="Design with AI">
        Create components, update variables, and manipulate designs through natural language
      </Step>
    </Steps>

    **Result:** Full write access from any web-based AI client. Variables on any Figma plan. No Node.js required.
  </Tab>
</Tabs>

---

## Capabilities

<AccordionGroup>
  <Accordion title="Design System Extraction" icon="palette">
    Extract variables, styles, and components as structured data. Export to CSS custom properties, Tailwind config, Sass variables, or JSON.

    - `figma_get_design_system_kit` — **Full design system in one call** — tokens, components, styles, visual specs, and resolved values
    - `figma_get_variables` — Design tokens with multi-format export
    - `figma_get_styles` — Color, text, and effect styles
    - `figma_get_component` — Component metadata or reconstruction spec
    - `figma_get_design_system_summary` — Overview of entire system
  </Accordion>

  <Accordion title="Plugin Debugging" icon="terminal">
    Real-time console log capture from your Figma plugins. No more console.log archaeology.

    - `figma_get_console_logs` — Retrieve logs with filtering
    - `figma_watch_console` — Real-time log streaming
    - `figma_take_screenshot` — Capture UI state for debugging
  </Accordion>

  <Accordion title="Design Creation" icon="paintbrush">
    Execute Figma Plugin API code directly. Build, modify, and organize components programmatically.

    - `figma_execute` — Run any Plugin API code
    - `figma_arrange_component_set` — Organize variants with labels
    - `figma_create_variable` — Add design tokens
    - Plus 20+ node manipulation tools
  </Accordion>

  <Accordion title="Visual Context" icon="image">
    AI sees your components visually and as structured data. Implementation guidance that matches the design.

    - `figma_get_component_for_development` — Visual reference + specs
    - `figma_capture_screenshot` — Node-specific renders
    - `figma_get_component_image` — Export as PNG/SVG
  </Accordion>

  <Accordion title="FigJam Boards" icon="note-sticky">
    Create and read FigJam collaborative whiteboards. Build affinity maps, flowcharts, retrospective boards, and more.

    - `figjam_create_sticky` / `figjam_create_stickies` — Single or batch sticky notes with 9 colors
    - `figjam_create_connector` — Connect nodes with labeled lines for flowcharts
    - `figjam_create_shape_with_text` — Diamonds, ellipses, and engineering shapes
    - `figjam_create_table` — Structured tables with cell data
    - `figjam_get_board_contents` / `figjam_get_connections` — Read everything on the board

    [Full FigJam Guide →](/figjam)
  </Accordion>

  <Accordion title="Slides Presentations" icon="presentation-screen">
    Manage entire Figma Slides presentations. Create, edit, reorder, and navigate slides programmatically.

    - `figma_list_slides` / `figma_get_slide_content` — Read slide data and content trees
    - `figma_create_slide` / `figma_duplicate_slide` / `figma_delete_slide` — Slide lifecycle
    - `figma_set_slide_transition` — 22 transition styles with 8 easing curves
    - `figma_reorder_slides` — Restructure presentation order
    - `figma_add_text_to_slide` / `figma_add_shape_to_slide` — Add content to slides

    [Full Slides Guide →](/slides)
  </Accordion>

  <Accordion title="Accessibility Scanning" icon="universal-access">
    Full-spectrum WCAG coverage across design and code:

    - **Design-side lint** — 14 WCAG checks with AA/best-practice level tagging: contrast, non-text contrast, color-only, focus indicators, disabled context, spacing, alt text, heading hierarchy, reflow, reading order, token misuse
    - **Component audit** — State coverage scoring, focus indicator quality, color-blind simulation (protanopia, deuteranopia, tritanopia)
    - **Code-side scan** — axe-core with 104 rules via JSDOM: ARIA, labels, landmarks, semantics, headings
    - **Parity bridge** — 9 checks ensuring design accessibility intent survives code implementation

    [Full Accessibility Guide →](/tools#-accessibility-tools)
  </Accordion>
</AccordionGroup>

---

## Choose Your Setup

<Columns cols={3}>
  <Card title="NPX Setup (Recommended)" icon="bolt" href="/setup#-npx-setup-recommended">
    **Full capabilities — 95 tools**

    All tools including real-time monitoring. Requires Node.js and a Figma token.
  </Card>
  <Card title="Cloud Mode" icon="cloud-arrow-up" href="/setup#-cloud-mode-web-ai-clients">
    **Web AI clients — 95 tools**

    Full write access from Claude.ai, v0, Replit, or Lovable. Pair with a code — no Node.js needed.
  </Card>
  <Card title="Remote (Read-Only)" icon="cloud" href="/setup#-remote-mode-read-only-exploration">
    **Quick exploration — 95 tools**

    Zero setup, just paste a URL. Read design data and take screenshots.
  </Card>
</Columns>

### Quick Start: NPX Setup (Recommended)

<Steps>
  <Step title="Get Figma Token">
    Visit [figma.com/developers/api#access-tokens](https://www.figma.com/developers/api#access-tokens) and create a Personal Access Token
  </Step>
  <Step title="Configure Your MCP Client">
    Add the server to your MCP client config (Claude Code, Cursor, Windsurf, Claude Desktop, etc.):
    ```json
    {
      "mcpServers": {
        "figma-console": {
          "command": "npx",
          "args": ["-y", "figma-console-mcp@latest"],
          "env": {
            "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE"
          }
        }
      }
    }
    ```
  </Step>
  <Step title="Connect to Figma Desktop">
    Install the Desktop Bridge Plugin — one-time import, no debug flags needed. Run it in your Figma file to connect.
  </Step>
  <Step title="Restart Your MCP Client">
    Restart your MCP client to load the new config
  </Step>
</Steps>

<Card title="Full Setup Guide" icon="book-open" href="/setup">
  Detailed instructions for NPX, Cloud Mode, Local Git, and Remote installation across all AI clients.
</Card>

---

## Resources

<Columns cols={2}>
  <Card title="Introduction" icon="circle-info" href="/introduction">
    New to MCP? Start here.
  </Card>
  <Card title="FigJam Guide" icon="note-sticky" href="/figjam">
    AI-powered whiteboarding — stickies, flowcharts, tables
  </Card>
  <Card title="Slides Guide" icon="presentation-screen" href="/slides">
    AI-powered presentations — create, transition, navigate
  </Card>
  <Card title="Use Cases" icon="lightbulb" href="/use-cases">
    Real scenarios and workflows
  </Card>
  <Card title="All Tools" icon="wrench" href="/tools">
    Complete reference for 103 tools
  </Card>
  <Card title="Troubleshooting" icon="circle-question" href="/troubleshooting">
    Common issues and solutions
  </Card>
</Columns>

---

<Note>
**Open Source** — MIT licensed. Self-host for enterprise requirements or contribute on [GitHub](https://github.com/southleft/figma-console-mcp).
</Note>

<Tip>
**Support this project** — Figma Console MCP is free and open source. If it's improved your workflow, consider [sponsoring its development](https://github.com/sponsors/southleft).
</Tip>
