Frames, Groups, Layers and Constraints

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.

Frames, groups and sections

Figma has three ways to bundle layers, and they are not interchangeable.

A 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.

Building the Today screen skeleton

Draw 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.

Shapes 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).

Layers: order and names

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.

Name 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.

Constraints: what happens when the frame changes size

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).

Horizontal 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:

• Header: 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.

Test 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.