How to create your first frame on Figma

beginner 8 min read Updated 2026-03-18

Quick Answer

Creating your first frame in Figma is simple: select the Frame tool from the toolbar, choose a preset size or draw a custom frame on the canvas. Frames act as containers for your design elements and are essential for organizing your layouts.

Try Figma Full Figma Review

Prerequisites

A Figma account (free or paid)
Basic computer navigation skills
Web browser or Figma desktop app installed
Understanding of basic design concepts

Step-by-Step Instructions

Open Figma and create a new file

Navigate to figma.com and sign in to your account. Click the + New button or select Design file from the dashboard. This will open a new blank canvas where you can start creating your frame.

You can also use the keyboard shortcut Ctrl+N (Windows) or Cmd+N (Mac) to create a new file quickly.

Select the Frame tool

In the toolbar on the left side of the screen, click on the Frame tool (rectangle icon with a # symbol) or press F on your keyboard. The cursor will change to a crosshair, indicating the Frame tool is active.

The Frame tool is different from the Rectangle tool - frames are containers that can hold other objects and have special properties like clipping and auto-layout.

Choose a preset frame size or create custom dimensions

On the right panel, you'll see the Design tab with preset frame sizes like iPhone 14, Desktop, or iPad. Click any preset to instantly create that frame size, or proceed to draw a custom frame by clicking and dragging on the canvas.

Popular preset sizes include iPhone 14 (390×844), Desktop (1440×1024), and MacBook Pro 14" (1512×982).

Draw your frame on the canvas

Click and drag on the blank canvas to create your frame. Start from where you want the top-left corner, then drag to the bottom-right corner. Release the mouse button to complete the frame. You'll see a blue outline indicating your frame boundary.

Hold Shift while dragging to create a perfect square frame, or hold Alt/Option to draw from the center outward.

Customize frame properties

With your frame selected, use the Properties panel on the right to adjust settings. You can change the width and height in the size fields, add a background color by clicking the fill option, or adjust corner radius for rounded corners.

You can also rename your frame by double-clicking on "Frame 1" in the layers panel or properties panel.

Add content to your frame

Now you can add elements inside your frame. Select tools like Rectangle (R), Text (T), or Ellipse (O) from the toolbar and draw them inside your frame. Objects drawn inside will be automatically contained within the frame boundaries.

Enable "Clip content" in the frame properties if you want elements to be hidden when they extend beyond the frame edges.

Save and organize your work

Figma automatically saves your work to the cloud. Give your file a meaningful name by clicking Untitled at the top and typing a new name. Use the Layers panel on the left to organize and rename your frames and elements.

Create multiple frames on the same canvas to design different screens or variations of your design.

Common Issues & Troubleshooting

Frame tool is not working or cursor doesn't change

Make sure you've clicked directly on the Frame tool in the toolbar (not the Rectangle tool). Try pressing F on your keyboard or refresh the browser if the tool appears stuck.

Cannot see the preset frame sizes in the right panel

Ensure the Frame tool is selected and check that the Design tab is active in the right panel. If presets don't appear, try refreshing the page or switching to a different tool and back.

Frame appears too small or large on the canvas

Use the zoom controls at the bottom right or press Ctrl/Cmd + scroll wheel to adjust the canvas view. You can also press Shift + 1 to fit the frame in the viewport.

Elements are not staying inside the frame

Make sure you're drawing elements inside the frame boundaries. If elements appear outside, enable "Clip content" in the frame properties panel, or manually drag elements inside the frame.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Figma website before purchasing.

Visit Figma View Figma Pricing