Back to Details

figma

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Figma Design Analysis & Export

Figma设计分析与导出

Professional-grade Figma integration for design system analysis, asset export, and comprehensive design auditing.
专业级Figma集成工具，用于设计系统分析、资产导出和全面的设计审核。

Core Capabilities

核心功能

1. File Operations & Analysis

1. 文件操作与分析

  • File inspection: Get complete JSON representation of any Figma file
  • Component extraction: List all components, styles, and design tokens
  • Asset export: Batch export frames, components, or specific nodes as PNG/SVG/PDF
  • Version management: Access specific file versions and branch information
Example usage:
  • "Export all components from this design system file"
  • "Get the JSON data for these specific frames"
  • "Show me all the colors and typography used in this file"
  • 文件检查：获取任意Figma文件的完整JSON表示
  • 组件提取：列出所有组件、样式和设计令牌
  • 资产导出：批量导出框架、组件或特定节点为PNG/SVG/PDF格式
  • 版本管理：访问特定文件版本和分支信息
示例用法：
  • "导出此设计系统文件中的所有组件"
  • "获取这些特定框架的JSON数据"
  • "展示此文件中使用的所有颜色和排版样式"

2. Design System Management

2. 设计系统管理

  • Style auditing: Analyze color usage, typography consistency, spacing patterns
  • Component analysis: Identify unused components, measure usage patterns
  • Brand compliance: Check adherence to brand guidelines across files
  • Design token extraction: Generate CSS/JSON design tokens from Figma styles
Example usage:
  • "Audit this design system for accessibility issues"
  • "Generate CSS custom properties from these Figma styles"
  • "Find all inconsistencies in our component library"
  • 样式审核：分析颜色使用、排版一致性、间距模式
  • 组件分析：识别未使用的组件，统计使用模式
  • 品牌合规性检查：跨文件检查是否符合品牌规范
  • 设计令牌提取：从Figma样式生成CSS/JSON格式的设计令牌
示例用法：
  • "审核此设计系统的无障碍问题"
  • "从这些Figma样式生成CSS自定义属性"
  • "找出我们组件库中的所有不一致之处"

3. Bulk Asset Export

3. 批量资产导出

  • Multi-format exports: Export assets as PNG, SVG, PDF, or WEBP
  • Platform-specific sizing: Generate @1x, @2x, @3x assets for iOS/Android
  • Organized output: Automatic folder organization by format or platform
  • Client packages: Complete deliverable packages with documentation
Example usage:
  • "Export all components in PNG and SVG formats"
  • "Generate complete asset package for mobile app development"
  • "Create client deliverable with all marketing assets"
  • 多格式导出：导出PNG、SVG、PDF或WEBP格式的资产
  • 平台特定尺寸：生成适用于iOS/Android的@1x、@2x、@3x规格资产
  • 有序输出：按格式或平台自动整理文件夹
  • 客户端交付包：包含文档的完整交付包
示例用法：
  • "导出所有组件为PNG和SVG格式"
  • "生成移动应用开发所需的完整资产包"
  • "创建包含所有营销资产的客户端交付件"

4. Accessibility & Quality Analysis

4. 无障碍与质量分析

  • Contrast checking: Verify WCAG color contrast requirements
  • Font size analysis: Ensure readable typography scales
  • Interactive element sizing: Check touch target requirements
  • Focus state validation: Verify keyboard navigation patterns
Example usage:
  • "Check this design for WCAG AA compliance"
  • "Analyze touch targets for mobile usability"
  • "Generate an accessibility report for this app design"
  • 对比度检查：验证WCAG颜色对比度要求
  • 字号分析：确保可读的排版缩放
  • 交互元素尺寸检查：检查触摸目标要求
  • 焦点状态验证：验证键盘导航模式
示例用法：
  • "检查此设计是否符合WCAG AA标准"
  • "分析移动设备可用性的触摸目标"
  • "为此应用设计生成无障碍报告"

Quick Start

快速开始

Authentication Setup

认证设置

bash
undefined
bash
undefined

Set your Figma access token

Set your Figma access token

export FIGMA_ACCESS_TOKEN="your-token-here"
export FIGMA_ACCESS_TOKEN="your-token-here"

Or store in .env file

Or store in .env file

echo "FIGMA_ACCESS_TOKEN=your-token" >> .env
undefined
echo "FIGMA_ACCESS_TOKEN=your-token" >> .env
undefined

Basic Operations

基础操作

bash
undefined
bash
undefined

Get file information and structure

Get file information and structure

python scripts/figma_client.py get-file "your-file-key"
python scripts/figma_client.py get-file "your-file-key"

Export frames as images

Export frames as images

python scripts/export_manager.py export-frames "file-key" --formats png,svg
python scripts/export_manager.py export-frames "file-key" --formats png,svg

Analyze design system consistency

Analyze design system consistency

python scripts/style_auditor.py audit-file "file-key" --generate-html
python scripts/style_auditor.py audit-file "file-key" --generate-html

Check accessibility compliance

Check accessibility compliance

python scripts/accessibility_checker.py "file-key" --level AA --format html
undefined
python scripts/accessibility_checker.py "file-key" --level AA --format html
undefined

Workflow Patterns

工作流模式

Design System Audit Workflow

设计系统审核工作流

  1. Extract file data → Get components, styles, and structure
  2. Analyze consistency → Check for style variations and unused elements
  3. Generate report → Create detailed findings and recommendations
  4. Manual implementation → Use findings to guide design improvements
  1. 提取文件数据 → 获取组件、样式和结构
  2. 分析一致性 → 检查样式差异和未使用元素
  3. 生成报告 → 创建详细的发现结果和建议
  4. 手动实施 → 根据发现结果指导设计改进

Asset Export Workflow

