用途
该技能用于通过 Figma API 实现设计自动化与代码生成。适用于从 Figma 设计文件中提取设计数据、根据组件生成代码，以及自动化设计工作流的场景。
主要能力
- 认证与访问：通过环境变量 FIGMA_TOKEN 设置 X-Figma-Token 请求头进行认证，从 Figma URL 中解析文件 Key（file key）与节点 ID（node id）。
- 核心 API 端点：
- 获取文件：GET https://api.figma.com/v1/files/:file_key，支持指定 nodes、geometry=paths（用于 SVG 路径）、plugin_data=shared。
- 获取组件：GET https://api.figma.com/v1/files/:file_key/components，获取变体组件集为 /component_sets，获取团队已发布组件为 /teams/:team_id/components。
- 导出图片：GET https://api.figma.com/v1/images/:file_key，可通过 ids、format（png/svg）、scale 参数控制导出，响应返回图片 URL 映射。
- 组件代码生成：将 Figma 节点转换为 React 组件，提取尺寸、背景色、圆角、内边距、Auto Layout 的 Flexbox 布局与对齐等样式；同时支持生成 Tailwind CSS 类名（尺寸、背景、圆角映射、内边距、flex 布局与对齐）。
- 设计令牌提取：提取颜色（FILL 样式）与排版（TEXT 样式，含 fontFamily、fontWeight、fontSize、lineHeightPx、letterSpacing），并可生成完整的 DesignTokens 结构，进一步输出为 CSS 变量（:root）与 Tailwind 配置（theme.extend）。
- Variables API（Design Tokens 2.0）：GET /files/:file_key/variables/local 获取变量，/variables/local/collections 获取变量集合；需企业或组织计划。包含 VariableCollection 与 Variable（BOOLEAN/FLOAT/STRING/COLOR，valuesByMode）结构。
- Dev Mode 集成：获取开发资源（标注、测量）GET /files/:file_key/dev_resources，创建开发资源 POST /dev_resources。
- Webhook：POST https://api.figma.com/v2/webhooks 配置事件（FILE_UPDATE、FILE_DELETE、FILE_VERSION_UPDATE、LIBRARY_PUBLISH、FILE_COMMENT），并给出处理 Webhook 的示例（校验 passcode，按事件类型同步设计令牌、重新生成组件、通知团队）。
- 完整设计到代码流水线：从 Figma 文件获取全部组件、生成设计令牌（tokens.css、tailwind.config.js）、生成 React 组件文件、将以 Icon/ 开头的组件导出为 SVG 图标的示例流程。
- 插件开发：提供插件清单 manifest.json 的基础结构（name、id、api、main、ui、editorType、capabilities、codegenLanguages 等）。
使用方式
- 设置环境变量 FIGMA_TOKEN。
- 从 Figma URL 提取 file key 与 node id。
- 调用相应 API 端点获取文件、节点、组件或导出图片。
- 使用示例中的函数将节点转换为 React 组件、Tailwind CSS 或设计令牌，并输出为文件。
- 可选：配置 Webhook 以在文件更新、库发布等事件时自动同步。
适用场景
- 提取设计令牌并同步到代码库。
- 从 Figma 组件生成 React/CSS 或 Tailwind 代码。
- 批量导出组件与图标。
- 设计变更时自动触发代码或令牌同步。
限制
- 认证需要 Figma Token。
- Variables API 需要企业或组织计划。
- 示例中部分内容（如 spacing、shadows、radii 的提取，生成 DesignTokens 中的注释）标注为待从文件提取，未提供完整实现。
- 插件清单示例的 codegenLanguages 内容在资料中未完整给出。