🎨
Figma MCP
✓ 官方/认证Figma (官方)
Figma 设计 MCP，文件、页面、组件、样式、变量、Dev Mode、Code Connect
⭐ 1.5k
GitHub Stars
stdio
安装方式
MIT
开源协议
6
可用工具
📖 详细介绍
Figma 官方 MCP Server，设计协作平台。文件/页面/Frame CRUD、Component 组件、Style 样式、Variable 变量、Prototype 原型、Dev Mode 代码生成、Code Connect 代码映射。
✨ 核心特性
✓设计文件管理
✓组件库
✓变量系统
✓Dev Mode
✓Code Connect
✓SVG / PNG 导出
🛠️ 可用工具 (6)
list_files()
get_node()
create_frame()
export_image()
get_styles()
get_components()
🎯 适用场景
▸设计系统
▸设计稿转代码
▸资产同步
▸设计审查
▸Storybook 集成
▸AI 设计
🔎 相关搜索
用户搜索 Figma MCP 时的常见问题和长尾关键词：
#Figma MCP 官方#设计稿转代码#Figma API 集成#Figma 组件库#Dev Mode MCP
🧷 主题归类
Figma MCP 属于以下主题：
❓ 常见问题 (FAQ)
Q1.Figma Token 申请？▼
访问 figma.com/developers/api#access-tokens 创建 Personal Access Token，授予 files/dev_resources/sessions 权限。
Q2.Code Connect 是什么？▼
Figma 2024 推出的代码映射系统，可将设计组件映射到实际代码组件，AI 直接生成对应代码。
Q3.支持图片导出？▼
是的，可导出 PNG（多倍率）、SVG、PDF、JetBrains IDE 格式（XML）。
⚙️ 安装与配置
系统要求
- •Node.js 18+
- •Figma Personal Access Token
安装命令
npx -y @figma/mcp-serverClaude Desktop 配置 (claude_desktop_config.json)
{
"mcpServers": {
"figma-mcp": {
"command": "npx",
"args": [
"-y",
"@figma/mcp-server"
]
}
}
}🔗 相关链接
🧩 相关 MCP Servers
🎨
Figma Context MCP
✓ 官方Framelink
为 AI 编程工具提供 Figma 设计数据访问，简化设计稿到代码的转换
Figma设计设计稿AI编程
⭐8.5kstdio中等
🖌️
Canva MCP
✓ 官方Canva (官方)
Canva 设计平台 MCP，海报/PPT/视频/Logo/Brand Kit 一键生成
Canva设计海报PPT
⭐0.1kstdio简单
🗣️
ElevenLabs MCP
✓ 官方ElevenLabs
ElevenLabs AI 语音 MCP，3000+ 声音、29 语种、声音克隆、情感控制
ElevenLabsTTS语音克隆多语种
⭐0.6kstdio简单
🎵
Suno MCP
✓ 官方Suno
Suno AI 音乐生成 MCP，文本/歌词生成完整歌曲，含人声、器乐、风格控制
SunoAI 音乐作曲人声
⭐0.4kstdio简单