Frames, layers & auto-layout

Welcome to UI design in Figma — the industry-standard tool for designing interfaces. This first lesson covers the three foundations you'll use in every design: frames (the containers/screens), layers (the stack of elements), and auto-layout (Figma's superpower for building flexible, responsive UI). Master these and everything else builds on top. Let's get oriented and start building the right way.

Frames and layers — the structure

FRAMES — the containers of your design.
- A FRAME is a box that holds content — usually a SCREEN (a phone screen,
  a web page) but also a card, a button, any grouped container.
- Create with the Frame tool (F). Figma has presets for device sizes
  (iPhone, desktop, etc.) — pick the destination, like choosing a canvas.
- Frames can NEST — a button frame inside a card frame inside a screen
  frame. This nesting is the structure of real UI.
- (Frame vs Group: a GROUP just bundles items; a FRAME is a true container
  with its own size, constraints, auto-layout, and clipping. Prefer FRAMES.)

LAYERS — the stack of elements (like Photoshop).
- Every element is a layer; the Layers panel (left) shows the hierarchy +
  nesting. Higher = in front.
- NAME + organise layers — messy unnamed layers ("Frame 47") make a file
  unusable. Name as you go.

THE CANVAS is infinite — lay out many screens side by side and see the
whole product at once.

The key concept: frames are containers, and they nest — a screen contains cards, a card contains a button, a button contains an icon and text. This nesting is the structure of an interface. Prefer frames over groups (frames are true containers with size, constraints, and auto-layout), and name your layers as you go so the file stays navigable.

Auto-layout — Figma's superpower

AUTO-LAYOUT — frames that arrange their children automatically.
Instead of manually positioning + spacing elements, auto-layout makes a
frame lay out its contents with defined spacing + padding — and RESIZE
itself as content changes.

- Select a frame/elements -> Shift+A to add auto-layout.
- Set: DIRECTION (horizontal/vertical), SPACING between items, PADDING
  inside the frame, and ALIGNMENT.
- Now the frame behaves like a real UI container:
  - Add/remove an item -> siblings reflow automatically (no manual nudging).
  - A button's text gets longer -> the button GROWS to fit (with its
    padding intact).
  - A list gets a new row -> everything spaces itself.
- RESIZING options: HUG contents (frame shrinks to fit), FILL container
  (child stretches to fill), or FIXED. These control responsive behaviour.

WHY IT MATTERS: auto-layout makes designs FLEXIBLE + RESPONSIVE + fast to
change — and it mirrors how real CSS/UI actually works (padding, flexbox).
It's the difference between a rigid picture of a UI and a real, adaptable
component. USE IT for everything: buttons, cards, lists, whole screens.

Auto-layout is the single most important Figma skill. Instead of manually positioning pixels, you define spacing and padding, and the frame arranges and resizes itself as content changes — a button grows to fit longer text, a list reflows when you add an item. It makes designs flexible and responsive, mirrors how real CSS works, and is far faster to change. Use it for everything.

The mistake beginners make

The defining beginner mistake is positioning everything manually instead of using auto-layout — placing each element by hand with absolute coordinates, so every change means re-nudging dozens of items, and nothing adapts when content changes. Auto-layout does this automatically; learn it early and use it everywhere. The second mistake is using groups instead of frames — grouping elements (which just bundles them) rather than framing them (true containers with constraints, auto-layout, and clipping), losing all the powerful container behaviour. Prefer frames. The third mistake is messy, unnamed layers — a file full of "Frame 47" and "Rectangle 12" that's impossible to navigate or hand off; name and organise as you go. Frames not groups, auto-layout everywhere, named layers — the foundation of professional Figma work.

Your turn

---

Your turn

1. Create a screen: press F, pick a device preset (e.g. a phone), and start a frame. Notice the Layers panel showing your structure.
2. Build a button with auto-layout: make a frame with a text label and an icon, select it, press Shift+A to add auto-layout, then set the padding and spacing. Watch it become a real container.
3. Test auto-layout's magic: change the button's text to something much longer — watch the button GROW to fit while keeping its padding. Add a second item — watch spacing apply automatically.
4. Nest frames: put your button inside a card frame (also with auto-layout), inside the screen frame. Observe how the nesting mirrors real UI structure.
5. Set resizing: try HUG contents vs FILL container vs FIXED on a frame and see how each responds. Then name all your layers so the file stays navigable.

Key points

• Frames are Figma's containers (screens, cards, buttons) and they NEST — a screen contains cards contain buttons — which is the structure of real UI; prefer frames over groups (frames have size, constraints, auto-layout, clipping).
• Layers are the stack of elements (like Photoshop) — name and organise them as you go, or the file becomes unusable ('Frame 47' chaos).
• Auto-layout (Shift+A) is Figma's superpower: define direction, spacing, and padding, and the frame arranges its children and resizes itself automatically as content changes (a button grows to fit longer text, a list reflows).
• Auto-layout makes designs flexible, responsive, and fast to change, and mirrors real CSS/flexbox — use HUG (shrink to fit) / FILL (stretch) / FIXED resizing to control responsive behaviour; use it for everything.
• The mistakes: positioning everything manually instead of auto-layout, using groups instead of frames, and messy unnamed layers — frames not groups, auto-layout everywhere, named layers.