Madkangyu Figma MCP

Figma MCP — Design by Talking

Beyond Figma Plugins. AI reads, writes, and converts your designs to production code.

The complete guide to Figma MCP — 16 tools, 7 skills, 15 prompt patterns, auto-install scripts, and troubleshooting for every platform.

한국어 · English

______________________________________________________________________

我想…（在3秒内找到你需要的东西）

______________________________________________________________________

你实际上能做什么？（不需要技术知识）

Design（设计）

Marketing（营销）

协作（Collaboration）

你不需要什么

❌ Design skills      → AI handles layout, spacing, colors
❌ Coding knowledge    → AI generates production code  
❌ Figma expertise     → AI operates Figma for you
❌ Design system       → AI can build one from scratch
❌ Multiple tools      → Figma + Claude Code = everything

______________________________________________________________________

使用（不仅仅是Claude Code）

所有这些都使用相同的Figma MCP服务器： https://mcp.figma.com/mcp

______________________________________________________________________

问题

Designer sends Figma link
→ Developer opens Figma, squints at spacing values
→ Types CSS by hand: "is that 16px or 18px padding?"
→ Builds component, checks browser, it looks wrong
→ Goes back to Figma, measures again
→ Repeat 47 times
→ Client says "actually, make the button green"
→ Start over

解决方案

"Convert this Figma design to React + Tailwind"
[paste Figma URL]
→ Done. Production-ready code. 30 seconds.

______________________________________________________________________

运作原理

graph LR
    A[You] -->|"make a landing page"| B[Claude Code]
    B -->|MCP Protocol| C[Figma]
    C -->|design data| B
    B -->|React + Tailwind| D[Your App]
    
    E[Designer] -->|Figma link| B
    F[Client] -->|"change button color"| B
    B -->|updates design| C

Figma    = your whiteboard
MCP      = AI's eyes and hands on the whiteboard
Tools    = ingredients (flour, eggs) — read Figma files
Skills   = recipes (how to bake) — orchestrate tools in the right order

______________________________________________________________________

快速安装

curl -sL https://raw.githubusercontent.com/MadKangYu/MadKangYu-FigMa-Mcp/main/setup.sh | bash

What gets installed

一次性手动步骤：

Figma Desktop → Plugins → Development → Import plugin from manifest...
→ ~/.figma-mcp-go-plugin/plugin-dist/manifest.json → Run

______________________________________________________________________

6个真实世界场景

1.克隆一个漂亮的网站

“我喜欢cal.com的设计。我希望我的SaaS也能有类似的东西。”

Import this website into Figma: https://cal.com
Figma file: [my URL]

AI抓取 实际元素值 （颜色、字体、间距）——不是截图。 更改品牌颜色→ done.不需要设计技能。

2.编码前可视化

“我正在编写一个仪表板，但无法想象布局。”

Create a wireframe in Figma [URL]:
- Hero with headline + CTA
- Features 3-column grid  
- Pricing 3 plans
- Footer
Gray boxes only. No colors yet.

零代码接触。 先看→ 批准→ 然后转换。

3.处理客户反馈

客户：“将英雄设置为绿色，并添加推荐部分”

In Figma [URL]:
1. Change hero background from #1E40AF to #059669
2. Add testimonial section below pricing with 3 cards

在Figma中修复→ 客户立即看到它→ 批准→ 更新代码。 修订周期在设计级别而不是代码级别结束。

4.应用流程概览

“我需要向投资者展示我的应用程序的所有5个屏幕。”

Create these screens side by side in Figma [URL] (375x812px, gap 80px):
1 - Splash  2 - Onboarding  3 - Login  4 - Home  5 - Settings
Arrange as a user flow with arrows.

即时投球甲板。不需要PowerPoint。

5.按生产规范设计

“设计师完成了Figma。我需要React组件。”

Convert this Figma design to React + TypeScript + Tailwind:
[Dev Mode URL with &mode=dev]

Requirements:
- Functional components with TypeScript props
- Mobile-first responsive
- Accessibility (aria-label, role)

专业提示： &mode=dev 在URL=更高质量的代码输出中。

6.设计系统同步

“我们的Figma令牌与我们的Tailwind配置不匹配。”

Extract all color/spacing/typography variables from Figma [URL]
→ Convert to tailwind.config.js format

#3B82F6 成为 --color-primary.更改一次，到处更新。

______________________________________________________________________

三件事要记住

______________________________________________________________________

质量备忘单

______________________________________________________________________

建筑

