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.
\nLook at the Today screen and sort its parts into two kinds.
\nThings 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).
\nThings 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).
\nThe structure that follows is simple and works for most app screens:
\nThe 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.
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.
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.
\nAt 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.
\nWrap (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.
\nBefore Sofia accepts a screen, she runs the same test, and you should too:
\nThen 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.
\n\nSection 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.
\n","toc":[{"id":"sec-1","text":"Two kinds of things on a screen","level":2},{"id":"sec-2","text":"Respect the system areas","level":2},{"id":"sec-3","text":"Two-dimensional content: grid flow","level":2},{"id":"sec-4","text":"The resize ritual","level":2}],"takeaways":["Use constraints for things pinned to the screen edges (tab bar, floating button) and auto layout for the content that flows.","Design at one mid-size width, then prove the screen at the smallest and largest widths you support.","Keep content clear of the status bar and home indicator areas, and use a platform UI kit for their exact sizes.","Grid auto layout handles two-dimensional content such as stat cards, and the column count can change between breakpoints.","Stress-test with long text, larger text sizes and empty states, because real content breaks layouts more often than screen widths do."],"further":[{"title":"Combine vertical, horizontal, and grid auto layout flows","url":"https://help.figma.com/hc/en-us/articles/31441443713047-Combine-vertical-horizontal-and-grid-auto-layout-flows"},{"title":"Use the grid auto layout flow","url":"https://help.figma.com/hc/en-us/articles/31289469907863-Use-the-grid-auto-layout-flow"},{"title":"Layout (Apple Human Interface Guidelines)","url":"https://developer.apple.com/design/human-interface-guidelines/layout"}],"quiz":[{"q":"Steady’s Today screen is one big vertical auto layout frame containing header, list and tab bar. On a tall phone the tab bar ends up halfway down the screen, right under the last habit. Why?
","options":[{"text":"Auto layout places the tab bar directly after its siblings, so it follows the content instead of the screen’s bottom edge.","why":"Correct. In a flow the tab bar’s position depends on what comes before it. Pinning to an edge is a constraint’s job."},{"text":"The tab bar needs the Scale constraint.","why":"Scale would resize the bar proportionally and still not anchor it to the bottom."},{"text":"Tall phones need a separate design file.","why":"One screen can serve many heights. Separate files multiply maintenance."},{"text":"The layout guide has too few rows.","why":"Layout guides never move layers. They are visual aids only."}],"answer":0},{"q":"What is the most efficient way to check that a screen works across phone sizes?
","options":[{"text":"Redraw the screen from scratch at each width.","why":"Redrawing tests nothing about whether your one design adapts, and it creates copies that drift apart."},{"text":"Zoom the canvas in and out.","why":"Zoom changes your view, not the frame’s size, so constraints and resizing never run."},{"text":"Ask developers to tell you if it breaks.","why":"Finding layout bugs after build costs far more than resizing a frame now."},{"text":"Duplicate the frame and resize the copies to your narrowest and widest supported widths.","why":"Correct. Resizing runs every constraint and auto layout rule, so bugs show up immediately."}],"answer":3},{"q":"On Habit detail, four stat cards sit in two columns on phones. On tablets you want four in one row. Which tool fits best?
","options":[{"text":"A horizontal auto layout with wrap and fixed-width cards.","why":"Wrap can work, but fixed-width cards leave ragged gaps at most widths. Grid keeps columns even."},{"text":"Grid auto layout, with 2 columns on the phone frame and 4 on the tablet frame.","why":"Correct. Grid places items in even rows and columns, and changing the column count rearranges the same cards."},{"text":"Four separate frames placed by hand with constraints.","why":"Manual placement must be redone for every size and every new card."},{"text":"A vertical auto layout with a negative gap.","why":"Negative gaps overlap items; they do not create columns."}],"answer":1}],"exercise":{"kind":"order","items":["design-mid","content-frame","fill-children","constraints","resize-copies","stress","fix-original"],"title":"Make the Today screen responsive","prompt":"You have a static Today screen with everything placed by hand. Put these steps in the order you would follow to make it adapt from a 360 px to a 440 px phone, the way Sofia does it.
\n","hints":["You cannot set Fill container until the children sit inside an auto layout frame.","Testing comes after the structure is in place, and fixes go into the original, not the test copies.","Design, wrap content, set fills, pin edges and check the rows stretch, then test widths, then stress content, then fix."],"explanation":"Start from one well-made mid-size design so you have something worth adapting. Wrap the flowing parts in a vertical auto layout content frame, because Fill container only exists for children of auto layout. Then set rows and text to Fill container width so they stretch. Next, add constraints in the screen frame for the content frame and the pinned elements; the quick drag check only shows rows stretching because their fills are already set. Only now do you resize copies to the narrowest and widest widths, then stress the content with long names, empty lists and larger text. Finally fix the original and delete the copies, so there is still one source of truth.
\n","checkLabels":{},"itemText":{"design-mid":"Design the screen at a mid-size width such as 393 px.","content-frame":"Wrap header, progress and habit list in a vertical auto layout Content frame.","fill-children":"Set the rows and text inside Content to Fill container width.","constraints":"Set constraints (Content: Left and right, Top and bottom; tab bar: Left and right, Bottom; add button: Right, Bottom), then drag the screen wider to check the rows stretch with it.","resize-copies":"Duplicate the screen and resize the copies to 360 and 440 px wide.","stress":"Stress-test the copies with a long habit name, an empty list and text about 30% larger.","fix-original":"Fix what broke in the original screen, then delete the test copies."}},"words":727,"readMinutes":3}