figma

What This Skill Does

The Figma Design Analysis & Export skill provides a professional-grade bridge between Figma’s complex design files and your technical workflow. It serves as a comprehensive toolset for developers and product managers to extract raw design data, audit design systems, and manage asset pipelines without needing to manually inspect frames inside the Figma editor. The skill enables read-only analysis of design files, allowing you to pull JSON representations of layers, automate the batch export of assets across multiple file formats (PNG, SVG, PDF, WEBP), and perform rigorous automated design audits. Whether you are generating CSS variables from a design system, checking for WCAG contrast compliance, or scaling assets for cross-platform mobile development, this skill transforms manual design handoff into a streamlined, programmatic process.

Installation

To integrate this skill into your OpenClaw environment, use the following CLI command:

clawhub install openclaw/skills/skills/maddiedreese/figma-design-toolkit

Ensure you have your Figma access token ready. You can authenticate by setting the FIGMA_ACCESS_TOKEN environment variable in your terminal session or by adding it to your local .env file.

Use Cases

• Design System Auditing: Automatically detect spacing, typography, and color inconsistencies across large component libraries.
• Asset Pipeline Automation: Generate standardized image assets (1x, 2x, 3x) for iOS and Android platforms directly from design frames.
• Accessibility Compliance: Run automated accessibility reports to verify color contrast ratios and interactive touch target sizes.
• Handoff & Tokenization: Extract design tokens (colors, fonts, shadows) to sync with Tailwind or CSS/SCSS project files.

Example Prompts

1. "Analyze the current file key 'xyz-123' and generate a report on any color contrast issues that violate WCAG AA standards."
2. "Export all components tagged as 'button' from this Figma file into both SVG and PNG formats, sorted into folders by density."
3. "Extract the typography and color palette from this design file and format the output as a CSS variable file for my project."

Tips & Limitations

• Read-Only: This skill is strictly for analysis and export; it cannot modify, move, or delete layers within your Figma files.
• Permissions: Ensure your Figma access token has sufficient scope permissions to read the specific files or projects you intend to analyze.
• Token Security: Never commit your FIGMA_ACCESS_TOKEN to version control; always use environment variables or secret management services.