Auto-layout is Figma's system for building frames that arrange their children automatically along a horizontal or vertical axis. Instead of nudging rectangles and text into position by hand, you declare how a frame should behave: how much space sits between items, how much padding surrounds them, how children align, and whether the frame hugs its contents, fills available space, or stays a fixed size. The result is a button that grows when its label gets longer, a card that stretches to fit a longer description, and a list that reflows when you add or remove a row.
This matters in CEN3722 because your prototype should survive contact with real content. Interfaces that only look right with placeholder text tend to break when a user name, product title, or error message is longer than you planned. Auto-layout also pairs naturally with components: a well-built auto-layout component can be reused across screens, swapped, and resized without redrawing anything, which keeps your interface consistent and your file manageable.
As you watch, pay attention to four things: where auto-layout is applied (parent frame versus nested child frames), which sizing mode each element uses and why, how spacing and padding values are set, and how the presenter tests the layout by changing content or dragging the frame's edges. Try to rebuild each example yourself rather than only watching — auto-layout is much easier to understand through your own clicks than through description. Note also that Figma's auto-layout has gained features over time, so menu names and panel positions in older videos may differ slightly from the current interface.
A beginner-oriented walkthrough of what auto-layout is and how to start using it, from applying it to a frame through adjusting direction, spacing, and padding. Based on its framing as a getting-started tutorial, expect demonstrations of simple responsive elements such as buttons and stacked lists that resize as content changes. It is a good first stop if you have never used the feature before.
Jesse Showalter is a well-known design educator, and this video directly addresses the "What Is Auto-Layout?" and "Spacing, Padding, and Alignment" subtopics at an introductory pace suited to students new to Figma.
An official Figma tutorial covering auto-layout updates announced at Config 2022, which is when more advanced sizing and spacing controls were highlighted. Expect coverage of resizing behaviors such as hug and fill, absolute positioning of elements inside auto-layout frames, and spacing options like distributing items with space between. The focus is on what each control does and when you would reach for it.
It comes straight from Figma, so the terminology and interface match the tool you are using, and it is the most direct coverage of the "Sizing Modes: Hug, Fill, and Fixed" subtopic.
A project-based Figma tutorial that builds a card component using auto-layout from the ground up. It should show how nested auto-layout frames combine image, text, and action areas into a single dynamic card, and how that card is turned into a reusable component. Watch for how the card responds when text length or frame width changes.
This video ties together the "Building Reusable List and Card Patterns" and "Auto-Layout and Component Interaction" subtopics in one concrete example, produced by Figma itself so the workflow is authoritative.
Together these videos move from concept to control to finished pattern, which supports the module outcomes directly. The introductory and official tutorials give you the vocabulary and the sizing, spacing, and alignment controls you need to assemble interface elements in Figma (MO1), while the emphasis on consistent padding, aligned content, and predictable resizing reinforces visual hierarchy and consistency in your own screens (MO2). The card-building tutorial connects auto-layout to components and reuse, which is exactly the combination MO3 asks you to demonstrate when you build prototype screens that behave realistically as content and interaction states change.
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.