# Figma to React Native with AI: From Your Screens to a Real App FluxNative team · 2026-09-24 Turn a Figma design into a real Expo and React Native app. Send the screens with the FluxNative plugin, confirm them, then polish the result and add what Figma can't show. A Figma file shows how your app should look. But it isn't an app yet. It has no real data, no sign-in, and nothing you can install on a phone. FluxNative helps you close that gap. You send your Figma screens with the FluxNative plugin, confirm them, and the assistant writes a real Expo and React Native app from the frames. Here is how to get a good result. ## Key takeaways - Prepare one clear flow in Figma, starting from the screen the app opens on. - Send the screens with the FluxNative plugin in Figma Desktop: 12 per import on Free, 60 on paid plans. - Confirm the screens in FluxNative, and the assistant builds them, prototype links included. - No plugin at hand? Export the screens as images and attach them in chat, four per message. - Use the Design tab for app-wide style, and short prompts for behavior and data. ![Figma frames go in on the left, the assistant builds in the middle, and a real Expo and React Native app with its source code comes out on the right.](https://fluxnative.app/content/assets/3e2c3335-3486-4601-b2db-d980772c53fa/lg) ## 1. Prepare one clear flow The best input is a small flow that does one job. Pick the screen the app opens on, then the screens a user can actually reach from there. A few habits make the result much better: - **One start screen**, so the app knows where to begin. - **The screens for one main task**, not every idea in the file. - **Consistent components** for buttons, cards and list rows, so the assistant reuses one of each. - **Real states** where they matter: empty, loading and error. ![A Figma flow: a start frame leading to Home, Class detail and Booked frames. A frame off the path is left out.](https://fluxnative.app/content/assets/98beee2c-367c-47c6-96f5-883fd4048fd8/lg) ## 2. Send the screens with the plugin The FluxNative plugin, **FluxNative — Design Sync**, runs in Figma Desktop. It isn't on Figma Community yet: download it from [fluxnative.app/downloads/fluxnative-design-sync](https://fluxnative.app/downloads/fluxnative-design-sync), extract it to a folder you keep, and in Figma Desktop choose **Plugins → Development → Import plugin from manifest**. Then: 1. In FluxNative, click **Import from Figma**, the Figma button beside the message box on the dashboard or in an app's chat, and choose **Import screens with plugin**. You get an 8-character pairing code. 2. In Figma Desktop, open your file, run the plugin and enter the code. 3. Check the screens to send. The main ones come checked; **Start here** sets the screen the app opens on. Choose **Send**. 4. Back in FluxNative, confirm the screens that belong in the app, then send your brief. ![The Figma button beside the dashboard's message box opens Import from Figma; Import screens with plugin shows an 8-character pairing code to enter in the FluxNative — Design Sync plugin, and the window then says the plugin has paired and is scanning the file.](https://fluxnative.app/content/assets/da7dd64d-6b17-46da-973d-67b5b4daf881/lg) Only the screens you check leave Figma. The import itself costs no credits; building the screens does. Free sends up to 12 screens per import, paid plans up to 60. ![The screens the plugin sent from a Kestrel Studio file: Welcome marked Entry screen, Home, Class detail and Booked checked, Settings unchecked, and the Use selected flow button for 4 screens.](https://fluxnative.app/content/assets/377d9665-79c7-4686-9a86-6c655df18527/lg) ## 3. What the assistant takes from the frames The assistant builds from the frames themselves: their layout, copy, colours, type, icons and pictures, and the prototype links between them, journey by journey in the design's order. It compares each built screen with its frame and says where the build differs. Say in your brief what the frames can't, such as which fonts and colours matter most, or which screen is only an idea for later. ## Or attach the screens as images A design from another tool, or no Figma Desktop at hand? Export each screen as a PNG and attach the images where you write the brief: **Idea**, the dashboard's composer, or an app's chat. One message takes up to four images. Images carry no prototype links, so say how the screens connect: `These are Welcome, Home, Class detail and Booked. Welcome opens Home. Tapping a class opens Class detail; Book opens Booked. Match the spacing, type and colours closely.`![Three steps: export each Figma frame as a PNG, attach up to four images to one message, and say which screen each one is and where its buttons lead.](https://fluxnative.app/content/assets/4a8a7511-41d4-48b9-b9ce-0d767328249e/lg) ## 4. Polish with the Design tab and small prompts For changes that apply to the whole app, open the **Design** tab. It controls the brand color, corner radius, density, type size and typefaces, plus each light and dark color. Each change is saved to the project right away and doesn't spend a chat turn. For anything else, send one short, specific prompt. Name the screen, the problem, and what to keep. For example: "On the class detail screen, keep the colors and card layout. Move the Book button into a sticky bar at the bottom and show the spots left next to it." After the first build, a screenshot of the preview beside the Figma screen helps: attach both and say what differs. ![The Design tab: brand colour swatches, radius, density, type size and typefaces, next to a canvas that shows every screen of the app.](https://fluxnative.app/content/assets/66b8209c-b1c4-40d4-8804-ae81fc5e3988/lg) ## 5. Add what Figma can't show Figma shows screens and the paths between them. It doesn't say where the data lives, who can see it, or what happens when something fails. You add that part in chat: - What happens after each tap and each form? - Where does the data come from? - Who is allowed to see and change it? - What does the user see when there is an error? Connect a backend in **Server**, on the **Backend** tab, describe the behavior, and then test a real build on a phone. ![Figma gives you screens, layout, colors and the paths between screens. You add the data, who can see it, what happens on errors, and sign-in in chat. Together they make a real app.](https://fluxnative.app/content/assets/b2f8949a-baa5-45bb-8f23-631ae5708a82/lg) ## Frequently asked questions ### Does the design make static screens or a real app? A real app. The assistant writes an Expo and React Native project in TypeScript. You can preview it, edit the code, build it for the stores and export it. ### Can I import my Figma file directly? Yes, with the FluxNative plugin in Figma Desktop: you pick the screens and it sends them, with their prototype links. There is no import from a Figma link, and nothing syncs by itself: a changed design comes in as a new import. Exported images work too. ### Will the assistant set up my database and sign-in? Not from the design alone: it only describes the screens. Connect a backend in **Server** and describe the behavior in chat. With Supabase or Firebase, the assistant does most of the setup for you. ## Keep exploring - **[Build from a Figma design](https://fluxnative.app/docs/figma)** — Installing the plugin, sending screens, and building from images. - **[Design tokens](https://fluxnative.app/docs/design-tokens)** — What each control in the Design tab changes. - **[Write better prompts](https://fluxnative.app/docs/writing-prompts)** — Short patterns for clear follow-up requests. --- Turn Figma screens into a real Expo and React Native app with AI. Send them with the FluxNative plugin, confirm them, then polish and build. Page: https://fluxnative.app/blog/figma-to-react-native-with-ai