Figma

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.

Security Scan

The skill's files and runtime instructions expect a Figma access token and perform networked read/export operations, but the registry metadata does not declare any required credentials—this mismatch and the presence of runnable scripts warrants caution.

Purpose & Capability

The skill's name/description (Figma design analysis & export) matches the shipped code (API client, export manager, accessibility and style auditors). The capability set (exporting images, auditing accessibility, generating tokens/docs) is coherent with the included scripts and references.

Instruction Scope

SKILL.md explicitly instructs users to set FIGMA_ACCESS_TOKEN and shows CLI commands that call the included Python scripts. Those instructions require reading remote Figma files and writing exported assets/reports to disk. The SKILL.md also claims read-only access to Figma files (reasonable), but the runtime instructions access an environment variable (FIGMA_ACCESS_TOKEN) that is not declared in the skill metadata—this is a direct scope/visibility mismatch.

Install Mechanism

There is no install spec (instruction-only at registry level), and the package includes Python scripts and a requirements.txt. No external download URLs or extract/install actions are present in the registry metadata. The risk is the usual one for shipped scripts (they will run on the host) but there is no installer that pulls arbitrary remote code.

Credentials

The SKILL.md and code expect a Figma access token (FIGMA_ACCESS_TOKEN) to call the Figma REST API, but the registry lists no required environment variables or primary credential—this is an incoherence. Aside from the Figma token, the requirements.txt contains only common Python networking libs (requests, aiohttp). There are no declared unrelated credentials, but the absence of declared FIGMA_ACCESS_TOKEN is misleading and could cause unexpected prompts or runtime failures.

Persistence & Privilege

The skill does not request 'always: true' and does not declare system-wide configuration changes. It will create output files (exports, reports) under local output directories as part of normal operation; this is consistent with its stated purpose but means running the scripts will write files to disk.

What to consider before installing

This skill includes runnable Python scripts that call the Figma API and write exported assets and reports to disk. Before installing or running it: - Expect to provide a Figma access token (FIGMA_ACCESS_TOKEN). The registry metadata currently does not declare this—verify how the token is read by inspecting scripts/figma_client.py (look for environment variable or file-based token handling). - Review figma_client.py to confirm the only network destination is the official Figma API (api.figma.com) and ensure no unexpected remote endpoints or obfuscated network calls exist. - Run the scripts in an isolated environment (virtualenv, container) and with a scoped or temporary Figma token (principle of least privilege). Revoke the token after use if you are unsure. - Be aware the tool will write exported images, token files, and reports to local directories (configurable output paths). Confirm output paths before running to avoid accidental overwrites. - If you need higher assurance, ask the publisher for corrected registry metadata that explicitly declares the FIGMA_ACCESS_TOKEN requirement and provide a homepage or source repo to review. I rate this suspicious (not clearly malicious) because the functionality is consistent with a Figma export/audit tool but the missing credential declaration and the presence of runnable networked scripts are an incoherence you should resolve before use.

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.