figma

What this skill does

# 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.