1. Structure your frame into clear sections: Hero + below-the-fold
MidaGX splits your design into a Hero section (what's visible above the fold) and one or more below-the-fold (BTF) sections, and generates each independently before stitching them together.
Make your hero a distinct top-level frame or section — not merged into one giant continuous canvas with everything else.
Group the rest of the page into clear top-level sections (e.g., "Features," "Testimonials," "Pricing," "Footer") rather than one flat sprawl of ungrouped layers.
Clear boundaries here directly improve where MidaGX decides the hero ends and the next section begins.
2. Name your layers descriptively
MidaGX uses layer names — not just visual appearance — to decide how to treat certain elements. Generic Figma defaults like Frame 427320752 or Group 875044 give it nothing to work with.
Name your hero section "Hero".
Name logos, icons, and badges with recognizable words: logo, icon, badge, brand. This tells MidaGX to treat them as small vector icons rather than full photos.
Name photos and background images with words like photo, image, background, banner. This helps ensure they're rendered as real photos, not accidentally vectorized.
Avoid putting icon-ish words (like "icon" or "badge") in the name of something that's actually a full photograph — it can get misclassified.
3. Use real text layers, not flattened text or text-as-image
MidaGX copies text exactly from your Figma layers — capitalization, punctuation, accents, everything. Two implications:
Keep text as live, editable Figma text layers. If text is flattened into a shape, outlined, or baked into an image, MidaGX can't extract it.
Put your final, real copy in the design, not lorem ipsum or placeholder text — whatever's in the layer is what ships.
4. Use real image fills for photos
If a photo is nested many layers deep inside groups or vector shapes, MidaGX's image extraction can lose track of it or misjudge it as an icon. Keep photos as a direct image fill on a simple layer where possible, rather than buried in decorative vector wrappers.
5. Use Auto Layout instead of freeform positioning
MidaGX reads your layout as structural intent, not literal pixel coordinates — it rebuilds your design as a responsive flex/grid layout, not an absolutely-positioned canvas. Figma's Auto Layout (rows/columns with defined spacing and padding) maps directly and cleanly onto this. Freeform, manually-positioned, overlapping layers are harder to translate faithfully and are more likely to break on narrower screens.
Reserve absolute/manual positioning for genuine overlays — a badge pinned on a photo corner, a decorative shape — not for your main content layout.
6. Design carousels and sliders so they visibly overflow
If a section is meant to scroll horizontally (e.g., a "latest news" card row, logo strip, or testimonial carousel), design enough cards that they visibly extend past the section's width in the frame. MidaGX looks for this — several similar cards overflowing a section — as the signal to build a real, working scrollable/draggable component instead of a static row that just clips.
7. Keep component instances simple for content that needs to be extracted
Deeply nested component instances can cause MidaGX's image resolver to flatten an entire instance into one image, losing the ability to pull out individual text or images inside it. If a specific photo or headline inside a component truly needs to be edited by MidaGX, consider detaching that instance or keeping the nesting shallow.
8. Keep frames reasonably scoped
Very long, extremely complex single frames (dozens of sections, deeply nested groups) increase the chance of incomplete generation. If your page is unusually long, consider whether it needs to all be tested at once, or whether splitting into a couple of focused runs would give more reliable results.
9. Provide a mobile frame if mobile matters to you
If you have a dedicated mobile version of your design, include it. Without one, MidaGX derives a mobile layout automatically from your desktop frame's proportions — a real mobile frame will generally match your intended mobile design more precisely.