# Figma MCP ## 概述该技能通过利用 Figma 的 MCP（模型上下文协议）服务器直接从 Figma 文件访问结构化设计数据，实现准确的设计到代码转换。与基于屏幕截图的方法不同，Figma MCP 提供有关每个设计元素的语义信息，包括精确的间距、颜色、版式、组件层次结构和设计系统标记，从而显着提高代码生成的准确性。 ## 何时使用此技能当用户出现以下情况时触发该技能： * 提供 Figma URL（文件链接或框架选择链接） * 请求将 Figma 设计转换/实现为代码 * 要求“从 Figma 构建这个”或“实现这个设计” * 需要提取设计令牌、变量或设计系统值 * 想要更新现有代码以匹配 Figma 设计 * 提及保持设计到代码的一致性 ## 工作流程 ### 第 1 步：接收 Figma 设计参考当用户提供 Figma URL 或请求设计实现时： 1. **识别Figma链接类型**： * 文件网址：`https://www.figma.com/file/[FILE_KEY]/...` * 框架选择：`https://www.figma.com/file/[FILE_KEY]/...?node-id=[NODE_ID]` * 设计网址：`https://www.figma.com/design/[FILE_KEY]/...` 2. **确认访问** : * 验证 Figma MCP 服务器已配置且可访问 * 如果未配置，请参考 `references/setup-guide.md` 以获取安装说明 ### 步骤 2：使用 MCP 工具获取设计数据使用可用的 Figma MCP 工具检索结构化设计数据： **可用的关键 MCP 工具：** * **get_figma_data** \- 获取文件或特定框架的完整设计数据 * **get_figma_variables** \- 提取设计标记（颜色、间距、版式） * **get_figma_components** \- 检索组件定义和实例 * **get_figma_styles** \- 访问文本、颜色和效果样式 **最佳实践：** 从用户引用的特定框架或节点的“get_figma_data”开始。这提供了完整的结构、布局数据和样式信息。 **工作流程示例：** 用户：“实现此 Figma 设计：[带有节点 ID 的 Figma URL]” 1. 从URL中提取file_key和node_id 2.使用file_key和node_id参数调用get_figma_data 3. 通过以下方式接收结构化 JSON： - 元素层次结构（框架、组、组件） - 布局属性（位置、大小、约束、自动布局） - 样式（填充、描边、效果、排版） - 组件实例和变体 - 设计令牌和变量 ### 步骤 3：分析设计结构在生成代码之前，分析获取的设计数据： 1. **识别组件层次结构** : * 主要容器/部分有哪些？ * 哪些元素是可重用组件？ * 布局如何流动（弹性、网格、绝对）？ 2. **提取设计系统值**： * 颜色（填充、描边、背景） * 版式（字体系列、大小、粗细、行高） * 间距（填充、边距、间隙） * 边框、阴影、效果 3. **确定布局方式** : * 自动布局框架 → Flexbox 或 CSS Grid * 绝对定位 → CSS 绝对/相对定位 * 约束→响应行为 ### 步骤 4：生成代码根据设计数据生成可用于生产的代码： **代码生成原理：** 1. **使用语义 HTML** : * 框架 → `

`、`

` 等。 * 文本 → `

-

