Which integrations are available for this server?

Generates Angular component code from Figma designs. Reads and simplifies Figma design data, extracts design tokens, generates code, and performs accessibility audits and design-vs-code drift detection via the Figma REST API. Generates Flutter widget code from Figma designs. Generates React component code (inline styles or Tailwind CSS) from Figma designs. Generates Svelte component code from Figma designs. Generates SwiftUI component code from Figma designs.

How do I use OpenFigma MCP?

1. Click on "Deploy Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@OpenFigma MCP extract design tokens from my app figma file" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

OpenFigma MCP

by Shivam990q

Overview Schema Source Related Servers Discussions Admin

JavaScript

Remote

OpenFigma MCP (Enterprise Beast Edition v2.0)

The Autonomous Design Fabric (ADF). Zero-dependency, ultra-high-throughput Model Context Protocol (MCP) server for Figma. Reads online designs via free PAT or offline .fig Kiwi binaries directly in microseconds. Solves layouts via Taffy 2.0 (Flexbox + CSS Grid), renders offline SVG vectors, provides an open Code Connect engine, transpiles code back to canvas, exports tokens to 8 formats, synthesizes code for 9 frameworks, runs APCA + DLP audits, and writes changes back to the live Figma canvas via a free companion plugin.

⚡ What Makes OpenFigma Beast Edition Superior?

Capability	Official Figma MCP (`mcp.figma.com`)	Framelink (`figma-developer-mcp`)	Southleft (`figma-console-mcp`)	OpenFigma MCP v2.0 (Beast)
Pricing / Seats	❌ Paid Dev Mode seat ($25–$35/mo)	✅ Free PAT	✅ Free PAT	👑 100% Free (PAT, OAuth, or Offline .fig)
Offline Binary `.fig` Parsing	❌ Cloud only	❌ No	❌ No	👑 Yes (Native Kiwi Binary Engine)
Execution Engine	Proprietary Cloud	Node.js	Node.js	👑 Dual Engine: Rust SIMD Core + Universal Node
Layout Solver	Cloud compute	None (raw bounding boxes)	None	👑 Taffy 2.0 (Full CSS Grid + Flexbox)
Vector Rendering	Slow cloud `/v1/images`	❌ None	❌ None	👑 Pure Vector SVG Engine (< 2ms offline)
Code Connect	❌ Requires Enterprise Dev Mode	❌ None	❌ None	👑 Open Code Connect (`code-connect.json`)
Code-to-Canvas	❌ None	❌ None	❌ None	👑 HTML/JSX/Tailwind $\to$ Figma Scenegraph
Context Compression	Low (~250k tokens/screen)	Medium (~3-4×)	Medium (~3×)	👑 Hyper-Pruned CSM + Symbol Table (< 15k tokens)
Design Tokens	Basic	❌ None	✅ DTCG JSON	👑 8 Formats (TW3/TW4/CSS/SCSS/W3C/TS/Flutter)
Code Generation	React only	❌ None	Scaffolding	👑 9 Frameworks (React, Vue, Svelte, Angular, Solid, Flutter, etc.)
Accessibility Audit	Basic	❌ None	WCAG 2.1	👑 WCAG 2.2 + APCA ($L^c$ Perceptual Math)
Prompt Injection Defense	❌ None	❌ Open CVE Vector	❌ None	👑 Aho-Corasick SIMD Automaton (10 GB/s)
DLP Secret Scanner	❌ None	❌ None	❌ None	👑 Catches AWS, OpenAI, GitHub, Private Keys
Enterprise Caching & Circuit Breaker	❌ None	❌ None	❌ None	👑 L1/L2 Cache + ETag 304 + Circuit Breaker
Canvas Mutation (Write)	⚠️ Requires Full Seat ($75+/mo)	❌ Read-Only	✅ Desktop Bridge	👑 Free Companion WebSocket Bridge (Port 3845)

Related MCP server: Figma MCP Server

🚀 Quickstart & Installation

Option 1: Native Rust CLI (Maximum Performance)

# Build native binary
cargo build --release

# Run MCP stdio server for Cursor / VS Code / Claude Code
./target/release/open-figma --stdio

# Or start the local HTTP/SSE & companion WebSocket server on :3845
./target/release/open-figma serve --port 3845

Option 2: One-Command NPX / Node

# Zero-install stdio mode
npx -y openfigma-mcp --stdio --figma-api-key figd_YOUR_TOKEN

# HTTP / SSE server
npx -y openfigma-mcp --port 3845 --figma-api-key figd_YOUR_TOKEN

Option 3: Genuine Native Electron Desktop Workbench

# Launches dedicated native desktop application with layer hierarchy AST, tokens palette, and live code generator
npm run desktop

💻 CLI Commands

1. Fetch & Prune Scenegraph

# YAML output (default, token-minimal)
open-figma fetch "https://figma.com/design/AbC123XyZ/App?node-id=12-822"

# Offline .fig archive (Zero API calls, zero internet required!)
open-figma fetch ./designs/mobile-app.fig --format=json

2. Extract Design Tokens

open-figma tokens "https://figma.com/design/AbC123XyZ/App" --format=tailwind-v4
# Formats: tailwind-v4 | tailwind-v3 | css | scss | w3c | style-dictionary | typescript | flutter

3. Multi-Framework Codegen

open-figma codegen "https://figma.com/design/AbC123XyZ/App?node-id=12-822" --framework=react-tailwind
# Frameworks: react-tailwind | react-inline | vue | svelte | angular | solid | html-css | flutter | swiftui

4. Pure Vector SVG Rendering

# Generate pure vector SVG directly from design
open-figma svg "https://figma.com/design/AbC123XyZ/App?node-id=12-822"

