Accuracy & safety fixes (latest v1.40.9): Nine patches since v1.40.0’s Design System Extraction, driven by community reports. Generated component docs now describe every variant accurately — backgrounds, hidden layers and the properties that show them, per-corner radius and border tokens, typography and layer structure across variants, and source links pinned to a commit. figma_export_tokens can no longer overwrite a token file from the wrong Figma file, overrides in extended variable collections are visible, min/max sizing survives every JSON extraction path, colors set to another color at an opacity export and import with their link intact, and the published package passes npm audit cleanly. Server-only — no plugin re-import needed. 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 is a design-system-focused MCP server. It connects AI assistants to Figma through the Desktop Bridge plugin and the REST API, so they can read your design system, change it, and check it against your code.

Bidirectional

Figma ⇄ code. Export variables to 10 token formats and import DTCG edits back with round-trip IDs, extract a design system from an existing codebase, and compare components with their code.

Writes to Figma

Variables, components and component sets, Slots, annotations, FigJam boards, and Slides, plus any Plugin API code through figma_execute.

Deterministic checks

Rule-based checks that return the same result every run: design-code parity, accessibility on the canvas and in code, and design-system health.

Facts, not guesses

Exact token names and values, variants, variable bindings, and states as structured, verifiable data. The server doesn’t prescribe a framework or house style, so the AI writes code in your team’s own stack and conventions instead of guessing values from a screenshot.

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

For Designers
For Developers
For Web AI Clients

Make Your Work Programmable

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

Define in Figma

Create tokens and components as you normally would

AI Extracts

Design tokens export to CSS, Tailwind, or Sass automatically

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

Design System Extraction

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

Codebase → Design System Extraction

Turn a production codebase into a design system — analyze, tokenize, scaffold, port, verify. Local Mode only (these tools read and write your local filesystem). The extracted tokens import straight into Figma variables via figma_import_tokens.

figma_ds_analyze — Scan one or more app codebases: framework/styling/vendor detection, usage-ranked component inventory (vendored / wrapped / pure-vendor / bespoke), variant inference from real call sites, duplicate detection, and architecture classification (atomic levels, specializations, missing primitives)
figma_ds_extract_tokens — Mine styling into DTCG tokens with per-token provenance: multi-mode CSS custom properties, SCSS variables, Tailwind config values, shadcn HSL triples, utility-class frequency mining
figma_ds_scaffold — Generate the design-system package: token files, token/typography/iconography showcase pages, framework peer deps
figma_ds_setup_storybook — Wire a fresh Storybook workshop to the extraction: the app’s real theme layers and fonts, plus a theme toolbar from the extracted modes
figma_ds_extract_component — Per-component porting manifest with a ready-to-adapt CSF3 story scaffold
figma_ds_verify — Deterministic fidelity evals + Figma round-trip readiness
figma_ds_status — Porting progress persisted across sessions

Design System Health Audit

Score your design system’s health with a deterministic six-category audit — naming & semantics, token architecture, component metadata, accessibility, consistency, and coverage — from any MCP client.

figma_audit_design_system_report — Scored report as data: bounded summary, per-category chunked drill-down, clamped full JSON. Live-first fileKey-verified data with the source disclosed; 5-minute cache; every finding states whether this MCP can auto-fix it (with the exact tools) or needs a design decision
figma_audit_design_system — The same audit as a visual dashboard (MCP Apps hosts with ENABLE_MCP_APPS=true)

Shared Library Inspection

Inspect components and variables from team libraries the current file has subscribed — without needing the library file’s URL or an Enterprise plan.

figma_get_library_component_by_key — Resolve any component key to full props + variants + visual specs. Tries /v1/component_sets/{key} then falls back to /v1/components/{key}. Returns componentPropertyDefinitions, every variant with its published key, and per-variant visual specs.
figma_get_library_components — Discover all components in a library file (requires the library file URL/key)
figma_get_library_variables — List library tokens. Plugin API path works on every Figma plan; filter by libraryName, collectionName, or resolvedType.
figma_import_library_variable — Import a library variable into the current file. Returns a local id ready for figma_set_fills or any variable-binding tool.

Plugin Debugging

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

Design Creation

Execute Figma Plugin API code directly. Build, modify, and organize components programmatically.

