Three ways to import
| Mode | When to choose it | What to review |
|---|---|---|
| Smart responsive · one design | You have one screen export and want the converter to infer flexible layout behavior. | Wrapping, stacking, minimum widths, and spacing on narrow screens. |
| Figma viewport variants | You have matching desktop and tablet and/or mobile versions of the same screen. | Layer correspondence and layout changes between widths. |
| Original viewport | You want to start from the source screen’s viewport layout. | Overflow and scaling at other widths. Existing Auto Layout can optionally use fluid width. |
Prepare matching variants
- 1
Keep the same screen
Use the same content and corresponding elements across desktop, tablet, and mobile. Keep layer names unique and the hierarchy consistent.
- 2
Export each viewport
Run Unbondr Exporter separately on each screen frame. Use the desktop screen as your main file, then add tablet and/or mobile exports in the variants mode.
- 3
Resolve mismatches
If the importer identifies an incompatible layer or structure, correct the corresponding Figma layers and export again. Do not pair unrelated screens as variants.
Review between the presets
Check the desktop, tablet, and mobile previews, then inspect widths between them. Text wrapping and content length can expose problems that a single preset will miss.
Pay particular attention to navigation, cards, multi-column sections, oversized headings, and forms. Responsive conversion is a starting point; refine the result in the editor for your content.