176 lines
6.4 KiB
Markdown
176 lines
6.4 KiB
Markdown
---
|
|
name: figma
|
|
description: "专业Figma设计分析和资产导出。"
|
|
---
|
|
|
|
# Figma Design Analysis & Export
|
|
|
|
Professional-grade Figma integration for design system analysis, asset export, and comprehensive design auditing.
|
|
|
|
## Core Capabilities
|
|
|
|
### 1. File Operations & Analysis
|
|
- **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"
|
|
|
|
### 2. Design System Management
|
|
- **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"
|
|
|
|
### 3. Bulk Asset Export
|
|
- **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"
|
|
|
|
### 4. Accessibility & Quality Analysis
|
|
- **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"
|
|
|
|
## Quick Start
|
|
|
|
### Authentication Setup
|
|
```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
|
|
```
|
|
|
|
### Basic Operations
|
|
```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
|
|
```
|
|
|
|
## 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
|
|
|
|
### 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
|
|
|
|
### 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
|
|
|
|
## Resources
|
|
|
|
### 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
|
|
|
|
### 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
|
|
|
|
### assets/
|
|
- `templates/design-system/` - Pre-built component library templates
|
|
- `templates/brand-kits/` - Standard brand guideline structures
|
|
- `templates/wireframes/` - Common layout patterns and flows
|
|
|
|
## Integration Examples
|
|
|
|
### With Development Workflows
|
|
```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/
|
|
```
|
|
|
|
### With Brand Management
|
|
```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
|
|
```
|
|
|
|
### With Client Deliverables
|
|
```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
|
|
```
|
|
|
|
## 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
|
|
|
|
### 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.
|
|
|
|
## Technical Features
|
|
|
|
### API Rate Limiting
|
|
Built-in rate limiting and retry logic to handle Figma's API constraints gracefully.
|
|
|
|
### 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. |