{"id":"76796ec1-1db6-4e82-8e5d-76f680ed9ab5","slug":"clawhub-timeaground-figma-to-mobile","name":"figma-to-mobile","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.","canonicalUrl":"https://www.xpersona.co/agent/clawhub-timeaground-figma-to-mobile","sourceUrl":"https://clawhub.ai/timeaground/figma-to-mobile","homepage":"https://clawhub.ai/timeaground/skills/figma-to-mobile","source":"CLAWHUB","vendor":{"slug":"clawhub","label":"Clawhub","url":"https://clawhub.ai/timeaground/skills/figma-to-mobile"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":"2.3.0","freshnessAt":"2026-10-09T16:51:27.084Z","freshnessLabel":"Oct 9, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Oct 9, 2026"},{"label":"Vendor","value":"Clawhub"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"2.3.0"}],"factsPreview":[{"factKey":"vendor","category":"vendor","label":"Vendor","value":"Clawhub","href":"https://clawhub.ai/timeaground/skills/figma-to-mobile","sourceUrl":"https://clawhub.ai/timeaground/skills/figma-to-mobile","sourceType":"profile","confidence":"medium","observedAt":"2026-10-09T16:51:27.085Z","isPublic":true},{"factKey":"protocols","category":"compatibility","label":"Protocol compatibility","value":"OpenClaw","href":"https://www.xpersona.co/api/v1/agents/clawhub-timeaground-figma-to-mobile/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-timeaground-figma-to-mobile/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-10-09T16:51:27.085Z","isPublic":true},{"factKey":"traction","category":"adoption","label":"Adoption signal","value":"2.3K downloads","href":"https://clawhub.ai/timeaground/figma-to-mobile","sourceUrl":"https://clawhub.ai/timeaground/figma-to-mobile","sourceType":"profile","confidence":"medium","observedAt":"2026-10-09T16:51:27.085Z","isPublic":true},{"factKey":"latest_release","category":"release","label":"Latest release","value":"2.3.0","href":"https://clawhub.ai/timeaground/figma-to-mobile","sourceUrl":"https://clawhub.ai/timeaground/figma-to-mobile","sourceType":"release","confidence":"medium","observedAt":"2026-08-06T15:45:12.237Z","isPublic":true},{"factKey":"handshake_status","category":"security","label":"Handshake status","value":"UNKNOWN","href":"https://www.xpersona.co/api/v1/agents/clawhub-timeaground-figma-to-mobile/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-timeaground-figma-to-mobile/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true}],"highlights":["2.3K downloads","Trust evidence available"],"agentCard":{"name":"figma-to-mobile","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.","source":"CLAWHUB","sourceId":"clawhub:s1768nwd588za5fw47dcmmxwwh843t26:figma-to-mobile","homepage":"https://clawhub.ai/timeaground/skills/figma-to-mobile","repository":"https://clawhub.ai/timeaground/figma-to-mobile","documentation":"https://www.xpersona.co/agent/clawhub-timeaground-figma-to-mobile","protocols":["OPENCLEW"],"examples":[{"kind":"example","language":"text","snippet":"File v2.3.0:references/error-handling.md\n\n# Error Handling\r\n\r\n## FIGMA_TOKEN not set (script outputs `FIGMA_TOKEN_NOT_SET`)\r\n\r\nTell the user:\r\n\r\n> I need a Figma Personal Access Token to fetch the design.\r\n> ⚠️ **Do not paste it into this chat** — chat messages may be logged.\r\n> Set it as an environment variable and restart.\r\n> Get one at: Figma → avatar → Settings → Security → Personal Access Tokens\r\n>\r\n>   Windows: `setx FIGMA_TOKEN \"figd_xxx\"`\r\n>   macOS/Linux: add `export FIGMA_TOKEN=\"figd_xxx\"` to ~/.zshrc\r\n\r\n## FIGMA_TOKEN invalid (API returns 403/401)\r\n\r\nTell the user the token may have expired or been revoked. Direct them to\r\nregenerate from Figma Settings → Security → Personal Access Tokens.\r\n\r\n## Invalid URL\r\n\r\nShow valid URL example: `https://www.figma.com/design/<fileKey>/<name>?node-id=<id>`\r\n\r\n## API error\r\n\r\nShow the error message, suggest checking network/proxy.\r\n\r\n## Node too large (>200 children)\r\n\r\nSuggest selecting a smaller frame.\r\n\r\n## Depth auto-increased\r\n\r\nThe script auto-retries with deeper depth if it detects truncated children.\r\nInform the user if this happens (\"I needed to fetch deeper to get all details\").\n\nFile v2.3.0:references/feedback-log.md\n\n# Feedback Log Format\r\n\r\n**⚠️ Every time the user corrects your output (layout issue, wrong component,\r\nspacing problem, etc.), you MUST log it to `feedback-log.md` before proceeding\r\nwith the fix (after user consent). Do not skip this step — the log is how the\r\nskill learns and improves over time.**\r\n\r\nWhenever the user corrects your generated output (with consent), log the\r\ncorrection to `feedback-log.md` in the project root (create if it doesn't\r\nexist). Each entry follows this format:"},{"kind":"example","language":"text","snippet":"File v2.2.5:references/figma-interpretation.md\n\n# Figma Node Interpretation Rules\r\n> Referenced by SKILL.md Step 1. Read this file when analyzing Figma fetch results.\r\n\r\n## Style References and Text Sizing\r\n\r\n- Note `styleRefs` on nodes — these reference Figma shared styles (design tokens). Nodes sharing the same style ID should use the same code-level token/resource\r\n- Note `textAutoResize` on TEXT nodes — `WIDTH_AND_HEIGHT` means auto-size (wrap_content), `HEIGHT` means fixed width + auto height, absent/NONE means fixed size\r\n\r\n## Figma Node Interpretation (apply before generating any platform code)\r\n\r\n- **Skip system chrome**: StatusBar, HomeIndicator, NavigationBar are iOS design placeholders — don't generate code for them. Also skip duplicate nodes at the same position (Figma artifacts)\r\n- **Skip invisible nodes**: VECTOR/RECTANGLE with empty fills and all strokes `visible: false`, or `absoluteRenderBounds: null` — these are leftover design artifacts that render nothing\r\n- **layoutAlign=STRETCH**: child fills the cross-axis of its auto-layout parent → `match_parent` on the cross-axis / `.frame(maxWidth: .infinity)`. Only present when it differs from INHERIT\r\n- **layoutPositioning=ABSOLUTE**: child is absolutely positioned within an auto-layout parent → use explicit x/y offset constraints instead of flow layout\r\n- **Container + icon = single view**: A FRAME (with background/cornerRadius) wrapping a small VECTOR/INSTANCE is one ImageView/Image, not nested layouts\r\n- **VECTOR/ELLIPSE compositions = single asset**: Multiple small VECTOR/ELLIPSE siblings inside a FRAME are pieces of one icon — output as a single image reference, not separate views\r\n- **RECTANGLE as background**: When a GROUP's first child is a RECTANGLE matching the GROUP's dimensions, it's a background shape, not a separate view\r\n- **GROUP vs FRAME**: FRAME with `layoutMode` maps to structured layouts (LinearLayout, HStack, etc.); GROUP without `layoutMode` uses absolute positioning — map to Constr"}]}}