Skip to main content
New in v1.22.0 — Comprehensive Accessibility Scanning: Full-spectrum WCAG coverage across design and code. 13 design-side lint rules, component accessibility scorecards with color-blind simulation, code-side scanning via axe-core (104 rules), and design-to-code parity checking. 94+ tools total. See what’s new →

​
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.

Extract

Variables, styles, and components as structured data

Create

Design files, FigJam boards, and Slides presentations

Audit

Accessibility scanning across design and code

​
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

​
Make Your Work Programmable

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

Define in Figma

Create tokens and components as you normally would
2

AI Extracts

Design tokens export to CSS, Tailwind, or Sass automatically
3

Stay in Sync

Single source of truth that developers can query directly
Result: Developers stop guessing at values. Design debt decreases. Documentation stays accurate.

​
Capabilities

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
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
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
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
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 →
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 →
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 →

​
Choose Your Setup

NPX Setup (Recommended)

Full capabilities — 94+ toolsAll tools including real-time monitoring. Requires Node.js and a Figma token.

Cloud Mode

Web AI clients — 83 toolsFull write access from Claude.ai, v0, Replit, or Lovable. Pair with a code — no Node.js needed.

Remote (Read-Only)

Quick exploration — 83 toolsZero setup, just paste a URL. Read design data and take screenshots.
1

Get Figma Token

Visit figma.com/developers/api#access-tokens and create a Personal Access Token
2

Configure Your MCP Client

Add the server to your MCP client config (Claude Code, Cursor, Windsurf, Claude Desktop, etc.):
{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE"
      }
    }
  }
}
3

Connect to Figma Desktop

Install the Desktop Bridge Plugin — one-time import, no debug flags needed. Run it in your Figma file to connect.
4

Restart Your MCP Client

Restart your MCP client to load the new config

Full Setup Guide

Detailed instructions for NPX, Cloud Mode, Local Git, and Remote installation across all AI clients.

​
Resources

Introduction

New to MCP? Start here.

FigJam Guide

AI-powered whiteboarding — stickies, flowcharts, tables

Slides Guide

AI-powered presentations — create, transition, navigate

Use Cases

Real scenarios and workflows

All Tools

Complete reference for 94+ tools

Troubleshooting

Common issues and solutions
Open Source — MIT licensed. Self-host for enterprise requirements or contribute on GitHub.
Support this project — Figma Console MCP is free and open source. If it’s improved your workflow, consider sponsoring its development.