Chapter 6 › Lesson 32

32. Test Design on Different Frame Sizes

Skills: Duplicate screen and change frame preset; Check layout behaviour at different widths; Adjust constraints and auto layout for each size; Use layout grids for consistent column structure

Before handing off to developers, test your design at different screen sizes. Figma makes it easy to duplicate a frame and change its preset — instantly seeing how your layout adapts.

32. Test Design on Different Frame Sizes
Figure: The same design tested at three frame sizes: iPhone SE, iPhone Pro Max, and iPad — checking layout behavior at each breakpoint.

Step-by-step

  1. Design a screen at iPhone 15 Pro Max size (430 × 932) — your main design frame
  2. Select the frame and press Ctrl + D to duplicate it
  3. In the Design panel, click the frame size dropdown (it says "430 × 932") and select iPhone SE (375 × 667)
  4. Observe how your layout changes at the smaller size. Do text labels still fit? Do buttons stay wide enough?
  5. Duplicate again and try iPad Mini (744 × 1133) — your mobile layout might look stretched
  6. Look for issues: overlapping text, missing padding, buttons that are too small or too large
  7. Adjust your design: increase padding, switch to Fill for widths, add min/max constraints where needed
  8. Use layout grids to create consistent column structure across sizes
  9. Check all sizes: iPhone SE (smallest), iPhone Pro Max (medium), iPad (largest)
  10. Make adjustments in the main design, then verify it works at each size

Pro tip

Frame presets don't affect auto layout items automatically — but they reveal layout issues. If something breaks at a different size, that's a sign you need to adjust constraints, padding, or fill settings.