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.