⚡

Figma设计实现Skill figma-implement-design

该技能用于将Figma设计节点转化为生产就绪的代码，确保1:1视觉保真度，通过Figma MCP工作流实现设计上下文提取、截图捕获、资产下载和项目约定翻译。关键词包括：Figma设计、代码实现、视觉保真度、MCP工作流、设计系统集成。

前端开发 0 次安装 0 次浏览 更新于 3/15/2026

名称: figma-实现设计 描述: 使用Figma MCP工作流（设计上下文、截图、资产和项目约定翻译），将Figma节点翻译成生产就绪的代码，确保1:1视觉保真度。当用户提供Figma URL或节点ID，或要求实现必须匹配Figma规范的设计或组件时触发。需要有效的Figma MCP服务器连接。 元数据: 作者: github.com/openai/skills 版本: ‘1.0.0’

实现设计

概述

该技能提供结构化工作流，用于将Figma设计准确翻译成生产就绪的代码，实现像素级完美。它确保与Figma MCP服务器的持续集成、正确使用设计令牌，以及与设计的1:1视觉匹配。

先决条件

  • 必须连接并访问Figma MCP服务器
  • 用户必须提供Figma URL，格式为：https://figma.com/design/:fileKey/:fileName?node-id=1-2
    • :fileKey 是文件密钥
    • 1-2 是节点ID（要实现的特定组件或框架）
  • 或者 当使用figma-desktop MCP时：用户可以直接在Figma桌面应用中选择节点（无需URL）
  • 项目应已建立设计系统或组件库（首选）

必要工作流

按顺序遵循这些步骤。不要跳过步骤。

步骤0：设置Figma MCP（如果尚未配置）

如果任何MCP调用因Figma MCP未连接而失败，暂停并设置它：

  1. 将Figma MCP服务器添加到代理的MCP配置中：
    • URL: https://mcp.figma.com/mcp
  2. 如果代理要求，启用远程MCP客户端。
  3. 按照代理的身份验证流程进行OAuth登录。

成功登录后，用户需要重启代理。您应该完成回答并告知他们，以便他们重试时可以从步骤1继续。

步骤1：获取节点ID

选项A：从Figma URL解析

当用户提供Figma URL时，提取文件密钥和节点ID以作为参数传递给MCP工具。

URL格式： https://figma.com/design/:fileKey/:fileName?node-id=1-2

提取：

  • 文件密钥： :fileKey（在/design/之后的段）
  • 节点ID： 1-2（node-id查询参数的值）

注意： 当使用本地桌面MCP（figma-desktop）时，fileKey不作为参数传递给工具调用。服务器自动使用当前打开的文件，因此只需要nodeId。

示例：

  • URL: https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15
  • 文件密钥: kL9xQn2VwM8pYrTb4ZcHjF
  • 节点ID: 42-15

选项B：使用Figma桌面应用的当前选择（仅限figma-desktop MCP）

当使用figma-desktop MCP且用户未提供URL时，工具自动使用从Figma桌面应用中打开的Figma文件当前选中的节点。

注意： 基于选择的操作仅适用于figma-desktop MCP服务器。远程服务器需要链接到框架或层以提取上下文。用户必须打开Figma桌面应用并选中一个节点。

步骤2：获取设计上下文

使用提取的文件密钥和节点ID运行get_design_context。

get_design_context(fileKey=":fileKey", nodeId="1-2")

这提供结构化数据，包括：

  • 布局属性（自动布局、约束、尺寸）
  • 排版规范
  • 颜色值和设计令牌
  • 组件结构和变体
  • 间距和内边距值

如果响应过大或被截断：

  1. 运行get_metadata(fileKey=":fileKey", nodeId="1-2")以获取高级节点映射
  2. 从元数据中识别所需的特定子节点
  3. 使用get_design_context(fileKey=":fileKey", nodeId=":childNodeId")获取单个子节点

步骤3：捕获视觉参考

使用相同的文件密钥和节点ID运行get_screenshot以获取视觉参考。

get_screenshot(fileKey=":fileKey", nodeId="1-2")

此截图作为视觉验证的来源。在整个实现过程中保持可访问。

步骤4：下载所需资产

下载Figma MCP服务器返回的任何资产（图像、图标、SVG）。

重要： 遵循这些资产规则：

  • 如果Figma MCP服务器返回图像或SVG的localhost源，请直接使用该源
  • 不要导入或添加新的图标包 - 所有资产应来自Figma有效载荷
  • 如果提供了localhost源，不要使用或创建占位符
  • 资产通过Figma MCP服务器的内置资产端点提供

步骤5：翻译为项目约定

将Figma输出翻译为本项目的框架、样式和约定。

关键原则：

  • 将Figma MCP输出（通常是React + Tailwind）视为设计和行为的表示，而非最终代码风格
  • 将Tailwind实用类替换为项目首选实用程序或设计系统令牌
  • 重用现有组件（按钮、输入框、排版、图标包装器），而不是复制功能
  • 一致使用项目的颜色系统、排版比例和间距令牌
  • 尊重现有路由、状态管理和数据获取模式

步骤6：实现1:1视觉匹配

努力实现与Figma设计的像素级视觉匹配。

