About this skill

Problem

Figma-to-mobile UI code conversion often loses the structure needed for real apps: nested nodes become static views, repeated items become hard-coded layouts, and reusable components are not mapped to Compose, XML, SwiftUI, or UIKit primitives. figma-to-mobile treats a Figma link as the source of truth, fetches frame data with scripts, then clarifies ambiguities before generating UI code that can be iterated.

Workflow and Boundaries

Input: a single Figma frame link; page-level links are flagged and asked to be narrowed to a specific frame.
Targets: Android XML, Android Compose, iOS UIKit, and iOS SwiftUI.
Process: summarizes structure, confirms output format, dynamic lists, and custom components, then emits named code files.
Multi-frame handling: distinguishes page states, main page plus overlay/drawer, and independent pages, and explains how generated layouts relate.
Iteration: supports local changes to spacing, colors, components, and output format; disk-written files are usually patched instead of regenerated.
Constraints: requires a local FIGMA_TOKEN, never pasted into chat; complex gradients, deep component trees, and very large frames may need manual review or smaller selections.

Screenshots

Use Cases

Given a single Figma frame link, generate an Android XML layout and confirm whether cards are a RecyclerView list.
Given two homepage frames, distinguish banner-on and banner-off states and generate conditional visibility code.
Given an iOS design link, output a SwiftUI layout with nav bar, list, and bottom action structure.
Given a local CompactSwitch component, replace the default Switch when generating Android code.

Best For

Android XML maintainers who need Figma pages turned into editable layouts.
Jetpack Compose developers who need Figma structure mapped to Compose UI.
iOS SwiftUI developers who need designs mapped to nav bars, lists, and cards.
Mobile engineers enforcing UI component standards who want custom components inserted into generated code.