What makes figma-to-mobile notable?

2.3K downloads. Trust evidence available

How should figma-to-mobile be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

figma-to-mobile

Convert Figma designs to mobile UI code (Compose/XML/SwiftUI/UIKit/Flutter) via the Figma REST API with local resource scanning, multi-frame comparison, and feedback-log corrections. Activate when a user provides a Figma link and asks for mobile layout code. Skill: figma-to-mobile Owner: timeaground Summary: Convert Figma designs to mobile UI code (Compose/XML/SwiftUI/UIKit/Flutter) via the Figma REST API with local resource scanning, multi-frame comparison, and feedback-log corrections. Activate when a user provides a Figma link and asks for mobile layout code. Tags: latest:2.3.0 Version history: v2.3.0 | 2026-08-06T15:45:12.237Z | auto - Adds new references for error h

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

2.3k

Updated

Oct 9, 2026

Version

2.3.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 2.3K downloads reported by the source. Last updated 10/9/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 9, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 9, 2026
Adoption signal: 2.3K downloadsadoption · observed Oct 9, 2026
Latest release: 2.3.0release · observed Aug 6, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s1768nwd588za5fw47dcmmxwwh843t26:figma-to-mobile

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-timeaground-figma-to-mobile/snapshot"

Documentation

CLAWHUB

159,906 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: figma-to-mobile
version: 2.3.0
requires: [Bash, Read, Write, Grep, Glob]
description: >-
  Convert Figma designs to mobile UI code (Compose/XML/SwiftUI/UIKit/Flutter)
  via the Figma REST API with local resource scanning, multi-frame comparison,
  and feedback-log corrections. Activate when a user provides a Figma link and
  asks for mobile layout code.
metadata:
  {
    "openclaw":
      {
        "requires": { "bins": ["python3"], "env": ["FIGMA_TOKEN"] },
        "primaryEnv": "FIGMA_TOKEN",
        "permissions":
          {
            "network": [ "api.figma.com" ],
            "fs":
              {
                "read": [ "project root — for resource scanning (colors, strings, components)" ],
                "write": [
                  "project root — for generated UI code files",
                  "project root — for feedback-log.md (user consent required)"
                ]
              }
          },
        "install":
          [
            {
              "id": "python-requests",
              "kind": "shell",
              "command": "pip3 install requests",
              "label": "Install Python requests package",
            },
          ],
      },
    "resourceManifest":
      {
        "cpu": "low — short-lived CLI scripts",
        "memory": "low (< 512 MB)",
        "timeout": "30s per API request; 3 retries; ~2s min interval between requests",
        "network": [ "api.figma.com" ],
      },
  }
---

# Figma to Mobile

Convert Figma designs to mobile UI code with interactive clarification.

Supported: Android Compose, Android XML, iOS SwiftUI, iOS UIKit.

## Prerequisites

- `FIGMA_TOKEN` environment variable set (Figma > Settings > Personal Access Tokens)
  ⚠️ **Your Figma token is sensitive** — treat it like a password. Never paste it into chat
    messages (they may be logged). Set it via your shell rc file or OpenClaw env config.
- Python 3.8+ with `requests` package

## Trigger & Input

This skill activates when a user **explicitly asks to convert a Figma design to mobile UI code** and provides a Figma link. It does NOT activate on casual mentions of Figma links, pasted URLs in logs, or design references without a conversion request.

The user may also include **inline hints** alongside the link, such as:
- Target platform: "Android XML", "Compose", "SwiftUI", "UIKit"
- Layout preferences: "use ConstraintLayout", "prefer StackView"
- Component notes: "the switch is our custom CompactSwitch", "this is a dynamic list"
- Any other context about the design

**If the user provides hints, respect them and skip the corresponding questions.**
For example, if the user says "Android XML, the 3 cards are a RecyclerView list", do NOT ask about output format or whether the cards are dynamic/static.

## Not Applicable

This skill is NOT for:

