Figma设计分析与导出

提供专业级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

工作流模式

设计系统审计工作流

1. 提取文件数据→ 获取组件、样式和结构
2. 分析一致性→ 检查样式变化和未使用的元素
3. 生成报告→ 创建详细发现和建议
4. 手动实施→ 使用发现指导设计改进

资产导出工作流程

1. 识别导出目标→ 指定框架、组件或节点
2. 配置导出设置→ 设置格式、大小和命名约定
3. 批量处理→ 同时导出多个资产
4. 组织输出→ 为交接或实施构建文件结构

分析与文档工作流程

1. 提取设计数据→ 提取组件、样式和设计令牌
2. 审核合规性检查可访问性与品牌一致性
3. 生成文档创建样式指南与组件规范
4. 导出交付成果为开发或客户交接打包资产

资源

脚本/

• figma_client.py- 完整的 Figma API 封装器，包含所有 REST 端点
• export_manager.py- 支持多种格式与缩放比例的专业资产导出工具
• style_auditor.py- 设计系统分析与品牌一致性检查工具
• accessibility_checker.py- 全面的 WCAG 合规性验证与报告工具

参考资料/

• 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/- 常见布局模式与流程

集成示例

与开发工作流

# 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

限制与范围

只读操作

此技能通过REST API提供对Figma文件的只读访问。它可以：

• ✅ 提取数据、组件和样式
• ✅ 以多种格式导出资源
• ✅ 分析和审计设计文件
• ✅ 生成全面的报告

其无法实现的功能

• ❌修改现有文件（颜色、文本、组件）
• ❌创建新的设计或组件
• ❌批量更新多个文件
• ❌实时协作功能

如需修改文件，您需要开发一个Figma插件使用插件API。

技术特性

API速率限制

内置速率限制和重试逻辑，以优雅地处理Figma的API约束。

错误处理

全面的错误处理，包含详细的日志记录和恢复建议。

多格式支持

以平台特定尺寸导出PNG、SVG、PDF及WEBP格式资源。