A professional-grade Figma integration for programmatically analyzing design systems, auditing WCAG compliance, and automating multi-format asset exports.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install figma
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install figma using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Figma Design Analysis & Export?
This skill provides a robust interface for deep design file analysis and automated asset management. It allows developers and designers to programmatically inspect Figma files, extract design tokens, and verify brand consistency without manual clicking. By leveraging the Figma REST API, it streamlines the handoff process and ensures that design-to-code workflows remain accurate and efficient.
As a core component of the Openclaw Skills ecosystem, it specializes in read-only operations that prioritize data integrity. Users can generate comprehensive reports on WCAG accessibility compliance, list all components and styles, and export high-quality images for various platforms, including iOS, Android, and web environments.
Figma Design Analysis & Export Use Cases
- Automating the export of components as SVG or PNG for frontend development.
- Auditing existing design systems for color and typography consistency.
- Checking Figma designs for WCAG AA/AAA accessibility compliance.
- Generating CSS design tokens and JSON data from design styles.
- Packaging brand assets and marketing materials for client deliverables.
How Figma Design Analysis & Export Works
- The skill connects to the Figma REST API using a provided personal access token.
- It fetches the complete JSON tree representation of a specified Figma file or node.
- The logic parses styles, components, and layout properties for analysis or auditing.
- Based on the command, it triggers asset rendering engines to generate image files in multiple formats and scales.
- It organizes the processed data and assets into structured directories or generates detailed HTML/JSON reports.
Figma Design Analysis & Export Setup
To get started with this skill in your Openclaw Skills workflow, set your Figma access token as an environment variable:
export FIGMA_ACCESS_TOKEN="your-token-here"
Alternatively, you can store it in a .env file:
echo "FIGMA_ACCESS_TOKEN=your-token" >> .env
Ensure you have the required Python scripts available in your environment to execute auditing and export commands.
Figma Design Analysis & Export Data Schema & Taxonomy
The skill organizes data into a logical structure to facilitate easy integration:
| Component | Description | Format |
|---|---|---|
| scripts/ | Core execution logic for clients and auditors | .py |
| references/ | Documentation for APIs and design patterns | .md |
| assets/ | Templates for design systems and brand kits | Directory |
| outputs/ | Generated assets and compliance reports | PNG, SVG, HTML |
Figma Design Analysis & Export Advanced Features
- Multi-platform asset scaling (@1x, @2x, @3x) for mobile development.
- Automated WCAG contrast checking and touch target validation.
- CSS custom property generation directly from Figma styles.
- Built-in API rate limiting and retry logic for high-volume requests.
- Custom template support for client-ready presentation packages.
SKILL.md
Loading
Related Openclaw Skills
Figma Design Analysis & Asset Export
A professional-grade Figma integration for automated design system analysis, multi-format asset export, and comprehensive WCAG accessibility auditing.
Context Compressor
An automated context management tool that intelligently compresses conversation history to maintain AI agent performance during long coding sessions.
SlopeSniper
SlopeSniper is an AI-powered Solana trading assistant that enables token swaps on Jupiter DEX using simple natural language commands and automated safety protocols.
SlopeSniper
An AI-powered Solana trading assistant that enables seamless token swaps and portfolio management through natural language commands.
Substack Article Formatter
A technical formatting tool that converts plain text into Substack-optimized HTML for seamless copy-pasting.
sonoscli
A robust command-line interface for discovering, controlling, and grouping Sonos speakers within your local network.
METADATA
Featured*
