Lesson 2: Frames, Device Presets and Layout Grids

Why Frames Come First

In Figma, a frame is a container with its own fixed size. You will use frames in two ways:

• As screens. A top-level frame stands for one device screen, such as a phone screen or a desktop browser window.
• As containers inside screens. Smaller frames hold related parts of a screen, such as a header bar or a card.

Think of a top-level frame as a sheet of paper cut to the size of a phone. Everything you design for that screen goes on that sheet. In this level you will set up the first mobile screen of your course project and add guides that give it structure.

Before you start: open the project file you created in Level 1 and go to the page where you will design your screens.

Task 1: Create a Mobile Frame from a Device Preset

A preset is a ready-made frame size that matches a real device, so you don't need to look up screen dimensions.

1. Press F (or A) to turn on the Frame tool. You can also pick it from the toolbar.
2. Look at the right sidebar. A list of frame presets appears, grouped into categories such as Phone, Tablet, Desktop, Presentation, Watch, Paper and Social Media.
3. Open the Phone category and click a current phone model. Figma places a frame of that size on the canvas.
4. Check the W (width) and H (height) fields in the right sidebar. Write down the width, because later screens should use the same one.

Other ways to create a frame:

• Click once on the canvas with the Frame tool to get a 100 × 100 frame.
• Click and drag to draw a frame at any size.
• Select an existing frame and press Ctrl+D (Windows) or Cmd+D (Mac) to duplicate it.

To switch a frame to a different preset: select the frame and choose another preset from the Frame dropdown in the right sidebar.

Task 2: Resize, Rename and Nest Frames

Resize a frame in any of these ways:

• Drag its edges or corner handles.
• Type exact values into the W and H fields. These fields accept simple maths, so 390*2 works.
• Use Resize to fit to shrink or grow the frame around its contents: Ctrl+Alt+Shift+R (Windows) or Cmd+Option+Shift+R (Mac).

Rename your screen so the file stays readable:

1. Double-click the frame's name in the Layers panel, or double-click the name label shown above the frame on the canvas.
2. Type a clear name, such as Mobile / Home, and press Enter.

Nest a frame, which means placing one frame inside another:

1. With the Frame tool on, drag a small frame across the top of your mobile screen.
2. Rename it Header.
3. In the Layers panel, check that Header is indented under Mobile / Home. That indent shows a parent–child relationship: the screen is the parent and the header is the child.

A nested frame is a parent and a child at the same time. It sits inside the screen and can hold its own contents.

Clip content: this frame setting hides anything that extends past the frame's edges. Leave it on for screens, so your design looks the way it will on a real device.

Task 3: Add a Layout Guide (Columns or Rows)

Figma now calls layout grids layout guides. They are see-through columns, rows or squares laid over a frame to help you line things up. They show in the editor and are not part of the final design.

1. Select your Mobile / Home frame.
2. In the right sidebar, find the Layout guide section and click Add layout guide (+).
3. Figma adds a uniform grid by default: 10 × 10 px squares in red at 10% opacity.
4. Open the guide's settings and change its type to Columns.
5. Set the properties:
   • Count: how many columns (or rows) there are.
   • Gutter: the space between columns, in px.
   • Margin: the space between the outer columns and the frame's edges, in px. This setting is only available with the Stretch type.
   • Type: Left, Center, Right or Stretch for columns (Top, Center, Bottom or Stretch for rows). Stretch columns resize when the frame is resized.
6. A common starting point for phones is 4 columns, Stretch, 16 px margin and 16 px gutter. Desktop layouts often use 12 columns.

Useful extras:

• You can add more than one guide, such as columns and rows together, to align things both vertically and horizontally.
• Press Shift+G to show or hide all layout guides.
• Layout guides work only on frames. Components are also frames, so they can have guides too.

Task 4: Tell a Frame from a Group

A group also holds layers together, but it behaves differently. Press Ctrl+G (Windows) or Cmd+G (Mac) to group the layers you have selected.

Use a frame when: you need a fixed size (a screen), layout guides, clipping, or control over how child layers resize.

Use a group when: you only want to move or scale a few objects as a single layer, and you want its edges to follow its contents.

To wrap layers you already have in a frame instead of a group, right-click and choose Frame selection, or press Ctrl+Alt+G (Windows) or Cmd+Option+G (Mac).

Check Your Work

• A phone-preset frame named Mobile / Home is on your page.
• A Header frame is nested inside it.
• A Stretch column guide with your chosen count, gutter and margin is applied.
• You can say one thing a frame can do that a group cannot.

Key Takeaways

• Frames are fixed-size containers. Top-level frames act as screens, and nested frames act as sections inside them.
• Press F or A, then pick a preset from the right sidebar to get exact device sizes.
• Layout guides (formerly layout grids) add columns, rows or a square grid. Adjust them with Count, Gutter, Margin and Type.
• Groups fit tightly around their contents and have no guides or clipping. Use frames for structure and groups for simple bundles.