用途
Figma Design Analysis & Export 是一个面向设计系统分析、资产导出与设计审计的专业级 Figma 集成技能。它通过 Figma REST API 对 Figma 文件进行只读操作，帮助团队提取设计数据、导出多格式资产并生成合规与一致性报告。
主要能力
1. 文件操作与分析
- 文件检查：获取任意 Figma 文件的完整 JSON 表示。
- 组件提取：列出所有组件、样式和设计令牌。
- 资产导出：将画板、组件或指定节点批量导出为 PNG/SVG/PDF。
- 版本管理：访问特定文件版本与分支信息。
示例用法：
- “导出此设计系统文件中的所有组件”
- “获取这些特定画板的 JSON 数据”
- “展示此文件中使用的所有颜色和排版”
2. 设计系统管理
- 样式审计：分析颜色使用、排版一致性、间距模式。
- 组件分析：识别未使用组件，衡量使用模式。
- 品牌合规：检查跨文件是否符合品牌指南。
- 设计令牌提取：从 Figma 样式生成 CSS/JSON 设计令牌。
示例用法：
- “审计此设计系统的无障碍问题”
- “从这些 Figma 样式生成 CSS 自定义属性”
- “查找我们组件库中的所有不一致之处”
3. 批量资产导出
- 多格式导出：将资产导出为 PNG、SVG、PDF 或 WEBP。
- 平台特定尺寸：为 iOS/Android 生成 @1x、@2x、@3x 资产。
- 有序输出：按格式或平台自动组织文件夹。
- 客户交付包：含文档的完整交付物包。
示例用法：
- “以 PNG 和 SVG 格式导出所有组件”
- “为移动应用开发生成完整资产包”
- “创建包含所有营销资产的客户交付物”
4. 无障碍与质量分析
- 对比度检查：验证 WCAG 颜色对比度要求。
- 字号分析：确保排版比例可读。
- 交互元素尺寸：检查触控目标要求。
- 焦点状态验证：验证键盘导航模式。
示例用法：
- “检查此设计是否符合 WCAG AA”
- “分析移动端可用性的触控目标”
- “为此应用设计生成无障碍报告”
使用方式
认证设置
# Set your Figma access token
export FIGMA_ACCESS_TOKEN="your-token-here"
# Or store in .env file
echo "FIGMA_ACCESS_TOKEN=your-token" >> .env
基本操作
# Get file information and structure
python scripts/figma_client.py get-file "your-file-key"
# Export frames as images
python scripts/export_manager.py export-frames "file-key" --formats png,svg
# Analyze design system consistency
python scripts/style_auditor.py audit-file "file-key" --generate-html
# Check accessibility compliance
python scripts/accessibility_checker.py "file-key" --level AA --format html
工作流模式
设计系统审计工作流：
- 提取文件数据 → 获取组件、样式和结构
- 分析一致性 → 检查样式变体和未使用元素
- 生成报告 → 创建详细发现和建议
- 手动实施 → 使用发现指导设计改进
资产导出工作流：
- 确定导出目标 → 指定画板、组件或节点
- 配置导出设置 → 设置格式、尺寸和命名约定
- 批量处理 → 同时导出多个资产
- 组织输出 → 为交接或实现组织文件结构
分析与文档工作流：
- 提取设计数据 → 拉取组件、样式和设计令牌
- 审计合规 → 检查无障碍和品牌一致性
- 生成文档 → 创建样式指南和组件规格
- 导出交付物 → 为开发或客户交接打包资产
集成示例
与开发工作流：
# Generate design tokens for CSS
python scripts/export_manager.py export-tokens "file-key" --format css
# Create component documentation
python scripts/figma_client.py document-components "file-key" --output docs/
与品牌管理：
# Audit brand compliance in designs
python scripts/style_auditor.py audit-file "file-key" --brand-colors "#FF0000,#00FF00,#0000FF"
# Extract current brand colors for analysis
python scripts/figma_client.py extract-colors "file-key" --output brand-colors.json
与客户交付物：
# Generate client presentation assets
python scripts/export_manager.py client-package "file-key" --template presentation
# Create development handoff assets
python scripts/export_manager.py dev-handoff "file-key" --include-specs
资源
scripts/：
- figma_client.py - 完整的 Figma API 封装，包含所有 REST 端点
- export_manager.py - 专业资产导出，支持多格式和多种比例
- style_auditor.py - 设计系统分析与品牌一致性检查
- accessibility_checker.py - 全面的 WCAG 合规验证与报告
references/：
- figma-api-reference.md - 完整 API 文档与示例
- design-patterns.md - UI 模式与组件最佳实践
- accessibility-guidelines.md - WCAG 合规要求
- export-formats.md - 资产导出选项与规范
assets/：
- templates/design-system/ - 预构建组件库模板
- templates/brand-kits/ - 标准品牌指南结构
- templates/wireframes/ - 常见布局模式与流程
适用场景
- 设计系统审计与一致性检查
- 批量导出多格式、多倍率设计资产
- 生成 CSS/JSON 设计令牌供开发使用
- 检查 WCAG 无障碍合规性
- 创建客户交付包或开发交接资产
- 品牌合规性检查
限制
只读操作
本技能通过 REST API 对 Figma 文件提供只读访问，可以：
- ✅ 提取数据、组件和样式
- ✅ 以多种格式导出资产
- ✅ 分析和审计设计文件
- ✅ 生成综合报告
无法做到：
- ❌ 修改现有文件（颜色、文本、组件）
- ❌ 创建新设计或组件
- ❌ 批量更新多个文件
- ❌ 实时协作功能
如需修改文件，须使用 Plugin API 开发 Figma 插件。
技术特性
- API 速率限制：内置速率限制与重试逻辑，优雅处理 Figma 的 API 约束。
- 错误处理：全面的错误处理，含详细日志和恢复建议。
- 多格式支持：以 PNG、SVG、PDF 和 WEBP 导出资产，支持平台特定尺寸。