AI导哈

Figma设计转代码工具

Figma MCP是一个AI驱动的设计转代码工具，能够将Figma设计自动转换为React/Tailwind等生产级代码，适用于设计师与开发者协作场景。

  • by MadKangYu
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 MadKangYu/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秒内找到你需要的东西）

我想… 做这个 指南
安装所有内容 curl setup.sh | bash setup.sh
Figma→ React代码 粘贴URL+“转换为React” 04
在Figma中创建设计 “在[URL]中创建登录页” 04
克隆网站 “进口https://cal.com" 04
修复错误的代码输出 &mode=dev +逐节 07
添加3D/动画 MCP骨架→ 运动代码 07
韩文字体 Noto Sans KR或Pretendard 08
免费vs付费？ 免费：每月6次。专业版开发者最好12美元 08
修复错误 “找不到工具”，429，超时 09
检查我的设置 curl check-env.sh | bash check-env.sh
理解术语 40+个简单语言术语 06
macOS权限 可访问性+防火墙 09

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

Design（设计）

你说。.. 发生了什么
“为我的咖啡店制作一个登录页面” AI在Figma中创建了一个完整的页面设计
“我喜欢这个网站，让我的网站相似” AI复制布局，你改变文本/颜色
“并排显示5个应用程序屏幕” AI在Figma中生成完整的应用程序流
“让按钮变大变绿” AI会立即修改精确的元素
“添加一个包含3个计划的定价部分” AI在现有设计中添加了新的部分
“创建徽标概念” AI在Figma画布中生成选项

Marketing（营销）

你说。.. 发生了什么
“将这个设计变成一个真正的网站” AI从Figma生成React/HTML代码
“制作此页面的移动版本” AI创建响应式375px布局
“导出此设计中的所有图像” AI提取PNG/SVG/JPG文件
“从这些屏幕创建一个投球平台” AI将屏幕排列为Figma幻灯片
“将所有文本更改为韩语” AI会查找并替换每个文本节点
“这个网站使用什么字体和颜色？” AI分析并列出所有设计标记

协作（Collaboration）

你说。.. 发生了什么
“与我的客户端共享此设计” Figma链接——任何人都可以在浏览器中查看
“我的客户希望更改标题” Figma中的客户评论→ AI修复了它
“将设计颜色同步到我们的代码库” AI提取令牌→ 顺风配置
“这种设计在页面之间是否一致？” AI比较布局并标记差异

你不需要什么

❌ 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）

AI工具 Figma MCP支持 设置
克劳德代码 ✅ 完整 此仓库的setup.sh
光标 ✅ 满 /add-plugin figma
VS代码+副本 ✅ 完整 MCP:添加服务器→ HTTP
食品法典委员会（OpenAI） ✅ 满 gemini extensions install
Gemini CLI ✅ 完整 扩展安装
帆板运动 ✅ 完整 MCP配置
弯曲 ✅ 部分 MCP配置

所有这些都使用相同的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桌面应用程序 设计环境（通过Homebrew）
官方Figma MCP 读写设计（OAuth）
figma mcp-go 无限使用，无费率限制
插件文件 Figma桌面桥
学习材料 10个指南，15个提示模式

一次性手动步骤：

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.更改一次，到处更新。

三件事要记住

# 操作 提示
1 设计→ Code Convert this Figma design to React + Tailwind [URL]
2 词语→ 设计 Create a landing page in Figma [URL]. Hero + features + pricing.
3 克隆→ 修改 Import https://cal.com into Figma [URL]

质量备忘单

做这个 为什么 影响
使用 &mode=dev 在URL AI读取布局结构，而不仅仅是像素 +30%准确率
请求 逐节 防止20KB限制超时 没有损坏的代码
在Figma中使用自动布局 生成Flexbox/Grid，而不是 position: absolute 响应式作品
清洁图层名称 div_1234 → .hero-button 可读CSS
使用Figma变量 #3B82F6 → var(--color-primary) 主题代码
指定全栈 “React+TypeScript+Tailwind CSS” 精确输出

建筑

┌─────────────────────────────────────────────────┐
│                  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 每一天——设计→ 代码
⭐⭐⭐ figma-use 在任何写入操作之前自动加载
⭐⭐ figma-generate-design 在Figma中创建新屏幕
⭐⭐ figma-create-design-system-rules 项目设置--生成CLAUDE.md规则
⭐ figma-generate-library 构建完整的设计系统（20-100次通话）
⭐ figma-code-connect 组件↔ 代码映射（组织计划+）
— figma-create-new-file 只创建一个空白文件

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

MCP服务器比较

服务器 读 写 速率限制 最适合
官方Figma ✅ ✅ 免费：每月6次，专业版：每天200次 稳定性+ use_figma
figma mcp go ✅ 基础 无限 免费计划用户
帧链接 ✅ ❌ 无限 只读，令牌高效
抓取/光标通话 ✅ ✅ 无限 游标+WebSocket
figma控制台 ✅ ✅ OAuth 92个工具，但在macOS上不稳定

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

免费vs付费

免费（0美元） 专业开发版（每月12美元） 完整版（每月16美元）
MCP呼叫 6/月 200/天 200/日
use_figma 写 ❌ ✅ ✅
开发模式 ❌ ✅ ✅
变量 -- 只读 10种模式
代码连接 ❌ ❌ ❌ （仅限组织）
与figma mcp合作 无限制阅读 无限制阅读 无限制阅读

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

10个痛点和解决方案

问题 解决方案 汽车？
费率限制（6/月） 安装figma mcp ✅
20KB输出限制 逐段工作流程 📋
无自动布局=代码错误 “先添加自动布局”预提示 📋
自定义字体失败 在提示符+顺风配置中指定 📖
不包括图片 get_images → 先提取 📋
85-90%的准确率 开发模式URL+2-3轮修订 📋
figma-use 未加载 CLAUDE.md自动加载规则 ✅
WebSocket掉线 官方远程为主要 ✅
开发模式需要Pro CSS检查是免费的，完整模式是付费的 📖
Figma制造混乱 完全不同的产品 📖

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

字体指南

MCP安全（商业免费）

类别 热门选择
字体 国际米兰，Roboto，Poppins，DM Sans，加上雅加达Sans
衬线 Playfair Display，梅里韦瑟，洛拉
等宽字体 JetBrains Mono，Fira代码
韩语 Noto Sans KR✅, IBM Plex Sans KR✅, 纳农哥特式✅
韩语（仅限本地） 假装❌ MCP，斯波卡·韩三❌ MCP

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

文档

文件 内容 用于
01-getting-started.md 安装+前20分钟 初学者
02-core-concepts.md MCP概念+何时使用 理解
03-tools-and-skills.md 17种工具+7种技能+排名 参考
04-workflows.md 8个工作流+15个提示模式 复制粘贴
05-resources.md 官方文档、GitHub、npm 深入了解
06-glossary.md 40+个术语简单解释 非开发人员
07-pain-points.md 10个问题+解决方案 故障排除
08-fonts-and-pricing.md 字体+免费与付费计划 计划
09-troubleshooting.md 安装/CLI/API/质量修复 问题解决
QnA.md 学习中的15个真实问答 常见问题
CLAUDE.md 自动应用AI规则 自动
check-env.sh 环境自动诊断 调试

为何存在此回购

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

平台说明

平台 默认路径 备注
macOS ~/Projects/ setup.sh创建了这个
窗户 %USERPROFILE%\Projects\ 使用Git Bash或WSL
Linux ~/Projects/ 与macOS相同
代码空间 /workspaces/ Git直接克隆

环境检查

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

相关 MCP