┌─────────────────────────────────────────────────┐
│                  Your Workflow                    │
├─────────────┬──────────────┬────────────────────┤
│   READ      │   WRITE      │   CONVERT          │
│             │              │                    │
│ get_file    │ use_figma    │ react-component    │
│ get_styles  │ generate_    │ html-css           │
│ get_comps   │   figma_     │ tailwind           │
│ get_vars    │   design     │ design-tokens      │
│ get_images  │ create_new_  │                    │
│ get_code_   │   file       │                    │
│   connect   │              │                    │
├─────────────┴──────────────┴────────────────────┤
│              get_design_context                  │
│         (does 90% of the work alone)             │
├─────────────────────────────────────────────────┤
│                 MCP Protocol                     │
├──────────────────┬──────────────────────────────┤
│  Official Figma  │  figma-mcp-go (unlimited)    │
│  (OAuth, stable) │  (plugin bridge, no limits)  │
└──────────────────┴──────────────────────────────┘

7官方技能（排名）

出发？你只需要 figma-implement-design. 其他一切都是可选的。

______________________________________________________________________

MCP服务器比较

推荐组合： 官方（稳定写作）+figma mcp-go（无限阅读）

______________________________________________________________________

免费vs付费

最佳性价比：Pro Dev座位每月12美元。 免费+figma mcp-go适用于学习。

______________________________________________________________________

10个痛点和解决方案

✅ = 在该仓库中实现自动化，📋 = 提供模板，📖 = 包括指南

______________________________________________________________________

字体指南

MCP安全（商业免费）

所有谷歌字体=SIL OFL= 免费用于商业用途. Pretendard需要手册 @font-face 在代码中设置。

______________________________________________________________________

文档

______________________________________________________________________

为何存在此回购

Figma的内置插件是有限的。他们可以阅读设计，但他们不能：

• 使用TypeScript生成生产就绪的React/Next.js代码
• 将任何网站导入可编辑的Figma图层
• 通过100多个自动呼叫构建整个设计系统
• 与Tailwind配置双向同步设计令牌
• 自动检测丢失的Auto Layout并在代码转换前修复它

这个回购弥合了这一差距。 它将官方的Figma MCP服务器与社区工具、经过实战考验的提示模式和自动安装脚本相结合，因此您可以在几分钟内从Figma URL部署代码，而不是几天。

______________________________________________________________________

下载和项目设置

选项1：自动安装（推荐）

curl -sL https://raw.githubusercontent.com/MadKangYu/MadKangYu-FigMa-Mcp/main/setup.sh | bash

保存到 ~/Projects/figma-mcp-learning/

选项2:Git克隆

git clone https://github.com/MadKangYu/MadKangYu-FigMa-Mcp.git ~/Projects/figma-mcp-learning

选项3：下载ZIP

下载ZIP → 提取到您喜欢的位置。

推荐的文件夹结构

~/Projects/
├── figma-mcp-learning/     ← this repo (guides + scripts)
├── my-app/                 ← your actual project
│   ├── CLAUDE.md           ← copy CLAUDE.md here for auto-rules
│   ├── src/components/     ← Figma → code output goes here
│   └── public/images/      ← Figma → image export goes here
└── .figma-mcp-go-plugin/   ← auto-created by setup.sh

根据项目设置

# Copy CLAUDE.md to your project for auto Figma rules
cp ~/Projects/figma-mcp-learning/CLAUDE.md ~/Projects/my-app/CLAUDE.md

平台说明

______________________________________________________________________

环境检查

curl -sL https://raw.githubusercontent.com/MadKangYu/MadKangYu-FigMa-Mcp/main/check-env.sh | bash

自动更新

curl -sL https://raw.githubusercontent.com/MadKangYu/MadKangYu-FigMa-Mcp/main/update.sh | bash

______________________________________________________________________

贡献

PR欢迎。找到更好的提示模式、工作流程或修复？分享它。

______________________________________________________________________

关键词

figma mcp · figma to react · figma to code · design to code · figma api · figma plugin · claude code figma · mcp server · figma dev mode · figma auto layout · design system automation · figma variables · code connect · figma typescript · figma tailwind · figma nextjs · ai design · figma cursor · figma vscode · 피그마 MCP · 피그마 코드 변환 · AI 디자인 자동화

______________________________________________________________________

Don't build from scratch. Import good designs and modify.

Preview in Figma first. Convert to code only after approval.

Figma is not a design tool — it's a communication tool.

Built with Claude Code by MadKangYu · MIT License · 2026