指南：

  • 优先考虑Figma保真度，以准确匹配设计
  • 避免硬编码值 - 尽可能使用Figma的设计令牌
  • 当设计系统令牌与Figma规范冲突时，优先使用设计系统令牌，但最小化调整间距或尺寸以匹配视觉效果
  • 遵循WCAG可访问性要求
  • 根据需要添加组件文档

步骤7：针对Figma验证

在标记完成之前，验证最终UI与Figma截图。

验证清单：

  • [ ] 布局匹配（间距、对齐、尺寸）
  • [ ] 排版匹配（字体、大小、重量、行高）
  • [ ] 颜色完全匹配
  • [ ] 交互状态按设计工作（悬停、活动、禁用）
  • [ ] 响应式行为遵循Figma约束
  • [ ] 资产正确渲染
  • [ ] 符合可访问性标准

实施规则

组件组织

  • 将UI组件放置在项目的指定设计系统目录中
  • 遵循项目的组件命名约定
  • 除非真正需要动态值，否则避免内联样式

设计系统集成

  • 尽可能始终使用项目设计系统中的组件
  • 将Figma设计令牌映射到项目设计令牌
  • 当存在匹配组件时，扩展它而不是创建新的
  • 记录添加到设计系统的任何新组件

代码质量

  • 避免硬编码值 - 提取到常量或设计令牌
  • 保持组件可组合和可重用
  • 为组件属性添加TypeScript类型
  • 包含导出组件的JSDoc注释

示例

示例1：实现按钮组件

用户说：“实现这个Figma按钮组件：https://figma.com/design/kL9xQn2VwM8pYrTb4ZcHjF/DesignSystem?node-id=42-15”

操作：

  1. 解析URL以提取fileKey=kL9xQn2VwM8pYrTb4ZcHjF和nodeId=42-15
  2. 运行get_design_context(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")
  3. 运行get_screenshot(fileKey="kL9xQn2VwM8pYrTb4ZcHjF", nodeId="42-15")获取视觉参考
  4. 从资产端点下载任何按钮图标
  5. 检查项目是否有现有按钮组件
  6. 如果有，用新变体扩展；如果没有，使用项目约定创建新组件
  7. 将Figma颜色映射到项目设计令牌（例如，primary-500、primary-hover）
  8. 验证与截图的匹配，包括内边距、边框半径、排版

结果： 匹配Figma设计的按钮组件，集成到项目设计系统。

示例2：构建仪表板布局

用户说：“构建这个仪表板：https://figma.com/design/pR8mNv5KqXzGwY2JtCfL4D/Dashboard?node-id=10-5”

操作：

  1. 解析URL以提取fileKey=pR8mNv5KqXzGwY2JtCfL4D和nodeId=10-5
  2. 运行get_metadata(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5")以理解页面结构
  3. 从元数据中识别主要部分（头部、侧边栏、内容区域、卡片）及其子节点ID
  4. 运行get_design_context(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId=":childNodeId")获取每个主要部分
  5. 运行get_screenshot(fileKey="pR8mNv5KqXzGwY2JtCfL4D", nodeId="10-5")获取完整页面
  6. 下载所有资产（徽标、图标、图表）
  7. 使用项目的布局原语构建布局
  8. 尽可能使用现有组件实现每个部分
  9. 验证响应式行为与Figma约束的匹配

结果： 完整仪表板匹配Figma设计，具有响应式布局。

最佳实践

始终从上下文开始

切勿基于假设实施。始终先获取get_design_context和get_screenshot。

增量验证

在实施过程中频繁验证，而不是仅在最后。这能早期发现问题。

记录偏差

如果必须偏离Figma设计（例如，出于可访问性或技术约束），请在代码注释中记录原因。

重用而非重创

在创建新组件之前，始终检查现有组件。代码库的一致性比精确的Figma复制更重要。

设计系统优先

当有疑问时，优先使用项目的设计系统模式而非字面的Figma翻译。

常见问题及解决方案

问题：Figma输出被截断

原因： 设计太复杂或有太多嵌套层，无法在单个响应中返回。 解决方案： 使用get_metadata获取节点结构，然后使用get_design_context单独获取特定节点。

问题：实施后设计不匹配

原因： 实施代码与原始Figma设计之间的视觉差异。 解决方案： 与步骤3的截图进行并排比较。检查设计上下文数据中的间距、颜色和排版值。

问题：资产无法加载

原因： Figma MCP服务器的资产端点不可访问，或URL被修改。 解决方案： 验证Figma MCP服务器的资产端点是否可访问。服务器在localhost URL上提供资产。直接使用这些URL，无需修改。

问题：设计令牌值与Figma不同

原因： 项目的设计系统令牌值与Figma设计中指定的值不同。 解决方案： 当项目令牌与Figma值不同时，优先使用项目令牌以保持一致性，但调整间距/尺寸以维持视觉保真度。

理解设计实施

Figma实施工作流建立了一个可靠的过程，用于将设计翻译成代码：

对于设计师： 确信实施将匹配他们的设计，具有像素级精度。 对于开发者： 结构化的方法，消除猜测，减少来回修订。 对于团队： 一致、高质量的实施，保持设计系统完整性。

通过遵循此工作流，确保每个Figma设计都以相同的细心和关注细节实施。

附加资源