Figma

# Figma Design Analysis & Export

专业的 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 合规性” - “分析移动可用性的触摸目标” - “为此应用设计生成无障碍报告”

## 快速开始

### 身份验证设置 ```bash # Set your Figma access token export FIGMA_ACCESS_TOKEN="your-token-here"

# Or store in .env file echo "FIGMA_ACCESS_TOKEN=your-token" >> .env ```

### 基本操作 ```bash # 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. **导出交付物** → 打包资源以供开发或客户交付

## 资源

### 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/` - 常见布局模式和流程

## 集成示例

### 与开发工作流集成 ```bash # 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/ ```

### 与品牌管理集成 ```bash # 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 ```

### 与客户交付集成 ```bash # 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 文件的 **只读访问**。它可以： - ✅ 提取数据、组件和样式 - ✅ 以多种格式导出资源 - ✅ 分析和审计设计文件 - ✅ 生成综合报告

### 它无法执行的操作 - ❌ **修改现有文件**（颜色、文本、组件） - ❌ **创建新设计** 或组件 - ❌ **批量更新** 多个文件 - ❌ **实时协作** 功能

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

## 技术特性

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

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

### 多格式支持 以 PNG、SVG、PDF 和 WEBP 格式导出资源，并提供平台特定尺寸。