Skip to main content
New in v1.2 — Component set arrangement with professional labeling, improved variable management, and enhanced screenshot capabilities.

​
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

Components and designs via natural language

Debug

Real-time console logs from your plugins

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

​
Two 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_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

​
Quick Start

1

Open Settings

Claude menu → Settings → Connectors
2

Add Connector

Click “Add Custom Connector”
3

Configure

Name: Figma Console URL: https://figma-console-mcp.southleft.com/sse
4

Connect

OAuth authentication happens automatically on first use

Full Setup Guide

Remote, Local, and NPX installation options with detailed configuration instructions.

​
Deployment Options

Remote Mode

Zero setup requiredConnect via hosted server at figma-console-mcp.southleft.com. OAuth authentication, no token management. Best for design system extraction.

Local Mode

Full capabilitiesRun locally with Desktop Bridge plugin. Console capture, design creation, variable management. Best for plugin development.

Compare Modes

Detailed comparison of Remote and Local mode capabilities.

​
Resources

Introduction

New to MCP? Start here.

Use Cases

Real scenarios and workflows

All Tools

Complete reference for 36+ tools

Troubleshooting

Common issues and solutions
Open Source — MIT licensed. Self-host for enterprise requirements or contribute on GitHub.