Figma Frames and Pages
Frames and pages are how Figma organizes your designs. A page holds many frames. A frame holds the actual design content — buttons, images, text, and shapes.
What Is a Frame?
A frame works like a screen or artboard. Think of it as a phone screen, a browser window, or a printed card. Everything you design goes inside a frame. Frames can be any size, and you can have as many as you need on one canvas.
Canvas +-------------------------------------------+ | [Frame: iPhone 14] [Frame: iPad] | | +------------+ +-----------+ | | | Home Screen| | Home Tab | | | | | | | | | +------------+ +-----------+ | | | | [Frame: Desktop 1440px] | | +-------------------------------------+ | | | Full website header design | | | +-------------------------------------+ | +-------------------------------------------+
Creating a Frame
Press F on your keyboard to activate the Frame tool. Then click and drag on the canvas to draw any frame size you want. Alternatively, click somewhere on the canvas without dragging — Figma opens a preset list in the right panel. Pick from common device sizes like iPhone 14, Android Large, or Desktop 1440.
Common Frame Presets
- iPhone 14 – 390 × 844 pixels
- Android Large – 360 × 800 pixels
- Desktop – 1440 × 1024 pixels
- Tablet – 768 × 1024 pixels
- Presentation – 1920 × 1080 pixels
- Business Card – 3.5 × 2 inches
Frames Inside Frames
Figma allows frames nested inside other frames. This is a powerful feature. The outer frame represents the full screen. Inner frames represent sections like a navigation bar, a content card, or a footer.
Frame: iPhone Screen (390 × 844) ├── Frame: Top Navigation Bar (390 × 56) ├── Frame: Hero Banner (390 × 200) ├── Frame: Product Card (160 × 220) └── Frame: Bottom Tab Bar (390 × 80)
Each nested frame becomes its own layer with its own properties. This structure keeps complex designs organized.
Clip Content
By default, Figma clips content inside a frame — meaning anything that extends beyond the frame edge becomes invisible. You can turn this off by unchecking Clip content in the right panel. Designers sometimes turn clipping off when building scrollable content that extends below the visible screen area.
Frame Background Color
Each frame has its own background fill. Click the frame (not an object inside it) and set the fill color in the right panel. Setting the frame background saves you from adding a separate background rectangle on every screen.
What Are Pages?
Pages are like tabs inside a Figma file. One file holds multiple pages. Each page has its own canvas with its own frames.
Figma File: "ShopEasy App Design" ├── Page 1: Mobile Screens ├── Page 2: Desktop Screens ├── Page 3: Component Library └── Page 4: User Flow Diagrams
Pages let you separate different parts of the same project without creating separate files. Switching pages does not affect the layers or designs on other pages.
Adding and Managing Pages
The page list sits above the left panel. Click the + icon to add a new page. Double-click a page name to rename it. Right-click a page to duplicate or delete it. Drag pages to reorder them.
Renaming and Organizing Frames
Rename any frame by double-clicking its label above it on the canvas, or by double-clicking its name in the layers panel. Good naming habits save you time when your file grows to dozens of screens.
Recommended Naming Pattern
- Home / Default
- Home / Logged In
- Product / List View
- Product / Detail View
- Checkout / Step 1 – Cart
- Checkout / Step 2 – Payment
Using a forward slash in frame names creates folders in the prototype flow panel, which keeps large projects navigable.
Selecting a Frame vs Selecting Objects Inside It
Click once on any object inside a frame to select that object. Click the frame label (the name above the frame) to select the entire frame. Press Esc to deselect and move up one level in the hierarchy. Press Enter to select the first child inside a selected frame.