`、`
`、`` * 按钮 → `<按钮>` * 图片 → `` 2. 保留设计系统价值： * 从 Figma 变量中提取颜色变量 * 为间距、颜色、版式创建 CSS 自定义属性 * 使用设计中的精确值（不要近似） 3. 匹配布局行为： * 带填充/间隙的自动布局 → 带间隙/填充的 Flexbox * 自动布局方向 → flex-direction * 约束 → 响应式 CSS（flex-grow、最小/最大宽度） 4. 基于组件的架构： * Figma 组件 → React/Vue 组件或 CSS 类 * 组件实例 → 组件与 props 的使用 * 变体 → Props 或条件类 5. 响应注意事项： * 适当时使用相对单位（rem、em、%） * 考虑桌面/移动版本的断点 * 保留 Figma 的约束行为输出结构示例： // 对于反应从“反应”导入反应；导入'./styles.css'; 导出 const 组件名称 = () => { 返回（
{/* 保留层次结构和样式 /}
）； }; ### 第 5 步：验证和完善生成初始代码后： 1. 验证准确性：间距值是否与设计完全匹配？ * 颜色是否准确（检查十六进制值）？ * 布局行为是否匹配（响应式、换行式）？ 2. 检查改进： * 是否可以将任何值提取到 CSS 变量中？ * 是否有重复的模式需要组件化？ * 代码是否可访问（语义 HTML、ARIA 属性）？ 3. 优惠细化： * 建议设计系统集成（如果适用） * 提及检测到的任何设计不一致之处 * 提出优化建议（共享样式、组件提取） ## 最佳实践 ### 设计到代码的准确性 * 切勿近似值：使用 Figma 数据中的精确像素值、颜色和测量值 * 保留层次结构：维护 Figma 框架/组的嵌套结构 * 匹配自动布局行为：Figma 的自动布局直接映射到 Flexbox 属性 * 使用设计令牌：从 Figma 变量中提取并重用颜色/间距变量 ### 代码质量 * 语义 HTML ：使用适当的 HTML 元素，而不仅仅是 div * 组件提取：从 Figma 组件中识别可重复使用的组件 * CSS 组织：单独的布局、排版和视觉样式 * 辅助功能：添加适当的 ARIA 标签和语义结构 ### 设计系统集成 * 检查变量：使用 Figma 变量作为设计标记 * 组件一致性：将 Figma 组件名称与代码组件名称匹配 * Code Connect ：如果可用，请参考组件的 Code Connect 映射 * 命名约定：遵循类/组件的现有项目约定 ### 性能 * 优化图像：建议适当的图像格式和压缩 * CSS效率：避免冗余样式，使用CSS变量 * 捆绑包大小：保持生成的代码精简和模块化更详细的指导，请参考： * `references/setup-guide.md` \- 设置 Figma MCP 服务器 * `references/best-practices.md` \- 扩展最佳实践和示例 ## 常见模式 ### 模式 1：Figma 的登陆页面用户提供：Figma 登陆页面设计链接流程： 1.使用get_figma_data获取完整的页面结构 2. 识别部分（英雄、特色、CTA、页脚） 3. 使用部分元素生成语义 HTML 4. 将颜色/版式提取到 CSS 变量 5. 实施不受约束的响应行为 ### 模式 2：组件实现用户提供：Figma 链接到具有变体的按钮组件流程： 1. 使用 get_figma_components 获取组件定义 2. 识别变体（主要、次要、尺寸） 3. 使用变体的 props 创建 React 组件 4. 将共享样式提取到基础组件 5. 将特定于变体的样式实现为 props/classes ### 模式 3：设计系统提取用户请求：从 Figma 文件中提取设计令牌流程： 1. 使用 get_figma_variables 获取变量 2. 使用 get_figma_styles 获取文本/颜色样式 3.生成CSS自定义属性或主题对象 4. 文档token命名及使用 5.导出为样式表或配置文件 ## 故障排除 MCP 服务器不可用： * 检查 MCP 设置中是否配置了 Figma MCP 服务器 * 参考 `references/setup-guide.md` 了解安装说明 * 验证用户有适当的 Figma 计划（官方服务器的开发模式访问）设计数据不完整： * 确保 Figma 文件可访问（权限） * 验证URL中的node-id是否正确 * 如果子节点返回有限数据，则尝试获取父框架代码在视觉上与设计不匹配： * 仔细检查间距和尺寸值 * 验证颜色值是否准确来自 Figma 的十六进制代码 * 检查字体是否正确加载 * 检查自动布局方向和对齐属性 ## 资源该技能包括支持 Figma MCP 工作流程的参考文档： ### 参考文献/setup-guide.md 在 Claude Code 和其他 MCP 客户端中配置 Figma MCP 服务器（官方和社区选项）的完整设置说明。供用户需要设置集成时参考。 ### 参考文献/最佳实践.md 用于设计到代码转换的扩展最佳实践、详细示例和高级模式，包括组件架构、响应式设计策略和设计系统集成。

Figma MCP

包含技能