Figma

---

name: figma description: Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.

---

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.

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