figma

What This Skill Does

The Figma skill provides advanced capabilities for analyzing and interacting with Figma design files. It allows users to extract detailed design data, export assets in various formats (PNG, SVG, PDF, WEBP), audit accessibility compliance against WCAG standards, analyze design system consistency, and generate design documentation. This skill acts as a read-only analysis tool, offering powerful export and reporting features without altering the original Figma files. It can inspect entire files, list components and styles, export specific frames or nodes, and manage design tokens.

Installation

To install the Figma skill, use the following command:

clawhub install openclaw/skills/skills/maddiedreese/figma

Ensure you have your Figma Personal Access Token configured. You can set it as an environment variable:

export FIGMA_ACCESS_TOKEN="your-token-here"

Alternatively, store it in a .env file:

echo "FIGMA_ACCESS_TOKEN=your-token" >> .env

Use Cases

This skill is invaluable for UI/UX designers, design system managers, developers, and product managers. It streamlines workflows by automating repetitive tasks and providing deep insights into design files.

• Design System Auditing: Analyze color palettes, typography, spacing, and component usage for consistency and adherence to brand guidelines.
• Asset Export: Quickly export multiple assets (frames, components, nodes) in various formats and sizes for different platforms, reducing manual effort.
• Accessibility Compliance: Audit designs for WCAG AA compliance, checking color contrast, font sizes, and touch target sizes to ensure usability for all users.
• Developer Handoff: Extract design tokens (CSS/JSON) and generate comprehensive design documentation to improve collaboration between design and development teams.
• File Inspection: Get a complete JSON representation of Figma files for programmatic analysis or integration with other tools.

Example Prompts

• "Export all components from the main design system file as SVGs, organized by category."
• "Analyze this prototype file for WCAG 2.1 AA accessibility compliance and provide a report."
• "Show me all the distinct color styles and their usage across this project file."

Tips & Limitations

• Authentication: Always ensure your FIGMA_ACCESS_TOKEN is set correctly before using the skill. Use environment variables or a .env file for security.
• File Keys: You will need the unique File Key from your Figma file URLs for most operations.
• Read-Only: This skill performs read-only operations on Figma files. It cannot modify designs.
• Scope: While powerful, the skill's capabilities are limited to what can be programmatically accessed via the Figma API. Complex, highly dynamic interactions or plugins might not be fully represented.
• Performance: For very large or complex Figma files, analysis and export operations might take some time.