- **Screenshot / image → code**: it works only with Figma design links via the Figma REST API, not with

README.md

# figma-to-mobile

Convert Figma designs to production-ready mobile UI code using AI.

Supports: **Jetpack Compose** · **Android XML** · **SwiftUI** · **UIKit**

## Demo

Here's a side-by-side comparison using a [Material Design 3 Messaging App](https://www.figma.com/community/file/1169726503071187057/) from Figma Community:

![Figma to Compose comparison](assets/demo-comparison.png)

**Left:** Figma design · **Right:** Generated Jetpack Compose code running in Android Studio

The tool reads the Figma design tree (auto-layout, style refs, variants) and generates idiomatic code — not pixel-positioned boxes.

## How It Works

1. **Fetch** — Python script calls Figma API to extract the node tree
2. **Interpret** — AI analyzes layout semantics: "6 similar rows → `LazyColumn`", "horizontal stack → `Row`"
3. **Generate** — Outputs platform-idiomatic code with proper theming (Material3, SF Symbols, etc.)
4. **Iterate** — Refine through natural language: "make the header sticky", "switch to dark theme"

## Install

### OpenClaw

```bash
clawhub install figma-to-mobile
```

### Claude Code

Copy the `figma-to-mobile` folder into your project:
```
your-project/.claude/skills/figma-to-mobile/
```

### GitHub Copilot

Copy the `figma-to-mobile` folder into your project:
```
your-project/.agents/skills/figma-to-mobile/
```

## Setup

> ⚠️ **Figma Token** — Set the `FIGMA_TOKEN` environment variable.
> Generate one at Figma → Avatar → Settings → Security → Personal Access Tokens.
>
> **Do not paste your token into chat** — chat messages may be logged.
> Set it via your shell profile or system environment variables:
>
> ```bash
> # macOS/Linux
> export FIGMA_TOKEN="figd_your_token_here"
>
> # Windows PowerShell
> $env:FIGMA_TOKEN = "figd_your_token_here"
> ```

## Usage

Paste a Figma design link in your AI assistant's chat:

> Convert this to Jetpack Compose: https://www.figma.com/design/xxx/Project?node-id=100-200

The agent will:
1. Fetch the design data from Figma API
2. Ask clarifying questions (platform, list vs static, etc.)
3. Generate production-ready code files
4. Iterate based on your feedback — only patches the changed lines, never regenerates the full file unless you ask

## What Makes It Different

| Feature | Screenshot-based tools | figma-to-mobile |
|---------|----------------------|-----------------|
| Input | Screenshot/image | Figma API (design tree) |
| Layout understanding | Pixel positions | Auto-layout semantics |
| Output quality | Absolute positioning | Idiomatic code (LazyColumn, VStack, etc.) |
| Iteration | Re-screenshot | Natural language refinement |
| Cost | Paid subscription | Free & open source |

## What's in the Box

```
figma-to-mobile/
├── SKILL.md              # Agent instructions (the brain)
├── scripts/
│   └── figma_fetch.py    # Figma API data fetcher
├── references/
│   ├── compose-patterns.md   # Jetpack Compose mapping rules

_meta.json

{
  "ownerId": "kn7crx9z6m9cw8gpcwbhp8na31843hnr",
  "slug": "figma-to-mobile",
  "version": "2.3.0",
  "publishedAt": 1786031112237
}

references/compose-patterns.md

# Compose Patterns — Figma to Jetpack Compose Mapping

> Purpose: Map Figma properties to Jetpack Compose code.
> This is a **mapping reference**, not a Compose tutorial — the agent already knows Compose conventions.

## Layout Selection Guide

| Figma Structure | Recommended Composable |
|---|---|
| Vertical stack | Column |
| Horizontal stack | Row |
| Overlapping / z-stacking | Box |
| Repeating similar items (≥3) | LazyColumn / LazyRow |
| Page structure with top/bottom bars | Scaffold |
| Complex relative positioning | Box with Modifier.align / offset |

## Auto-layout Mapping

| Figma Property | Compose Equivalent |
|---|---|
| layoutMode: VERTICAL | Column |
| layoutMode: HORIZONTAL | Row |
| itemSpacing | Arrangement.spacedBy(X.dp) |
| padding* | Modifier.padding() |
| primaryAxisAlignItems: CENTER | verticalArrangement = Arrangement.Center |
| counterAxisAlignItems: CENTER | horizontalAlignment = Alignment.CenterHorizontally |
| layoutGrow: 1 | Modifier.weight(1f) |
| primaryAxisSizingMode: FIXED | Modifier.height/width(X.dp) |
| counterAxisSizingMode: AUTO | wrapContentWidth/Height |

## Size Conversion

- Figma px → Compose .dp (1:1)
- Figma font px → Compose .sp (1:1)

## Shadow Mapping

```kotlin
// Elevation shadow
Card(elevation = CardDefaults.cardElevation(defaultElevation = 4.dp))

