Responsive Resizing Across Screen Sizes

Steady will run on phones from roughly 360 to 440 points wide, and heights vary even more. Designing a separate screen for each size is a maintenance trap: change the habit row on one and you must remember to change it on four others. The goal is one screen that adapts, built from the pieces you already have.

Two kinds of things on a screen

Look at the Today screen and sort its parts into two kinds.

Things pinned to the screen: the tab bar at the bottom, the floating add button in the corner. They should stay attached to an edge no matter what the content does. That is the job of constraints (Lesson 1.4).

Things that flow: the header, the progress block and the habit list. They stack one after another, and the list grows with every habit. That is the job of auto layout (Lessons 2.1 and 2.2).

The structure that follows is simple and works for most app screens:

The screen frame itself has no auto layout. Inside it, the Content frame uses vertical auto layout and has constraints Left and right, Top and bottom, so it always fills the space between status bar and tab bar. The tab bar and add button are siblings of Content with edge constraints. Inside Content, everything uses Fill container width, so rows stretch with the screen.

Respect the system areas

Modern phones reserve space at the top for the status bar and camera cutout, and at the bottom for the home indicator. Content under them is hard to read or impossible to tap. Pad your Content frame’s top and the tab bar’s bottom so nothing important sits there. The exact sizes differ between devices, so take them from the official Apple or Google UI kits in the Figma Community rather than guessing.

Two-dimensional content: grid flow

The Habit detail screen shows four stat cards: current streak, best streak, completion rate and total check-ins. On a phone they sit in two columns; on a tablet, four across.

At the time of writing, auto layout has a Grid flow for exactly this. A grid auto layout frame has a number of columns and rows, gaps between them, and children that can span more than one cell. Set the stats frame to 2 columns with 16 px gaps (matching the layout guide’s gutter) on the phone; on the tablet copy, change it to 4 columns. The same four cards rearrange without being redrawn.

Wrap (Lesson 2.2) would also put cards on new lines, but with wrap each card keeps its own width, so you get ragged leftovers. Grid keeps columns equal, which is what a dashboard of stats needs.

The resize ritual

Before Sofia accepts a screen, she runs the same test, and you should too:

1. Duplicate the screen frame twice.
2. Resize one copy to 360 wide and the other to 440 wide, and adjust heights to a short and a tall phone.
3. Read every copy top to bottom. Look for overlaps, truncation you did not intend, things floating mid-screen and gaps that grew strangely.
4. Fix the original, not the copies. Delete the copies when the original passes.

Then stress the content, because content breaks more layouts than widths do. Use a 40-character habit name, a four-digit streak and an empty list (“No habits yet”). Finally, increase every text style by about 30% on a copy. Many people set larger text in their phone’s settings, and a row that only works at 17 px will break for them first.

Section 2 is done: your screens stack, stretch, wrap and pin correctly. In Section 3 you stop rebuilding the habit row on every screen and turn it into a component.