How to create a frame in Figma on Mac: the Frame tool, presets and shortcuts

A frame is a container in Figma. Screens, cards, buttons and slides all sit inside frames. A top-level frame sits directly on the canvas. A nested frame sits inside another frame, such as a card inside a settings page. Frames are the base for exporting, prototyping and layout, so it pays to make them correctly from the start.

Check your Mac and Figma version first

The Figma desktop app for Mac needs macOS 12 Monterey, released in October 2021, or later. It runs on both Apple silicon and Intel Macs. Figma's help guide also says that each desktop app version stops being supported six months after release. If your copy is old, update it before you follow these steps, so your screen matches the instructions.

• Open the Apple menu and choose About this Mac to see your macOS version.
• That screen shows macOS, not the Figma version. The help guide gives no Figma menu path for the app version.
• The desktop app matches the browser version feature for feature, so frame tools work the same way.
• Desktop-only extras include pinned tabs, split tab view and multiple windows.

Click the canvas to make a default frame

A single click is the fastest way to make a frame, and it is the step that surprises most people. The first top-level frame in a session is 100 × 100. Figma then uses the size of your last top-level frame for the next click. So the size you get depends on what you made before, not on a fixed setting. Check the width and height before you add content, because resizing a frame with layers inside takes more effort.

Drag to set a custom size

Dragging gives you control from the first moment. Press and hold on the canvas, move diagonally to the size you want, then let go. If your drag is short, the frame ends up small. Zoom out first when the target size is larger than your screen. You can still change the size afterward, so you do not need an exact size on the first try.

Use a frame preset from the right sidebar

Presets save you from looking up device sizes. With the Frame tool active, the right sidebar shows presets under an expandable section. Figma sorts them into categories: Phone, Tablet, Desktop, Presentation, Watch, Paper, Social Media, Figma Community and Archive. Each preset adds a new frame to the canvas, and you can rename it right away.

• Phone for a mobile app screen or a mobile web layout.
• Tablet for a layout meant for a tablet screen.
• Desktop for a laptop or monitor layout.
• Presentation for slides.
• Social Media for posts that go into a feed.

Wrap existing layers in a new frame

Sometimes the frame comes after the drawing. Say you have a title, a photo and a button on the canvas. Select all three, then press ⌥⌘G. Figma wraps them in a new frame, and the three layers move together from then on. Windows uses Ctrl Alt G for the same action. The help article gives no Object or right-click menu path for it, so learn the shortcut.

Duplicate and quick-add frames in a flow

Press ⌘D to duplicate a selected frame when the new screen shares most of its design. With the Frame tool enabled, hover over a frame and click the + on either side to add a neighbor. Hold Option while you click + to add a blank frame of the same size. Quick-add is a fast way to lay out a row of screens without resizing each one.

Worked example: a three-screen sign-up flow

Say you are mapping a sign-up flow for a phone app with three screens: welcome, email and confirmation. Press F, expand the presets section in the right sidebar, and open the Phone category. Choose a preset, then press ⌘R and name the frame Welcome. Hover over it, click the + on the right, and name the next frame Email.

Repeat once more for Confirmation. If the Email screen needs the same header as Welcome, press ⌘D on Welcome, rename the copy and then edit it. Option-click + is for a blank screen that matches the size of the one next to it. Use each tool for the job it does best, and you will spend less time resizing.

Name frames so you can find them later

Frames get lost fast in a large file. Rename each frame as soon as you make it. Select it and press ⌘R, or double-click the name in the Layers panel. Use names that say what the screen is, such as Login, Login error or Settings Profile. Good names also make exports and handoffs easier to read.

Use zoom shortcuts to find a frame

After you create a frame, press ⇧1 to zoom to fit the whole page, or ⇧2 to zoom to the selection. Those two shortcuts help when a frame lands off screen. The zoom guide on this site covers the trackpad and mouse options if you prefer those.

Common mistakes that waste time

• Clicking inside a frame by accident, which makes a small nested frame instead of a new top-level one.
• Pressing F while a text box is active, so nothing happens.
• Waiting for a size dialog. Figma's help article describes no dialog for frame creation.
• Leaving frames unnamed, which makes later exports harder to sort.
• Running a desktop build older than six months after its release, which Figma no longer supports.

When a new frame does not show up on the canvas

Some people report a frame that appears in Preview but not on the canvas. In an October 2023 community thread, the suggested first step was to double-click the frame's # icon in the Layers panel. That zooms to the frame. Figma staff could not reproduce the problem. They suggested updating your browser, reinstalling the desktop app, and restarting. That thread has no Mac-specific steps and no recorded outcome, so treat it as a starting point, not a fix.

What the latest Figma releases change

I checked the April 29, 2026 and May 1, 2026 release notes. Neither changes how you create a frame. The April note adds an Add reference button to almost any canvas node, frames included, for AI image generation and editing. The May note adds tab search in the overflow menu and lets Mac users open Figma links directly in the desktop app.

Where to go next

Selecting layers for ⌥⌘G is faster from the keyboard, as the keyboard selection guide explains. Once you have a frame, the usual next step is layout. The guide on adding auto layout in Figma on Mac shows how a frame can arrange its children. When a screen is ready to share, export a frame as PNG in Figma on Mac covers the file output step.