Guide · design to native · for designers and product people
Figma to SwiftUI and Jetpack Compose: how a design becomes a native app
A Figma file is not converted into a native app; it is read by an agent that rebuilds each screen from the platform’s own parts. What the agent gets from the file, what it has to decide on its own, and the six steps from the first frame to the app on your phone, on iPhone and Android.
Verified
Search “Figma to SwiftUI” and most results are plugins that export a frame as a view with every element at an absolute position. The export opens in Xcode and looks like the frame, on one screen size, until the first real list arrives or the phone rotates. A native screen is not a picture of a layout; it is built from lists, navigation containers, stacks and text styles that adapt on their own, and no exporter knows which of those your frame was meant to be.
The route that works is different in kind: an agent reads the design, understands which frame is a list, which is a form and which is a settings page, and builds each one from the native parts, using the file for the values that carry over. This page is how that route works and what it needs from you; design-to-code tools compared is the list of tools by output if you have not chosen one, and Modaal for designers is the product page.
What the Figma MCP server gives an agent
Figma’s own description: “The Figma MCP server helps developers explore and implement designs quickly and accurately.” Through it an agent gets the design context of a selected frame (the structure, the components used, the text, the colours and type styles, spacing) and a screenshot of it. Figma lists the clients that connect to it, among them Claude Code, Cursor, VS Code, Codex, Gemini CLI, Android Studio, Xcode (beta), Replit and Warp. “The remote server is available on all seats and plans”; “the desktop server is available on a Dev or Full seat for all paid plans.”
What the server does not do is decide what the frame is. A frame with twelve identical rows is a list to a human; to the server it is twelve groups. The agent makes that call, and it makes it better when the file is prepared for it (step 1) and when the plan it builds from says so (step 3).
What carries over from the file, and what is rebuilt
Carries over as values: colours and the type scale (as the app’s theme), spacing and corner radii, icon and image assets, the copy on every screen, component names (a “PrimaryButton” in Figma becomes the same name in code), the screen inventory, and the flows drawn between frames.
Rebuilt from native parts: every layout, because a native screen is a list, a form, a grid or a stack that resizes, not a canvas; navigation, which on iPhone is a navigation stack and tab bar with Apple’s rules and on Android is Material’s with the system back gesture; the states the design usually does not draw: loading, empty, error, offline, and the keyboard pushing a form up; accessibility, Dynamic Type and dark mode, which the platform provides when the screen is built from its parts and not when it is drawn; and the screen sizes the file does not include, from the smallest iPhone to the iPad layout and the iPhone Duo’s inner display.
A useful test of any tool: ask what happens to a frame when the user’s text size is set to the largest accessibility setting. A drawn export clips. A native screen reflows.
Step 1. Prepare the file so an agent can read it
Name every frame as the screen it is (“Inbox”, “Inbox — empty”, “Settings”), one frame per screen state you care about. Use components for anything that repeats and name them as what they are, not what they look like. Put colours and type in styles or variables, not on individual layers. Draw the flows: an arrow from the button to the screen it opens is a sentence the agent would otherwise have to guess.
Produces: a file where the screen list can be read off the page names.
Step 2. Connect the design to the agent
Two routes. With a general agent such as Claude Code or Cursor, enable the Figma MCP server in the agent (Figma’s guide covers each client) and give the agent the link to a frame or page. With Modaal, the first prompt “takes text, images, Figma links — whatever you provide”, and the docs describe what happens: “Point the agent at a Figma design — it pulls the design context and screenshots through the Figma integration and builds the screens to match.”
Produces: the agent can see the frame and its structure, not only a picture of it.
Step 3. Turn the screen inventory into a plan before any code
This is the step that separates a working app from a folder of views. Before building, the agent should produce a plan: the screen list from the file, what each screen is (list, form, detail, settings), the navigation between them, the data each screen shows and where it comes from, and the states the design did not draw. In Modaal this is Plan mode: the agent writes “a structured implementation plan (a feature spec) without writing code”, and you approve or edit it. With a general agent, ask for the same document explicitly and do not let it start on the screens until you have read it. The PRD prompt is the shape of that document.
Produces: the plan, with every screen named and typed, which is also the handover document if an engineer joins later.
Step 4. Build screen by screen, compared against the frame
One screen per prompt, from the plan. For each, the agent builds the native screen, runs it in the simulator and compares it to the Figma screenshot; you look at both and say what is off. Expect the first comparison to be close on colour, type and spacing (those were values) and off on the things the file did not say: list behaviour, what the back button does, what the empty state shows. Prompting agents for native mobile UI has the sentences that fix the common misses.
Produces: a screen that matches the frame where the frame was specific and follows the platform where it was not.
Step 5. The same screens on Android
The design file is one file; the two platforms are not one platform. A tab bar sits at the bottom on iPhone and may become a navigation bar or rail on Android; Android has a system back gesture that iOS does not; Material and Apple’s Human Interface Guidelines disagree on where a primary action goes. The right result is the same screen built from each platform’s parts, not the iPhone frame drawn on Android. In Modaal, each feature’s logic is written once and rendered in SwiftUI on iPhone and Jetpack Compose on Android from one project, so the plan from step 3 produces both; with a general agent you run step 4 twice. The Free plan builds one project with unlimited prompts on one platform; Pro is €9 per user per month billed annually (€15 monthly) and adds both platforms, TestFlight distribution and Git collaboration (/pricing).
Produces: the Android screens from the same plan, in Android Studio, on your disk.
Step 6. Keep the file and the app in step
After launch the design changes. The light way to keep them aligned is the plan: change the frame, change the plan line, send the screen’s prompt again. The heavy way is to re-export everything. Keep the design tokens as the single source of colour and type, and a theme change is one prompt, not forty.
Produces: a design file and an app that change together, with the plan as the record of what was decided.
Three ways from Figma to a phone, by what the output is
| Route | What it reads | What it produces | Who decides the layout |
|---|---|---|---|
| Export plugin | One frame | A view with absolute positions, one screen size | Nobody; it copies |
| General agent + Figma MCP | Frame structure and screenshot | Whatever you ask for, in a project you set up | The agent, with your prompts |
| Modaal | Figma links in the first prompt | SwiftUI and Jetpack Compose from one project, plan first | The plan you approve |
The first route produces pictures; the other two produce native screens. The difference between the last two is the structure around the agent.
Frequently asked questions
Plugins can export a frame as a SwiftUI view with every element at an absolute position. That is a picture of the layout for one screen size, not a native screen: it does not reflow for text size, rotation, the iPad layout or a longer list. Native screens are built from lists, stacks and navigation containers that adapt, which an exporter cannot infer from a frame.
In Figma’s words, it “helps developers explore and implement designs quickly and accurately”: the agent gets the design context of a frame (structure, components, text, colours, type styles, spacing) and a screenshot. The remote server is available on all seats and plans; the desktop server needs a Dev or Full seat on a paid plan.
Colours and the type scale as the theme, spacing and radii, assets, the copy, component names, the screen inventory and the flows. Layouts, navigation, the undrawn states (loading, empty, error), accessibility and dark mode behaviour, and the screen sizes the file does not contain are rebuilt from the platform’s parts.
As an input, yes; as a layout, no. A tab bar, the back gesture and the position of a primary action differ between Apple’s guidelines and Material. The right result is the same screens built from each platform’s parts. In Modaal the plan produces both from one project; with a general agent you build the Android screens as a second pass.
Name frames as screens and states, use named components for anything that repeats, keep colours and type in styles or variables rather than on layers, and draw the flows between frames. The screen list should be readable from the page names alone.
The first prompt takes “text, images, Figma links — whatever you provide”; the docs describe the route as: “Point the agent at a Figma design — it pulls the design context and screenshots through the Figma integration and builds the screens to match.” Plan mode first writes a feature spec you approve, then the screens are built in SwiftUI and Jetpack Compose from one project.
Paste the Figma link. Approve the plan. Get native screens on both phones.
Modaal reads your design, writes the screen plan you approve, and builds SwiftUI and Jetpack Compose from one project. Free for one project.
Keep reading
- Design-to-code tools compared
Nine tools by what they output, vendor docs quoted.
- Modaal for designers
The product page for the Figma route.
- Prompting agents for native mobile UI
The sentences that fix the common misses.
- Mobile app design reference tools
Mobbin and the libraries to reference before you draw.