Sofia’s first review of every new designer’s file starts in the layers panel, not on the canvas. She expands the tree and reads the names. If she sees Group 7, Rectangle 12 and Frame 48, she knows the screen will fall apart the moment someone resizes it, prototypes it or hands it to a developer. The canvas can look perfect while the structure underneath is a pile.
This lesson is about that structure: the containers you put things in, the names you give them and the rules that keep them in place.
\nFigma has three ways to bundle layers, and they are not interchangeable.
\nA frame is a container with a life of its own. It has a width and height you set, its own fill, stroke and corner radius, and an option to Clip content so children cannot spill outside. Only frames can have auto layout, layout guides, and children with constraints, and prototypes move between frames. Press F (or A) and drag to draw one, choose a phone size from the presets in the right sidebar, or select existing layers and press Cmd+Option+G (Ctrl+Alt+G) to wrap them in a frame.
A group (Cmd+G / Ctrl+G) is only a bundle. It has no fill of its own, and its size is whatever its children add up to. Move a child and the group’s bounds change. That makes groups good for one thing: keeping a cluster of shapes together, such as the small trophy illustration on Steady’s streak screen.
A section is a canvas organiser. You use sections to collect related screens, for example “Check-in flow”, and later to mark a whole flow as ready for development (Lesson 4.3). Sections are not part of the UI itself.
\n\nDraw a 393 × 852 frame, a common size for current mid-size iPhones, and name it Today. Inside it, build three frames from top to bottom: Header, Habit list and Tab bar. Inside Header, add two text layers with the text tool (T): “Today” in the Large title style and the date in Subhead.
Text layers have a resizing mode that matters more than it looks. Auto width grows sideways as you type and suits short labels. Auto height keeps a fixed width and grows downward, which is right for anything that might wrap, such as habit names. Fixed size never changes and is how text gets cut off in other languages. Choose Auto height for habit names: “Meditate” fits on one line, but “Practise Spanish vocabulary for 15 minutes” does not.
\nShapes come next. A rectangle (R) with a 12 px corner radius becomes a row background; an ellipse (O) becomes the check circle. Give every one of them a name by double-clicking it in the layers panel (or Cmd+R / Ctrl+R with the layer selected).
The layers panel is a tree. Children are indented under their parent, and the order is the stacking order: whatever sits higher in the list is drawn on top. If the check circle disappears, it is usually below the row background in the list.
\nName layers by role, not appearance: Check button, not Teal circle; Streak, not Text 3. The reasons are practical. Developers read these names in Dev Mode. Smart animate pairs layers between screens by name (Lesson 4.1). Component properties and overrides are easier to manage when the layers they touch are named. And a teammate opening your file at 11 pm before a release can find things.
People use Steady on a 375-wide phone and on a 430-wide one. Constraints tell each child of a frame how to behave when that frame is resized. You set them in the Constraints controls of the right sidebar (in the Position section at the time of writing).
\nHorizontal options are Left, Right, Left and right, Center and Scale; vertical options mirror them with Top, Bottom, Top and bottom, Center and Scale. For Steady:
\nHeader: Left and right, Top. It stretches across and stays at the top.Habit list: Left and right, Top and bottom. It fills the space between header and tab bar.Tab bar: Left and right, Bottom. It always hugs the bottom edge.Add button: Right, Bottom. It keeps its 20 px offsets from that corner.Constraints apply to children of regular frames. Once a frame uses auto layout (next lesson), its children follow auto layout’s resizing rules instead, and the Constraints controls are replaced by those settings.
\nTest before you move on. Select Today and drag its edge to make it narrower and taller. If anything floats in the middle, overlaps or gets cut off, its constraints are wrong. Return the frame to 393 × 852 when you are happy.
Next you replace most of this manual positioning with auto layout, which handles spacing and stacking for you.
\n","toc":[{"id":"sec-1","text":"Frames, groups and sections","level":2},{"id":"sec-2","text":"Building the Today screen skeleton","level":2},{"id":"sec-3","text":"Layers: order and names","level":2},{"id":"sec-4","text":"Constraints: what happens when the frame changes size","level":2}],"takeaways":["A frame is a container with its own size, fill, clipping, layout and constraints; a group is only a bundle whose size follows its children.","Default to frames for anything that is part of the UI, and keep groups for loose visual clusters such as an illustration.","The layers panel order is stacking order, and layer names should describe roles, because handoff, prototyping and components all read them.","Constraints tell a child how to move or stretch when its parent frame resizes, such as a tab bar pinned left and right and to the bottom.","Test constraints by resizing the frame to a smaller and a larger phone before you call a screen done."],"further":[{"title":"Frames in Figma Design","url":"https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma-Design"},{"title":"Apply constraints to define how layers resize","url":"https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize"},{"title":"Explore the navigation bar and left sidebar","url":"https://help.figma.com/hc/en-us/articles/360039831974-View-layers-and-pages-in-the-left-sidebar"}],"quiz":[{"q":"You draw a 393 × 852 phone screen, put a tab bar at the bottom, and set the tab bar’s constraints to Left and right plus Top. What happens when you resize the screen to 430 × 932?
","options":[{"text":"The tab bar stays at its old distance from the top, so it floats above the new bottom edge.","why":"Correct. Top keeps the distance to the top edge fixed. A bottom bar needs the Bottom constraint."},{"text":"The tab bar moves to the new bottom edge because Figma detects bottom bars.","why":"Figma does not guess intent. It applies exactly the constraints you set."},{"text":"The tab bar scales up proportionally in height and width.","why":"That would be the Scale constraint. Left and right stretches the width only, and Top fixes vertical position."},{"text":"Nothing changes, because constraints only apply in prototypes.","why":"Constraints apply on the canvas whenever the parent frame is resized, not just in prototypes."}],"answer":0},{"q":"When is a group a better choice than a frame?
","options":[{"text":"For the habit row, so its background can stretch with the screen.","why":"Groups cannot hold their own fill or apply constraints to children like a frame does. A row needs a frame."},{"text":"For the whole screen, because groups export faster.","why":"Export speed is not the difference. Screens need frames for size, clipping, prototyping and layout."},{"text":"For a decorative illustration made of several shapes that should move together.","why":"Correct. A loose visual cluster with no layout behaviour of its own is what groups are for."},{"text":"Whenever you want to add auto layout later.","why":"Auto layout lives on frames. Adding it to a group’s contents wraps them in a new frame anyway."}],"answer":2},{"q":"Why does Sofia reject a file whose layers are named “Rectangle 12” and “Frame 48”?
","options":[{"text":"Figma slows down when layer names are not unique.","why":"Duplicate or default names do not affect performance. The cost is human and functional, not technical."},{"text":"Default names hide the role of each layer, and features like smart animate and Dev Mode rely on meaningful names.","why":"Correct. Smart animate matches layers by name, developers read names in Dev Mode, and teammates navigate by them."},{"text":"Developers cannot export layers that have default names.","why":"Export works regardless of the name. The problem is that nobody can tell what “Rectangle 12” is for."}],"answer":1},{"q":"The floating add-habit button should stay 20 px from the bottom-right corner on every phone size. Which constraints do you set?
","options":[{"text":"Left and Top.","why":"Those pin it to the top-left corner. On a larger screen it drifts away from the bottom-right."},{"text":"Scale and Scale.","why":"Scale keeps proportional position and size, so the button would grow and move on larger screens."},{"text":"Center and Center.","why":"Center keeps it a fixed offset from the middle, which is not the corner on a different screen size."},{"text":"Right and Bottom.","why":"Correct. Right and Bottom keep the 20 px offsets from those two edges fixed while the frame resizes."}],"answer":3}],"exercise":{"kind":"spot-bug","language":"text","code":"Today Frame 393×852\n Header Frame constraints: Left and right, Top\n Title \"Today\" Text resizing: Auto width\n Date Text resizing: Auto width\n Habit list Frame constraints: Left and right, Top and bottom\n Habit row Frame constraints: Left and right, Top\n Icon Frame constraints: Left, Center\n Habit name Text resizing: Fixed size\n Streak Text resizing: Auto width\n Check button Ellipse constraints: Right, Center\n Add button Frame constraints: Left, Top\n Tab bar Frame constraints: Left and right, Bottom","bugLines":[8,11],"title":"Find the layers that break on other phones","prompt":"This is the layer tree of Steady’s Today screen, written out as text with each layer’s type, constraints and text resizing. The screen looks right at 393 × 852, but it breaks on a 430 × 932 phone and with long habit names. Select the line or lines that cause those problems.
\n","hints":["Think about what changes on a bigger phone: the width, the height, or both. Which layers should follow the bottom or right edge?","Habit names vary in length. Which text resizing mode cuts off a long name instead of letting it wrap?","Two lines are wrong: one constraint and one text resizing mode."],"explanation":"Line 11: the floating Add button is pinned Left, Top, so on a larger phone it stays where it was instead of following the bottom-right corner. Set it to Right, Bottom. Line 8: Habit name uses Fixed size, so “Practise Spanish vocabulary for 15 minutes” is clipped or overflows. Use Auto height, which keeps the width and lets the name wrap. The other lines are fine: short labels such as the title and streak suit Auto width, the header, list and tab bar have the constraints from the lesson, and the row stretches with the list while its check button stays pinned to the right.