figma_execute — Run any Plugin API code, optionally in a specific connected file via fileKey (Local Mode)
figma_execute_across_files — Run the same script in several connected files at once (Local Mode)
figma_create_component_set — Build a full variant set from an axes matrix (or combine existing components) in one call — variant keys returned, ready to instantiate
figma_arrange_component_set — Organize variants with labels
figma_create_slot / figma_append_to_slot — Add slots to components and populate them on instances (Figma Slots, GA at Config 2026), plus figma_get_slots, figma_reset_slot, and figma_add_slot_property
figma_create_variable — Add design tokens
Plus dedicated tools for creating, moving, resizing, cloning, renaming, and deleting nodes, and for text, fills, strokes, image fills, instance properties, and component properties

Design-Code Parity & Documentation

Compare a Figma component with its code implementation and generate documentation from both.

figma_check_design_parity — Deterministic comparison of a Figma component with its code: visual properties, spacing, typography, token usage, component API, accessibility, and metadata, with a parity score and a fix list
figma_generate_component_doc — Markdown component documentation: anatomy, per-variant color, spacing, and typography tokens, annotations, and a parity section. The optional history parameter adds a changelog from Figma version history and git log
figma_get_component_for_development_deep / figma_analyze_component_set — Full component trees with resolved token names, and variant sets as state machines with CSS pseudo-class mappings

Version History

Work with a file’s Figma version history.

figma_get_file_versions / figma_get_file_at_version — List versions and snapshot a file or node at a past version
figma_diff_versions / figma_get_changes_since_version — Structured diffs, including component property and binding changes
figma_generate_changelog — Markdown changelog for release notes
figma_blame_node — Find when, and by whom, a property or variant was introduced

Token Sync

Bidirectional design token synchronization — a full code⇄Figma round-trip that replaces Style Dictionary and Tokens Studio’s export pipeline.

figma_export_tokens — Export variables to DTCG JSON (legacy hex or DTCG 2025.10 object dialect via dtcgDialect), CSS custom properties, Tailwind v4/v3, SCSS, TypeScript, JSON, Style Dictionary v3, or Tokens Studio. Round-trip safe via $extensions["figma-console-mcp"]; scopes and codeSyntax metadata included.
figma_import_tokens — Push code-side edits back with a full apply phase: value updates, creates for missing collections/variables, renames matched by variable ID, real VARIABLE_ALIAS writes, and deletes gated strictly behind strategy: "replace". Accepts both DTCG dialects; dry-run previews.
figma_setup_design_tokens — Bootstrap a collection + modes + variables atomically, with alias values via DTCG brace references ("{color.blue.600}")

Visual Context

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

FigJam Boards

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 →

Slides Presentations

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 →

Accessibility Scanning

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 — 121 toolsAll tools including real-time monitoring. Requires Node.js and a Figma token.

Cloud Mode

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

Remote (Read-Only)

Quick exploration — read-onlyZero setup, just paste a URL. Read design data and take screenshots.

Quick Start: NPX Setup (Recommended)

Get Figma Token

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

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"
      }
    }
  }
}

Connect to Figma Desktop

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

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

Getting Started

Guides

Reference

Figma Console MCP

Your Design System as an API

Bidirectional

Writes to Figma

Deterministic checks

Facts, not guesses

The Problem

Three Workflows

Make Your Work Programmable

Query Design Systems Directly

Design from Any AI Chat

Capabilities

Choose Your Setup

NPX Setup (Recommended)

Cloud Mode

Remote (Read-Only)

Quick Start: NPX Setup (Recommended)

Full Setup Guide

Resources

Introduction

FigJam Guide

Slides Guide

Use Cases

All Tools

Troubleshooting

​Your Design System as an API

Bidirectional

Writes to Figma

Deterministic checks

Facts, not guesses

​The Problem

​Three Workflows

​Make Your Work Programmable

​Query Design Systems Directly

​Design from Any AI Chat

​Capabilities

​Choose Your Setup

NPX Setup (Recommended)

Cloud Mode

Remote (Read-Only)

​Quick Start: NPX Setup (Recommended)

Full Setup Guide

​Resources

Introduction

FigJam Guide

Slides Guide

Use Cases

All Tools

Troubleshooting

Your Design System as an API

The Problem

Three Workflows

Make Your Work Programmable

Query Design Systems Directly

Design from Any AI Chat

Capabilities

Choose Your Setup

Quick Start: NPX Setup (Recommended)

Resources