资产导出工作流

  1. Identify export targets → Specify frames, components, or nodes
  2. Configure export settings → Set formats, sizes, and naming conventions
  3. Batch process → Export multiple assets simultaneously
  4. Organize output → Structure files for handoff or implementation
  1. 确定导出目标 → 指定框架、组件或节点
  2. 配置导出设置 → 设置格式、尺寸和命名规则
  3. 批量处理 → 同时导出多个资产
  4. 整理输出 → 整理文件以便交接或实施

Analysis & Documentation Workflow

分析与文档工作流

  1. Extract design data → Pull components, styles, and design tokens
  2. Audit compliance → Check accessibility and brand consistency
  3. Generate documentation → Create style guides and component specs
  4. Export deliverables → Package assets for development or client handoff
  1. 提取设计数据 → 提取组件、样式和设计令牌
  2. 审核合规性 → 检查无障碍和品牌一致性
  3. 生成文档 → 创建样式指南和组件规范
  4. 导出交付件 → 打包资产用于开发或客户端交接

Resources

资源

scripts/

scripts/

  • figma_client.py
    - Complete Figma API wrapper with all REST endpoints
  • export_manager.py
    - Professional asset export with multiple formats and scales
  • style_auditor.py
    - Design system analysis and brand consistency checking
  • accessibility_checker.py
    - Comprehensive WCAG compliance validation and reporting
  • figma_client.py
    - 包含所有REST端点的完整Figma API封装
  • export_manager.py
    - 支持多种格式和尺寸的专业资产导出工具
  • style_auditor.py
    - 设计系统分析与品牌一致性检查工具
  • accessibility_checker.py
    - 全面的WCAG合规性验证与报告工具

references/

references/

  • figma-api-reference.md
    - Complete API documentation and examples
  • design-patterns.md
    - UI patterns and component best practices
  • accessibility-guidelines.md
    - WCAG compliance requirements
  • export-formats.md
    - Asset export options and specifications
  • figma-api-reference.md
    - 完整的API文档和示例
  • design-patterns.md
    - UI模式与组件最佳实践
  • accessibility-guidelines.md
    - WCAG合规要求
  • export-formats.md
    - 资产导出选项与规格

assets/

assets/

  • templates/design-system/
    - Pre-built component library templates
  • templates/brand-kits/
    - Standard brand guideline structures
  • templates/wireframes/
    - Common layout patterns and flows
  • templates/design-system/
    - 预构建的组件库模板
  • templates/brand-kits/
    - 标准品牌规范结构
  • templates/wireframes/
    - 常见布局模式与流程

Integration Examples

集成示例

With Development Workflows

与开发工作流集成

bash
undefined
bash
undefined

Generate design tokens for CSS

Generate design tokens for CSS

python scripts/export_manager.py export-tokens "file-key" --format css
python scripts/export_manager.py export-tokens "file-key" --format css

Create component documentation

Create component documentation

python scripts/figma_client.py document-components "file-key" --output docs/
undefined
python scripts/figma_client.py document-components "file-key" --output docs/
undefined

With Brand Management

与品牌管理集成

bash
undefined
bash
undefined

Audit brand compliance in designs

Audit brand compliance in designs

python scripts/style_auditor.py audit-file "file-key" --brand-colors "#FF0000,#00FF00,#0000FF"
python scripts/style_auditor.py audit-file "file-key" --brand-colors "#FF0000,#00FF00,#0000FF"

Extract current brand colors for analysis

Extract current brand colors for analysis

python scripts/figma_client.py extract-colors "file-key" --output brand-colors.json
undefined
python scripts/figma_client.py extract-colors "file-key" --output brand-colors.json
undefined

With Client Deliverables

与客户端交付件集成

bash
undefined
bash
undefined

Generate client presentation assets

Generate client presentation assets

python scripts/export_manager.py client-package "file-key" --template presentation
python scripts/export_manager.py client-package "file-key" --template presentation

Create development handoff assets

Create development handoff assets

python scripts/export_manager.py dev-handoff "file-key" --include-specs
undefined
python scripts/export_manager.py dev-handoff "file-key" --include-specs
undefined

Limitations & Scope

限制与适用范围

Read-Only Operations

只读操作

This skill provides read-only access to Figma files through the REST API. It can:
  • ✅ Extract data, components, and styles
  • ✅ Export assets in multiple formats
  • ✅ Analyze and audit design files
  • ✅ Generate comprehensive reports
本工具通过REST API仅提供对Figma文件的只读访问。它可以：
  • ✅ 提取数据、组件和样式
  • ✅ 导出多种格式的资产
  • ✅ 分析和审核设计文件
  • ✅ 生成全面的报告

What It Cannot Do

无法实现的功能

  • ❌ Modify existing files (colors, text, components)
  • ❌ Create new designs or components
  • ❌ Batch update multiple files
  • ❌ Real-time collaboration features
For file modifications, you would need to develop a Figma plugin using the Plugin API.
  • ❌ 修改现有文件（颜色、文本、组件）
  • ❌ 创建新设计或组件
  • ❌ 批量更新多个文件
  • ❌ 实时协作功能
如需修改文件，您需要使用Plugin API开发Figma插件。

Technical Features

技术特性

API Rate Limiting

API速率限制

Built-in rate limiting and retry logic to handle Figma's API constraints gracefully.
内置速率限制和重试逻辑，可优雅处理Figma的API约束。

Error Handling

错误处理

Comprehensive error handling with detailed logging and recovery suggestions.
全面的错误处理机制，包含详细日志和恢复建议。

Multi-Format Support

多格式支持

Export assets in PNG, SVG, PDF, and WEBP with platform-specific sizing.
支持导出PNG、SVG、PDF和WEBP格式的资产，并提供平台特定尺寸选项。