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

# 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

# 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

# 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

# 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

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