Beginner
How to create your first frame on Figma
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.
Prerequisites
- A Figma account (free or paid)
- Basic computer navigation skills
- Web browser or Figma desktop app installed
- Understanding of basic design concepts
1
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.
Tip
You can also use the keyboard shortcut Ctrl+N (Windows) or Cmd+N (Mac) to create a new file quickly.
2
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.Tip
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.
3
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.
Tip
Popular preset sizes include iPhone 14 (390×844), Desktop (1440×1024), and MacBook Pro 14" (1512×982).
4
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.
Tip
Hold Shift while dragging to create a perfect square frame, or hold Alt/Option to draw from the center outward.
5
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.
Tip
You can also rename your frame by double-clicking on "Frame 1" in the layers panel or properties panel.
6
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.
Tip
Enable "Clip content" in the frame properties if you want elements to be hidden when they extend beyond the frame edges.
7
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.
Tip
Create multiple frames on the same canvas to design different screens or variations of your design.
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.
Ready to get started with Figma?
Put this tutorial into practice. Visit Figma and follow the steps above.
Visit Figma →