利用 AI 自动化处理 Figma 设计稿与 Token 提取

解决设计到代码（Design-to-Code）的重复劳动：通过 Rube MCP 赋予 AI 操作 Figma 的能力，自动提取设计令牌、导出组件图像并将其转换为开发可用的配置。

为什么需要这个技能

在前端开发过程中，手动从 Figma 中一个一个复制颜色值、字体大小或间距是非常低效的。虽然 Figma 提供了 Inspect 面板，但在处理大规模设计系统（Design System）时，仍然需要大量手动同步。

本技能通过连接 Rube MCP 协议，让 AI 能够直接读取 Figma 文件的 JSON 结构，自动分析组件层级，甚至一键将 Figma 的设计令牌（Tokens）转换为 Tailwind CSS 配置文件，极大地缩短了从视觉稿到代码实现的路径。

适用场景

• 快速切图：无需手动导出，直接让 AI 根据 Node ID 批量渲染并下载 PNG/SVG 图像。
• 同步设计规范：自动提取颜色、排版等 Tokens，并将其转换为代码库中的主题配置文件。
• 审计设计文件：快速遍历文件中的所有组件集（Component Sets）或检查评论记录。
• 自动化文档：将 Figma 的结构化数据转化为 Markdown 格式的设计文档。

核心工作流

1. 资源定位与解析

AI 首先通过 FIGMA_DISCOVER_FIGMA_RESOURCES 解析 Figma URL，提取 file_key 和 node_id。需要注意，URL 中的 ID 格式（如 1-541）需转换为 API 识别的冒号格式（1:541）。

2. 数据提取与分析

• 概览分析：调用 FIGMA_GET_FILE_JSON 并设置 depth=2 快速获取页面结构。
• 深度解析：针对特定组件调用 FIGMA_GET_FILE_NODES 获取详细属性。
• Token 提取：使用 FIGMA_EXTRACT_DESIGN_TOKENS 抓取全局颜色和变量。

3. 资产产出

• 图像渲染：通过 FIGMA_RENDER_IMAGES_OF_FILE_NODES 将设计节点转换为图像 URL。
• 代码转换：将提取到的 Tokens 传递给 FIGMA_DESIGN_TOKENS_TO_TAILWIND，直接生成 Tailwind 配置。

注意事项

• 文件类型限制：仅支持 Design 文件，不支持 FigJam 白板或 Slides 演示文稿（会返回 400 错误）。
• 数据量控制：如果 depth 设置过深或请求的 ids 过多，可能会触发 413 Payload Too Large 错误，建议缩小范围分批请求。
• 权限要求：必须确保 Rube MCP 状态为 ACTIVE 且已完成 Figma OAuth 授权。

下载和安装

下载 figma-automation 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