Figma for Beginners: Setting Up Files, Pages, and Frames for UX Screens

Tour of the Figma Workspace (Tool-Focused)

Before you create UX screens, you need to know where key controls live. In Figma, most of your time is spent switching between the canvas (where you design) and the panels (where you organize and edit).

Canvas

• What it is: The main working area where frames and objects live.
• What you do here: Pan around, zoom, select layers, and arrange screens.
• Useful habits: Keep related screens near each other and leave whitespace for notes or future variants.

Layers Panel (Left)

• What it is: A tree view of everything on the canvas: pages, frames, groups, components, text, shapes.
• Why it matters: UX files get complex quickly; the Layers panel is how you stay oriented.
• Common actions: Rename layers, reorder items (stacking), lock/hide items, and search for layers.

Assets Panel (Left, next to Layers)

• What it is: A library view for components and styles (local and from libraries).
• How you’ll use it later: Pull buttons, icons, and UI patterns into screens once you build or import a UI kit.

Properties Panel (Right)

• What it is: The inspector for the currently selected item.
• What you change here: Size, position, constraints, fills, strokes, text settings, effects, layout settings.
• Key idea: The right panel changes based on what you select (frame vs. text vs. shape).

File Browser

• What it is: The place where your files live (drafts, team projects, recent files).
• Why it matters: Good file organization starts here: consistent naming, clear project folders, and easy retrieval.

Create a New File and Set Up Pages

Pages are the top-level structure inside a Figma file. A good page system prevents “everything on one canvas” chaos and makes handoff and prototyping smoother.

Step-by-step: Create a new file

1. Open the File browser.
2. Create a New design file.
3. Rename the file immediately using a clear pattern (examples below).

Step-by-step: Add pages for structure

1. In the left panel, find the Pages area.
2. Click + to add pages.
3. Create these pages (in this order): Exploration, UI Kit, Screens, Prototype.

Naming Conventions That Keep UX Files Clean

Naming is not cosmetic; it’s how you navigate, search, and collaborate. Use a consistent pattern for pages, frames, and key layers so anyone can understand the file at a glance.

Recommended conventions

• Pages: Title Case and purpose-driven (e.g., Screens, UI Kit).
• Frames (screens): Prefix with a number for ordering, then screen name (e.g., 01 - Login).
• Variants/alternatives: Add a suffix (e.g., 01 - Login (Error), 02 - Home (Empty State)).
• Reusable groups: Use functional names (e.g., Header, Bottom Nav), not visual ones (e.g., avoid Blue Bar).

Example file name patterns

• AppName - UX Screens - v01
• ClientName - Mobile App - Design - 2026-01

Frames: The Foundation of UX Screens

In Figma, a frame is a container that defines a screen (or a region) with a specific size. Frames help you design for real device dimensions, keep elements contained, and prepare for prototyping.

Device presets: choosing a starting point

Presets let you create a frame that matches common device sizes.

Continue in our app.

• Listen to the audio with the screen off.
• Earn a certificate upon completion.
• Over 5000 courses for you to explore!

Or continue reading below...

Download the app

1. Select the Frame tool.
2. In the right panel, choose a preset under common device categories (for example, a popular mobile size).
3. Click on the canvas to place the frame.

Tip: Use one consistent preset for a project unless you intentionally support multiple breakpoints.

Custom frame sizes: when presets don’t fit

Sometimes you need a custom size (e.g., embedded webviews, kiosk screens, or a specific device spec).

1. Select the Frame tool and draw a frame on the canvas.
2. With the frame selected, set exact Width and Height in the right panel.
3. Rename the frame immediately.

Basic constraints: keeping elements anchored

Constraints control how a layer behaves when its parent frame changes size. Even if you’re not building responsive layouts yet, basic constraints prevent common alignment issues.

• Left/Right: Keeps an element pinned to the left or right edge.
• Top/Bottom: Keeps an element pinned to the top or bottom edge.
• Center: Keeps an element centered horizontally and/or vertically.
• Scale: Resizes the element proportionally with the frame (use carefully).

Practical example: If you place a “Log in” button near the bottom of a mobile screen, set its vertical constraint to Bottom so it stays near the bottom if the frame height changes.

Organizing Screens with Sections

Sections help you group related frames on the canvas without moving them into separate pages. Think of sections as labeled regions that keep flows readable.

When to use sections

• Group a user flow (e.g., onboarding, authentication, settings).
• Separate “ready for review” screens from “in progress.”
• Keep variations together (A/B options, empty/error states).

Step-by-step: Create a section for a flow

1. Select the frames you want to group.
2. Create a Section around them.
3. Name the section clearly (e.g., Auth Flow).

Tip: Use sections inside the Screens page to keep the canvas navigable as the number of screens grows.

Structured Exercise: Build a Starter Mobile Screen Set

This exercise sets up a clean file structure and three properly named frames, arranged in a logical layout so you can begin designing immediately.

Goal

• Create three mobile frames: Login, Home, Settings
• Name them consistently
• Organize them on the Screens page using a section

Step-by-step

1. Go to the Screens page: In the Pages list, click Screens.
2. Create the first frame (Login): Choose the Frame tool, select a mobile preset, click to place it on the canvas, then rename it to 01 - Login.
3. Create the second frame (Home): Duplicate the first frame (to keep identical sizing), move it to the right with consistent spacing, rename it to 02 - Home.
4. Create the third frame (Settings): Duplicate again, move it to the right, rename it to 03 - Settings.
5. Align and space: Select all three frames and apply consistent horizontal spacing so the layout reads left-to-right as a simple flow.
6. Create a section: Select the three frames and wrap them in a section named Core Screens (or Main App).
7. Quick constraint check (basic): Inside each frame, add a temporary rectangle near the bottom to represent a primary button and set its vertical constraint to Bottom. This is just to practice the concept; you can delete it later.

Expected result (what your canvas should look like)

• You are on the Screens page.
• Three same-sized mobile frames are arranged left-to-right: 01 - Login, 02 - Home, 03 - Settings.
• All three are grouped inside a clearly named section.
• The Layers panel shows clean, readable names that match what’s on the canvas.