Build from a Figma design

Before you start

• Figma Desktop for Mac or Windows. The plugin does not run in Figma in the browser.
• The plugin, FluxNative — Design Sync. It is not on Figma Community: download it, extract the ZIP to a folder you keep, then in Figma Desktop choose Plugins › Development › Import plugin from manifest and pick its manifest.json.
• Edit access to the file. For a Community or view-only file, duplicate it to your Drafts first.

Steps

1. In Figma Desktop, open the file and run Plugins › Development › FluxNative — Design Sync.
2. The first time on a computer, choose Sign in to FluxNative and approve the code in your browser. The plugin stays signed in.
3. Choose the app to send to, or New app, then Choose screens.
4. Check the screens to send. The main ones come checked, and Start here sets the screen the app opens on. Choose Send and keep the plugin open until it finishes.
5. Choose Open in FluxNative. In an app, the design is attached above the message box: ask the assistant to build its screens. For a new app, the design is in the message box on the dashboard: add your brief if you like and press Build.

The assistant builds those screens from the frames, journey by journey in the design's order: their layout, copy, colours, type, icons and pictures, and the prototype links between them. It compares each built screen with its frame and says where the build differs.

Limits

• Free sends up to 12 screens per import and keeps one Figma file per app. Creator, Pro and Business send up to 60 screens per import, with no file limit.
• The import costs no credits. Building the screens does, as any build.
• Screens sent for a new app wait 24 hours. Closed the tab, or using the desktop app? Open Import from Figma from the dashboard's + menu: they are listed there.
• Only the screens you check leave Figma. FluxNative reads no Figma link or account, and does not follow a whole team or project.

Good to know

• A changed design: send the same file to the app again, and it replaces the earlier one. The design's chip above the message box opens Make primary, Apply with agent and Remove.
• To sign the plugin out, choose Sign out in the plugin, or in Import from Figma (every computer at once).
• The plugin shows its version under its name. When it says it is out of date, download the current package, extract it over the same folder and import its manifest again.
• Help with installing and signing in: Figma plugin support. What is sent and who can see it: Figma plugin privacy.

From images instead

A design from another tool, or no Figma Desktop at hand? Export each screen as an image and attach it.

1. In Figma, select each screen's frame and export it as PNG, or right-click it and copy it as PNG.
2. Attach the images to the brief in Idea, the dashboard's composer, or a chat message: up to 4 images per message, as PNG, JPEG, WebP or GIF.
3. Say which screen each image is and where its buttons lead.
4. More than four screens? Send the rest in the chat, four per message.

These are Home, Product and Cart. Tapping a product opens Product;
Add to cart opens Cart. Match the spacing, type and colours closely.

Image limits

• PNG, JPEG, WebP or GIF, up to 40 MB each and 4 per message. The agent gets a copy at most 1280 px across, and your original file too when it is 5 MB or less, so it can save the picture byte for byte.
• The assistant sees a copy at most 1280 px on its long side, so 1x or 2x exports are enough.
• A screenshot taller than 2.2 times its width is sent in phone-height parts so its text stays readable, and still counts as one of the 4. Its chip shows two numbers, such as 1–2. A warning sign means it is too long to read: send it alone or crop it.
• SVG, PDF and HEIC are not accepted: export frames as PNG (Figma: Export › PNG, 2x), PDF pages as images and iPhone photos as JPEG.
• The image button sends a reference. To put the file itself in the app (a logo, a photo), use Use in app on its chip or Attach files in a chat message; on the brief in Idea or the dashboard's composer, drop or paste the file (an SVG logo, a font, a PDF) and it goes with the first build.

What the first build does with your images

It makes the screens your images show, plus the app's foundation, and the confirm before it prices just that. Then it stops (a first build from a description or from the plugin goes on by itself): the card above the chat's message box shows about what the rest costs, and Build the rest builds them in this app's style. Or attach designs for them first. The design check compares the built screens with your images and lists what differs.

A screenshot of another company's app is used for its structure only: your app gets its own name, colours and words, because the App Store (guideline 4.1) and Google Play reject look-alike apps.

Tips for images

• One image per screen, at the size the phone shows it. A whole canvas in one image is hard to read.
• Name the fonts and brand colours when they matter, or set them yourself in Design.
• After the first build, attach a screenshot of the preview beside the design and say what differs.

Related

Start a project · Write better prompts · Credits and plans