figma

name	figma
description	Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
zh_description	用于处理 Figma 设计读取、解析、交付和实现协作。
version	1.0.0
author	seaworld008
source	in-house
source_url
tags	["agent", "ai", "figma"]
created_at	2026-03-04
updated_at	2026-03-20
quality	2
complexity	intermediate

Figma MCP (Design-to-Code)

Figma MCP 是连接设计稿与生产代码的超级引擎。它通过 Figma API 获取结构化设计上下文、变量定义及原始素材，并结合大模型的推理能力，将视觉稿一键转化为符合项目规范的 React/Tailwind/Vue 代码。

安装与前提条件

# 确保已安装 Figma MCP Server
mcp_call({ action: "search", keyword: "figma" });
# 获取访问令牌 (PAT)
# 详见 references/figma-mcp-config.md

Figma MCP 核心集成流程 (Workflow)

为了确保 1:1 的视觉还原度和高性能的代码实现，必须严格遵循以下流程：

1. 获取设计上下文 (get_design_context)：首先获取目标 Node ID 的结构化 JSON 表示，理解其层级、间距、填充和排版属性。
2. 处理大数据量 (Metadata First)：如果 Node 层级过深，先运行 get_metadata 获取高层级节点地图，再精准抓取需要的子节点。
3. 视觉对齐 (get_screenshot)：运行 get_screenshot 获取节点的实时渲染图片，作为实现时的绝对参考。
4. 素材下载 (Asset Acquisition)：在开始编码前，下载所有图标（Icons）和装饰图（Images）。
5. 规范化翻译 (Code Translation)：将 Figma 的属性（如 cornerRadius: 8）映射到项目的 Design Tokens（如 rounded-lg）。
6. 最终验证 (Visual Regression)：完成开发后，再次对比 Figma 截图，确保 1:1 还原。

触发条件 / When to Use

• 新功能 UI 开发：用户给出一个 Figma 链接，要求实现对应的组件或页面。
• UI 细节优化：针对现有页面进行微调，以对齐设计稿的最新改动。
• 设计规范审计 (Design Audit)：自动提取 Figma 里的 Color Palette 或 Typography 并与代码库中的 tailwind.config.js 对比。
• 图标与静态资源同步：需要批量导出 SVG 图标并转换为 React 组件。
• 响应式布局实现：需要查看不同 Breakpoints（Desktop, Tablet, Mobile）下的设计差异。

核心能力 / Core Capabilities

1. 结构化设计解析 (Structural Parsing)

• 操作步骤：
  1. 调用 mcp_call({ name: "get_design_context", arguments: { fileKey, nodeIds } })。
  2. 解析 children 数组，识别 TEXT, VECTOR, INSTANCE 等节点类型。
  3. 自动计算 Auto-layout 属性（Gap, Padding, Alignment）。
• 最佳实践：如果发现节点名称是“Frame 1234”，主动询问设计人员其真实的语义名称（如“Primary Button”）。

2. 图像与变量提取 (Variable Extraction)

• 操作步骤：
  1. 检索 Figma Variables 和 Styles。
  2. 将十六进制颜色码转换为项目使用的命名变量（如 #3B82F6 -> ）。