Every screen you design in Figma lives inside a frame. A frame is a container with its own boundaries, background, and layout rules, and it is what Figma treats as a "screen" when you move into prototyping. Learning to create, size, and nest frames well is the first practical step toward a prototype that behaves predictably rather than one that falls apart the moment you resize something.
On top of frames sit two tools that give your layouts structure: layout grids (columns, rows, and uniform grids that keep spacing and alignment consistent across screens) and constraints (rules that tell child objects how to anchor and stretch when their parent frame changes size). Device presets and safe areas connect these ideas to real hardware, so your mobile screen is actually the size of a phone and your important content is not hidden behind a notch or a home indicator. Finally, arranging frames on the canvas in a readable order turns a pile of screens into a flow that a reviewer or teammate can follow.
As you watch, pay attention to three things: where the presenter clicks to create or select a frame versus a group, how constraints are set in the right-hand panel and what changes when the frame is resized, and how grids are used to justify spacing decisions instead of eyeballing them. Try pausing and reproducing each step in your own file — these skills are muscle memory, and they are much faster to learn by doing than by watching.
A short official tutorial on resizing frames in Figma Design, focused on what happens to the contents of a frame when its dimensions change. It demonstrates how constraints control the anchoring and stretching of child elements, and how to temporarily ignore constraints when you want contents to stay put. Expect a quick, demonstration-driven walkthrough rather than a conceptual lecture.
It targets the Constraints and Responsive Anchoring subtopic directly and comes from Figma itself, so the interface steps and terminology match the tool you are using.
A longer, follow-along session from Figma's education channel covering frames as the basic building block of a design file. Over roughly thirteen minutes it is likely to walk through creating frames, using device presets, nesting frames inside one another, and organising them on the canvas, with a community template provided so you can work alongside the presenter.
Its pace and beginner orientation make it the best fit for the What Is a Frame?, device presets, and screen-organisation subtopics, and the accompanying template lets you practise rather than just watch.
A compact tutorial on building flexible "bento box" grid layouts — the modular, tiled arrangements common in modern dashboards and landing pages. It shows how to construct the grid and then apply constraints so the tiles respond sensibly when the containing frame is resized.
It connects grids and constraints in a single concrete example, showing why layout structure and responsive anchoring are two halves of the same skill rather than separate features.
These three videos build the structural foundation that the rest of the module depends on. Reliable frames, grids, and constraints are what make a Figma file resize cleanly and stay consistent as you add screens, supporting MO1's goal of a working low-to-high fidelity prototype. Grids and consistent spacing are the practical mechanism behind visual hierarchy and consistency in MO2, giving you a defensible reason for every alignment decision. And because frames are the units that prototyping links connect, organising them into a readable flow prepares you for the components, auto-layout, and interactive flows required in MO3.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.