# Or as a base64 data URI
open-figma svg ./designs/mobile-app.fig --data-uri

5. Open Code Connect

# Query mapped production components
open-figma connect "https://figma.com/design/AbC123XyZ/App?node-id=12-822"

# Auto-scaffold starter code-connect.json from a design system
open-figma connect ./designs/ui-kit.fig --scaffold > code-connect.json

6. Code-to-Canvas Transpilation

open-figma transpile '<button class="flex p-4 bg-blue-600 rounded-lg text-white font-bold">Save</button>'

7. Forensic APCA & DLP Security Audit

open-figma audit "https://figma.com/design/AbC123XyZ/App"

8. Interactive Developer REPL

open-figma repl

📦 Client SDKs

TypeScript / JavaScript SDK (`@open-figma/sdk`)

import { OpenFigmaClient } from '@open-figma/sdk';

const client = new OpenFigmaClient({ endpoint: 'http://localhost:3845' });

// Fetch compressed context
const context = await client.getFigmaData('https://figma.com/design/xyz');

// Extract tokens in Tailwind v4
const tokens = await client.getDesignTokens('https://figma.com/design/xyz', 'tailwind-v4');

// Generate React component
const code = await client.generateCode('https://figma.com/design/xyz', 'react-tailwind');

// Render SVG vector
const svg = await client.renderSvg('https://figma.com/design/xyz');

Python SDK (`open-figma-sdk`)

from open_figma_sdk import OpenFigmaClient

client = OpenFigmaClient(endpoint="http://localhost:3845")

# Fetch context
yaml_data = client.get_figma_data("https://figma.com/design/xyz")

# Extract tokens
css_theme = client.get_design_tokens("https://figma.com/design/xyz", format="tailwind-v4")

# LangChain integration
from open_figma_sdk.langchain_tools import OpenFigmaLangChainTool
tool = OpenFigmaLangChainTool(client)

☸️ Cloud-Native Enterprise Deployment

Kubernetes Helm Deployment

helm install open-figma-mcp ./helm/open-figma-mcp \
  --set env.FIGMA_API_KEY="figd_..." \
  --set autoscaling.minReplicas=3 \
  --set autoscaling.maxReplicas=20

Terraform / OpenTofu Modules

AWS ECS Fargate: terraform/aws/main.tf
GCP Cloud Run v2: terraform/gcp/main.tf

Observability & Metrics

Prometheus metrics: GET /metrics
Kubernetes probes: GET /healthz, GET /readyz

🎨 Free Companion Figma Plugin

To enable live canvas mutations (creating frames, writing text, and editing components from your AI agent):

In Figma, go to Plugins $\to$ Development $\to$ Import plugin from manifest...
Select figma-plugin/manifest.json.
Click Run. The plugin connects to ws://127.0.0.1:3845 and enables instant bidirectional write capabilities.

🧪 Comprehensive Multi-Runtime Test Suites

# Run native Rust unit & CLI integration tests (27 passed)
cargo test --workspace

# Run Node.js enterprise engine, IPC & canvas tests (44 passed)
npm test

# Run TypeScript SDK tests (2 passed)
npm run test:sdk:ts

# Run Python SDK tests (3 passed)
python sdk/python/test_client.py

# Run all suites simultaneously (76 unit/integration tests + 20 benchmark/live probes, 0 failures)
npm run test:all

This server cannot be deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityMaintained

ResponsivenessSlow

Resources

Related MCP Connectors

Figma MCP ServerOAuth
com.figma.mcp
The Figma MCP server brings Figma design context directly into your AI workflow.
Developer Tools Content Management Systems
32,101
https://mcp.figma.com/mcp
secureflows-mcp A
io.github.michal-lefler
MCP server for secureFlows: token-free URL builders and integration-linting tools for AI agents.
Code Analysis Developer Tools Security
181
https://www.secure-flows.com/mcp
anotherai
dev.anotherai
MCP server for building and testing AI agents with multi-model experimentation and insights.
Agent Orchestration Autonomous Agents Testing & QA Tools
2
https://api.anotherai.dev/mcp
Agent Toolbox B
io.github.johngee518
Free, no-key MCP server: token estimates, JSON Schema conversion, MCP configs, tool search.
Developer Tools AI & Machine Learning Agent Orchestration
1
https://agenttoolbox.net/api/mcp

Related MCP Servers

figma-proxy-mcp
Design Tools Developer Tools
alfianyusufabdullah
F
license
Not graded
quality
C
maintenance
A local MCP server that gives AI agents live access to open Figma files for design handoff and UX writing without API tokens or rate limits.
Updated 3 months ago (2026-07-16 04:07 UTC)
3
-
Figma MCP Server
Design Tools Developer Tools
vnsunny-dev
A
license
Not graded
quality
D
maintenance
A self-hosted MCP server that enables AI agents to retrieve Figma design data for generating code, templates, or custom prompts.
Updated 3 months ago (2026-07-13 10:19 UTC)
1,424 npm
ISC
Figma Context MCP AIR
Design Tools Developer Tools
compassalessandrolorenz
A
license
Not graded
quality
C
maintenance
An MCP server that gives AI coding agents access to Figma design data, enabling pixel-perfect implementation of designs through structured data extraction, image downloads, and design token retrieval.
Updated 7 months ago (2026-04-02 17:39 UTC)
17 npm
1
MIT
figma-mcp-rust
Design Tools Developer Tools
alvinindra
A
license
Not graded
quality
A
maintenance
An MCP server that enables AI tools to read and write Figma designs via a plugin bridge, bypassing the Figma REST API and rate limits.
Updated 13 days ago (2026-10-12 08:53 UTC)
71
MIT