// Custom shadow (Compose 1.6+)
Modifier.shadow(
    elevation = 4.dp,
    shape = RoundedCornerShape(12.dp),
    ambientColor = Color(0x1A000000),
    spotColor = Color(0x33000000)
)
```

## Gradient Mapping

```kotlin
// Linear gradient
Modifier.background(
    Brush.linearGradient(
        colors = listOf(Color(0xFFFF6B6B), Color(0xFF4ECDC4)),
        start = Offset(0f, 0f),
        end = Offset(0f, Float.POSITIVE_INFINITY)
    )
)
```

## Per-corner Radius

```kotlin
RoundedCornerShape(
    topStart = 12.dp,
    topEnd = 12.dp,
    bottomEnd = 0.dp,
    bottomStart = 0.dp
)
```

## Page Architecture Patterns

These patterns reflect how Android apps are **actually structured** in production with Compose.

### Multi-Tab Pages
When a design shows **multiple tabs** (≥2 text labels acting as navigation):
- Use `TabRow` + `HorizontalPager` (accompanist or foundation) for top tabs
- Use `NavigationBar` for bottom navigation
- Do NOT use plain `Text` composables for tabs — they lack selection state, indicators, and swipe support
- Each tab's content should be a separate `@Composable` function

```kotlin
@Composable
fun TabScreen() {
    val pagerState = rememberPagerState(pageCount = { 3 })
    val scope = rememberCoroutineScope()
    val tabs = listOf("关注", "推荐", "热榜")

    Column {
        TabRow(
            selectedTabIndex = pagerState.currentPage,
            containerColor = Color.White,
            contentColor = Color(0xFF0F0F0F),
            indicator = { tabPositions ->
                TabRowDefaults.SecondaryIndicator(
                    modifier

references/error-handling.md

# Error Handling

## FIGMA_TOKEN not set (script outputs `FIGMA_TOKEN_NOT_SET`)

Tell the user:

> I need a Figma Personal Access Token to fetch the design.
> ⚠️ **Do not paste it into this chat** — chat messages may be logged.
> Set it as an environment variable and restart.
> Get one at: Figma → avatar → Settings → Security → Personal Access Tokens
>
>   Windows: `setx FIGMA_TOKEN "figd_xxx"`
>   macOS/Linux: add `export FIGMA_TOKEN="figd_xxx"` to ~/.zshrc

## FIGMA_TOKEN invalid (API returns 403/401)

Tell the user the token may have expired or been revoked. Direct them to
regenerate from Figma Settings → Security → Personal Access Tokens.

## Invalid URL

Show valid URL example: `https://www.figma.com/design/<fileKey>/<name>?node-id=<id>`

## API error

Show the error message, suggest checking network/proxy.

## Node too large (>200 children)

Suggest selecting a smaller frame.

## Depth auto-increased

The script auto-retries with deeper depth if it detects truncated children.
Inform the user if this happens ("I needed to fetch deeper to get all details").

Github ReposUpdated 3h agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.