An AI-driven automation tool that converts Figma design links directly into native mobile UI code for Android and iOS.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install figma-mobile
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-mobile 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 Mobile?
Figma Mobile is a specialized development tool within the Openclaw Skills ecosystem designed to bridge the gap between UI/UX design and mobile implementation. By leveraging the Figma REST API, it extracts design trees and tokens to generate production-ready code for Jetpack Compose, Android XML, SwiftUI, and UIKit.
The skill emphasizes developer intent and accuracy through an interactive clarification workflow. It doesn't just copy pixels; it understands component instances, variant properties, and layout structures to output clean, maintainable code that aligns with modern mobile development standards.
Figma Mobile Use Cases
- Rapidly prototyping mobile screens by pasting Figma URLs directly into your development environment.
- Converting complex Figma design tokens and layouts into native Android Jetpack Compose or iOS SwiftUI components.
- Migrating legacy Android XML layouts to modern Compose or iOS UIKit to SwiftUI.
- Analyzing design differences between multiple Figma frames to generate conditional UI logic or state-based styling.
How Figma Mobile Works
- The user provides a Figma design link which triggers the skill to fetch the design tree using a Node.js-based fetch script.
- The skill analyzes the structure, identifying repeating patterns, component instances (INSTANCE nodes), and variant properties like state or theme.
- A structural summary is presented to the user to confirm the AI's understanding of the layout (e.g., navigation bars, lists, and primary buttons).
- The system asks targeted clarification questions regarding output format (Compose vs. SwiftUI) and component selection if ambiguities exist.
- Final production-ready code files are generated, following predefined semantic rules for the chosen platform.
Figma Mobile Setup
To use this skill, ensure you have Node.js 18+ installed and a valid Figma Personal Access Token.
# Set your Figma Token in your environment or .env file
export FIGMA_TOKEN=your_figma_personal_access_token
# Run the fetch script to pull design data
node src/figma-fetch.js "<FIGMA_URL>" --json
# Optional: Scan your local project to reuse existing colors/strings
node src/project-scan.js /path/to/project --json
Figma Mobile Data Schema & Taxonomy
The skill organizes design data and feedback through a structured taxonomy to ensure consistency across iterations.
| File/Data Type | Description |
|---|---|
| Figma Design Tree | Extracted via REST API, including node-id, variantProperties, and styles. |
feedback-log.md |
Tracks user corrections (Platform, Issue, Before/After) to refine future generations. |
scan-report.json |
A mapping of existing project resources (colors, dimensions) for style synchronization. |
| Reference Docs | Uses figma-interpretation.md and code-generation.md for semantic mapping. |
Figma Mobile Advanced Features
- Multi-URL Comparison: Use the
--compareflag to analyze two design states and generate logic for selectors or conditional styles. - SVG Vector Export: Automatically extract icons and complex shapes directly from Figma nodes using the
--export-svgcommand. - Project Resource Integration: Scan existing local projects to automatically map Figma hex codes to your existing app color variables.
- Automated Feedback Loop: Maintains a
feedback-log.mdto learn from manual code adjustments and improve future output accuracy within Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
Zhongshu Skill Pack
A comprehensive starter kit featuring 10 core tools designed to empower Openclaw agents with file manipulation, terminal execution, and sub-agent management capabilities.
Flyelep AI Poster Generator
An AI-powered image generation skill that creates professional eCommerce posters and product detail pages via the Flyelep API.
MindBreak
An automated health monitor for AI coding agents that tracks work intensity and triggers natural rest reminders.
TPR Framework
The TPR Framework is a cognitive closed-loop system designed to transform ambiguous requirements into verifiable, executable, and reviewable results.
Figma to Mobile Code (fignma-mobile-cn)
A specialized tool for AI agents to fetch Figma design trees and convert them into production-ready Android and iOS UI code.
Libai Perspective
A poetic decision-making framework and mental model based on the visionary spirit of Tang Dynasty poet Li Bai.
Featured*
