Build a working app from a Figma design
In shortIn Figma, use File → Save local copy… to get a .fig. On Projects, click Figma and drop it in. MonstarX reads it in your browser and shows every screen; tick the ones to build (up to 30), describe what the design cannot show, and press Build this app — or Plan first to answer a few questions before the build.
If your app is already designed in Figma, MonstarX can build it from the design itself. You get a working app that looks like your screens — with their real pictures and icons, their colours and type, and the navigation of your prototype — plus the data, forms and sign-in the screens imply.
What do I need?
Section titled “What do I need?”A .fig file of your design. In Figma, open the design and use File → Save local copy… — that saves the file MonstarX reads. It must be a Figma Design file: FigJam boards and Figma Slides decks are not supported, and MonstarX tells you if you drop one.
How do I build from a Figma file?
Section titled “How do I build from a Figma file?”-
On Projects, click Figma beside Import (it is also in the Import menu). You can also drop or paste a
.figonto the prompt box. -
Drop your
.figin, or choose it. MonstarX reads it in your browser — Reading the file…, Opening every page…, Drawing the screens… — and nothing is uploaded yet. -
Tick the screens to build. Every page of the file is listed with its frames drawn small. Frames that look like screens start ticked; pages that look like housekeeping (a cover, the design system, an archive) start folded and unticked. Use Tick all or Untick all per page.
-
In What should it do? (optional), say what the design cannot show: who uses it, where the data comes from, what happens when someone signs up or pays.
-
Check the model in the bottom-left corner (it is the one from the prompt box; change it here if you like).
-
Press Build this app · 4 screens — or Plan first, to have MonstarX study the screens and ask about what the design cannot show before it builds.
The screens upload (Uploading the design…), the project is created and named after the file, and the first build begins.
What does MonstarX take from my design?
Section titled “What does MonstarX take from my design?”- Each screen as a picture — so the builder sees exactly what you drew, and compares its pages with it as it works.
- A precise description of each screen — layout, spacing, every text with its font and size, colours, borders, corners, shadows.
- Your pictures and icons — every image and icon in the design becomes a file in the app, so nothing is swapped for stock photos.
- Your design system — colour variables (light and dark), type, corner radii and shadows.
- Components — a button used on ten screens becomes one component in the app.
- Prototype links — where a tap goes becomes real navigation.
Screens that share a name (a flow of frames all called “Desktop”) are told apart by their first words, so you see which is which.
What does the chat show?
Section titled “What does the chat show?”Your first request reads, for example, Build this app from my Figma design “bloom.fig” (4 screens: Welcome, Home, Plant detail, Add plant). Make it look exactly like the design and work for real., with a strip of the screens under it. Click a screen to see it full size, with its size, page and file. As it builds, the chat shows steps such as Looking at the design of Home and Compared / with the design of Home.
Can I add more screens later?
Section titled “Can I add more screens later?”Yes. In a project’s chat, drop, paste or attach a .fig and Add screens from Figma opens. Tick the new screens, say what they should do, and press Build these screens. They join the project’s design and are built to match the rest of the app. A project keeps up to 60 design screens.
What are the limits?
Section titled “What are the limits?”| Limit | Value |
|---|---|
| Screens per build | up to 30 |
| Screens per project | up to 60 |
| Pictures and icons per design | up to 400 files and 150 MB (8 MB each) |
A .fig can be up to 250 MB, but a very large file (such as a whole design-system kit) can still be too much for a browser to open. Move your app’s screens to a file of their own, without the design-system pages, and save a local copy of that.
Frequently asked questions
Section titled “Frequently asked questions”Can I paste a Figma link instead of a file?
Not in this dialog — it reads the .fig file itself. Use File → Save local copy… in Figma. (Some design tools can also send their work through Your coding agent.)
Is my design uploaded when I drop it in?
No. The file is read in your browser; only the screens you tick are uploaded, when you press build.
Will the app look exactly like the design?
That is the aim: the builder matches each screen from its exact values and compares its pages with your screens as it builds. You can point out differences in the chat or fix them with Edit mode.
My design only shows phone screens. What happens on a computer?
Phone designs are built as a centred column on wide screens, so the app still works on a computer.
MonstarX says my file is not a Figma file. Why?
It may be a FigJam board, a Figma Slides deck, or another program's .fig file. Open the design in Figma and use File → Save local copy… to save a Figma Design file.