AI导哈

Figma设计转代码工具

一个将Figma设计转换为代码的工具，支持设计系统、设计转代码、UX规范和可访问性检查。

  • by FranCiccio81
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 FranCiccio81/figma-mcp-skills

使用说明

figma mcp技能

Claude Code+Figma MCP服务器的代理技能
涵盖整个设计过程：设计系统、设计到代码、用户体验规范、可访问性。

先决条件

  • Claude代码已安装（npm install -g @anthropic-ai/claude-code)
  • Figma桌面应用程序（现代版）
  • 付费Figma计划中的座位开发或满
  • Claude Pro或Max

快速设置

1.在Figma中启用MCP桌面

  1. 打开Figma桌面
  2. 打开设计文件
  3. 激活 开发者模式 (Shift + D)
  4. 在检查→部分面板中 MCP服务器 →点击 启用桌面MCP服务器
  5. 服务器正在运行 http://127.0.0.1:3845/mcp

2.将Claude代码连接到MCP Figma

# Ajouter le serveur desktop (recommandé — sélection directe dans Figma)
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

# Vérifier la connexion
claude mcp list

3.在您的项目中克隆此repo

git clone https://github.com/TON_USERNAME/figma-mcp-skills.git
cd figma-mcp-skills

4.将规则复制到项目中

# Copier CLAUDE.md à la racine de ton projet
cp .claude/CLAUDE.md /chemin/vers/ton-projet/.claude/CLAUDE.md

结构

figma-mcp-skills/
├── .mcp.json                           # Config MCP prête à l'emploi
├── .claude/
│   └── CLAUDE.md                       # Rules globales pour Claude Code
├── skills/
│   ├── 01-design-system/
│   │   └── SKILL.md                    # Bridge tokens, composants, tier hierarchy
│   ├── 02-design-to-code/
│   │   └── SKILL.md                    # Figma → React / Jetpack Compose
│   ├── 03-ux-research-specs/
│   │   └── SKILL.md                    # Annotations, flows, specs fonctionnelles
│   └── 04-accessibility/
│       └── SKILL.md                    # WCAG 2.1 AA, audits, ARIA patterns
└── rules/
    ├── figma-mcp-rules.md              # Rules MCP universelles
    └── bridge-design-system-rules.md  # Rules spécifiques Bridge / Swissquote

与Claude代码一起使用

# Lancer Claude Code dans ton projet
cd /chemin/vers/ton-projet
claude

# Vérifier que Figma MCP est connecté
/mcp

# Exemples de prompts
"Implémente ce composant depuis ma sélection Figma en React avec les tokens Bridge"
"Extrait les variables de couleur de cette frame et mappe-les sur les tokens Bridge"
"Génère le code Jetpack Compose pour ma sélection Figma en suivant MD3"
"Audite cette frame pour la conformité WCAG 2.1 AA"

MCP工具可用

输出 描述
get_design_context 完整上下文（布局、间距、颜色、排版）
get_variable_defs 选择的变量和令牌
get_screenshot 用于验证的视觉捕获
get_metadata 层的XML结构（适用于大型文件）
get_code_connect_map 构图图↔ 代码
create_design_system_rules 从DS生成规则文件
get_figjam 阅读Figjam图表

计划和限制Figma

计划 配额MCP
入门/观众 每月6次通话
Dev ou Full seat（Professional+） 价格限制API第1层

相关 MCP