A powerful integration that allows AI agents to interact with Figma workspaces for design inspection, asset management, and collaboration.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install figma-2
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-2 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 Integration for AI Agents?
This skill enables AI agents to interface directly with the Figma REST API through a secure MorphixAI proxy. It empowers developers and designers to automate workflows within Openclaw Skills, such as navigating team projects, extracting design tokens, and retrieving specific node metadata.
By integrating this skill, your agent gains the ability to see and interact with the visual source of truth, making it an essential tool for design-to-code workflows and automated design reviews. It bridges the gap between design files and development environments, allowing for seamless data extraction and feedback loops.
Figma Integration for AI Agents Use Cases
- Automated design-to-code conversion by fetching layer properties, styles, and dimensions.
- Streamlining design reviews by listing and posting comments directly from the AI agent interface.
- Creating automated asset pipelines for exporting SVG, PNG, or PDF icons and images from Figma frames.
- Auditing design systems by inspecting components, variants, and design tokens across team libraries.
- Tracking project history and versioning for automated documentation or change logs.
How Figma Integration for AI Agents Works
- The agent authenticates via MorphixAI using a secure API key and a linked Figma account.
- The user provides a File Key (extracted from the Figma URL) and optional Node IDs to target specific design elements.
- The skill queries the Figma REST API to retrieve JSON representations of the design tree or specific metadata for nodes.
- For asset requests, the skill triggers an image export and returns temporary URLs for the generated files.
- The agent processes this design data to perform high-level tasks like generating CSS, responding to user feedback, or organizing design assets within Openclaw Skills.
Figma Integration for AI Agents Setup
First, install the required plugin using the CLI:
openclaw plugins install openclaw-morphixai
Next, obtain your API key from the Morphix dashboard and set the environment variable:
export MORPHIXAI_API_KEY="mk_your_key_here"
Finally, link your Figma account via the connection portal or use the link tool:
mx_link app: "figma"
Figma Integration for AI Agents Data Schema & Taxonomy
The skill organizes design data based on the Figma REST API hierarchy. Key data structures include:
| Data Type | Description | Key Identifiers |
|---|---|---|
| Design Tree | Hierarchical structure of pages, frames, and layers. | file_key, node_id |
| Components | Metadata for reusable design elements and variants. | component_id, key |
| Design Tokens | Variables including colors, numbers, strings, and booleans. | variable_id, resolvedType |
| Comments | User feedback threads and messages. | comment_id, message |
| Assets | Temporary URLs for exported images in various formats. | scale, format |
Figma Integration for AI Agents Advanced Features
- Deep tree traversal with configurable depth limits to optimize performance and prevent timeouts on large files.
- Full support for Figma Design Tokens (Variables) including both local and published variable collections.
- Multi-mode variable resolution (Color, Float, String, Boolean) for complex, themed design systems.
- Comprehensive variant management through component set inspection and property mapping.
- Secure proxy architecture via MorphixAI to manage authentication without exposing sensitive credentials to Openclaw Skills directly.
SKILL.md
Loading
Related Openclaw Skills
Daily Standup Aggregator
A high-efficiency morning report tool that consolidates updates from development, project management, and communication platforms into a single actionable summary.
Confluence Cloud
A comprehensive integration for managing Confluence Cloud workspaces, enabling automated page lifecycle management and advanced knowledge base searching.
Home Assistant
A comprehensive integration for controlling Home Assistant devices, scripts, and scenes via REST API and bidirectional webhooks.
PR Triage AI Skill
Automate GitHub Pull Request prioritization by scoring contributions against your project's specific mission and values.
GitHub Workflow Integration
A comprehensive toolset for managing GitHub repositories, issues, pull requests, and CI/CD workflows through an AI agent.
Gmail Integration
A comprehensive Gmail integration skill that allows AI agents to securely read, search, send, and organize emails via the MorphixAI proxy.
METADATA
Featured*
