How to Make a Frame in Figma: Design Fundamentals

html

Frames are the closest thing Figma has to a foundation. Almost everything you build ends up inside one, and the frames nobody notices are usually the ones causing trouble three weeks later.

The object itself is a container. It draws a boundary around whatever sits inside it, and that boundary decides how the content clips, exports, and resizes, separately from the rest of the page. Sketch calls its version an artboard. Adobe XD did too.

There’s no cap on how many you can stack into one file. Figma’s community forum confirmed that, which is a little strange given the number never shows up in the official documentation (Figma Community, 2022).

What Is a Frame in Figma?

The gap between a frame and a plain rectangle is behavioral, not visual. Both can look identical on canvas. Only one of them clips its children, holds a background fill, and exports as a standalone file.

Figma’s S-1 filing counts more than 13 million monthly active users, and two-thirds of them aren’t professional designers (Figma, 2025). Those people still work with frames constantly, whether they know the terminology or not, because nearly every screen, card, and section starts as one.

Most of what lands inside a frame is a screen from an interface design rather than a loose shape drifting around the page.

• It has its own width, height, and position on the canvas
• Overflow either gets clipped or spills over, depending on one toggle
• It carries a distinct icon in the layers panel, which sounds trivial until you’re scanning a file with two hundred layers in it
• It can be exported by itself, at whatever scale you want

None of that applies to a shape or a group.

Frame vs Group in Figma

Size is where the two split. A frame holds its own width, height, and position. A group has no dimensions of its own, it just wraps whatever’s inside and shrinks or grows accordingly.

That one difference spreads into nearly everything else. And it matters more the bigger the file gets, which is most files now: 95% of Fortune 500 companies were using the platform as of March 2025 (Figma, 2025).

Groups are still fine for what they’re good at. Bundle four layers, move them together, move on.

Break that bundle later and everything scatters back onto the canvas or into the parent frame, which is exactly the behavior you get when you ungroup elements in Figma.

Figma Frame vs Artboard in Sketch and Adobe XD

Same job, roughly. An artboard marks off the area where a design lives, and so does a frame.

Where Figma broke from the older model was nesting. Frames go inside other frames. Neither Sketch nor XD supported that natively with artboards.

Adobe moved XD into maintenance mode in May 2023, which means no new features but continued bug fixes and security or privacy updates (Adobe, 2023).

• Sketch artboards sit side by side on one flat level
• Adobe XD artboards work the same way, with no parent-child structure
• Figma frames nest, so a full page and each of its sections can live inside one hierarchy

Migration friction tends to show up somewhere else entirely. Help Scout’s design team hit this moving their design system from Sketch to Figma: a lot of their existing Sketch components leaned on masks and nested symbols for flexibility, and those didn’t import cleanly. They rebuilt the components from scratch and reorganized them by page category, frame group, and component name instead (Smashing Magazine, 2019).

Artboards do convert to frames automatically when you bring an old file over. Nesting and naming are the parts you’ll fix by hand.

How Do You Create a Frame in Figma?

Press F, then click or drag on the canvas. That’s the fast version.

1. Press F, or click the frame icon in the toolbar, to switch into frame mode
2. Click once for a default 100 by 100 frame, or click and drag to set your own width and height
3. Pick a preset from the design panel if a standard device or template size suits the project better than a custom one
4. Double-click the frame’s name in the layers panel and give it a name your team will recognize in a month

Most people never bother with the toolbar icon after the first week. The shortcut sticks. Figma’s full shortcut list has dozens more worth picking up at the same time.

Turning Existing Elements Into a Frame

If the content already exists, skip the frame tool. Select the shapes or layers, then use frame selection.

• Windows: Ctrl+Alt+G
• Mac: Cmd+Option+G

Figma builds a frame sized exactly around the selection. Faster than drawing an empty frame and dragging content into it afterward, which is what I did for far too long before someone showed me the shortcut.

Starting from an empty frame is still the normal move when you’re roughing out a low-fidelity layout and there’s nothing on the page yet.

How Do Frames Resize with Auto Layout and Constraints?

Two systems handle resizing, and they solve different problems. Auto layout manages spacing and direction for you. Constraints pin individual elements to a fixed reference point.

Auto layout tends to become default once building layouts that adjust themselves is part of your routine. Shift+A turns it on.

Auto Layout Sizing Modes

Each axis gets its own sizing behavior, set independently.

• Fixed keeps the exact width and height you set, regardless of contents
• Hug contents shrinks or grows the frame to match what’s inside on that axis
• Fill container stretches the frame into whatever space its parent offers

The logic here is borrowed from responsive layout thinking on the web, where content sizes the container instead of the other way around.

Constraint Anchors

Six anchors to work with: left, right, top, bottom, center, and scale.

Pin an element to one edge and it holds that exact distance as the frame resizes. Pin it to both and it stretches along with the frame. Center keeps it locked relative to the midpoint no matter which direction things grow. Scale resizes the element proportionally, in step with the frame.

In practice, a background image gets pinned to all four edges. A corner logo gets pinned to its corner. Not complicated.

Auto layout fits when:

• Content length shifts often, like button labels or a card list that keeps growing
• The design has to survive several screen widths
• Padding and gaps need to stay consistent as things get added or pulled out

Constraints fit when:

• A few elements just need to stay pinned to a corner or an edge
• The layout is basically static, like a splash screen or a fixed header
• Auto layout would mean setup work for something that never changes anyway

How Do You Style a Frame in Figma?

Corner radius, background fill, and stroke all apply to the frame itself, independent of whatever’s nested inside it.

Corner radius rounds the frame’s own edges and leaves the shapes inside alone. Background fill takes a solid color, a gradient, or an image, and sits behind every child layer. Strokes and effects apply to the outline, with shadows and blurs available there too.

Rounding is one field in the properties panel, and softening corners this way behaves the same whether the frame is a small card or a full screen.

Swap the flat color for a gradient and the fill panel opens a second color stop, so building a two-tone background is a couple of clicks.

Clip Content and Overflow

One toggle decides what happens when a child element crosses the frame’s edge.

Leave it on and anything past the boundary gets cut off, both on canvas and in exports. Turn it off and children spill past the edge, fully visible.

That second setting is what you want for a drop shadow or a decorative element meant to bleed outside the border. Everything else in a typical interface file ships with clipping on, since a card leaking its contents into the surrounding page is rarely intentional.

How Do You Nest and Organize Frames?

Drop a frame inside another frame and it becomes a child, indented under the parent in the layers panel.

Nesting means one page can hold several independently resizable sections instead of cramming everything into one flat container.

Worth remembering who else reads that structure. Developers were roughly 30% of Figma’s user base in the first quarter of 2025 (Figma, 2025), and a lot of them are looking at your nesting through Dev Mode rather than through the design panel.

• A nested frame indents under its parent and travels with it
• Names in the layers panel are what keep a large file searchable, and vague names are the fastest way to make a file unusable for everyone but you
• Dragging a frame, either on canvas or in the layers panel, reassigns its parent

TELUS Digital hit this while rebuilding its design system in Figma, restructuring components into a shared project layout a large team could actually navigate (TELUS, 2021).

Nested frames usually end up holding reusable pieces, and working with reusable elements is what stops a big file from degrading into a pile of one-offs.

Enough of those pieces and it makes sense to start turning that collection into an organized system the rest of the team can pull from.

How Do You Export a Frame in Figma?

The export panel sits at the bottom of the design panel whenever a frame is selected. A scale multiplier next to each setting controls resolution, so the same frame can produce 1x, 2x, 3x, or a custom scale.

• PNG is the default for screens and mockups, with transparency intact
• JPG is smaller, no transparency, fine for photography-heavy frames
• SVG stays sharp at any size, which is why icons and logos go out this way
• PDF is still what most style guides and print handoffs ask for

The multiplier matters more than people expect once app store submissions are involved.

Apple’s App Store Connect documentation asks for a 1290 x 2796 pixel screenshot on its largest current iPhone display, or 2064 x 2752 on its largest iPad display. Hitting those from a frame built smaller is a matter of picking the right multiplier, not resizing the frame.

Plenty of frames headed to engineering never get exported at all, because a developer-focused inspection mode reads spacing, colors, and typography straight from the file.

Client decks and style guides are the opposite case. Those still go out as files, and saving a frame as a PDF is the usual route.

Which Frame Preset Should You Use?

Pick based on where the design is actually going, not on whichever preset you used last time.

Device presets cover common phone, tablet, and desktop resolutions. Social and marketing presets handle square posts, vertical stories, and the other platform formats. Presentation presets give you sixteen-by-nine and four-by-three slide ratios. Custom dimensions override all of it the moment a project needs something non-standard.

A desktop preset only earns its spot when there’s a real target behind it, since a frame built for a website layout and one built for a native app end up with different proportions anyway.

A few of the common ones, for reference.

Those come from Figma’s own preset list, cross-checked against reports from designers on the community forum (Figma Community, 2023).

If a frame is meant to match a real device’s visible screen area exactly, check it against current hardware. Presets get renamed and resized as new devices ship, and the label in the dropdown lags behind more often than you’d hope.

When Does a Frame Not Work in Figma?

Usually because it isn’t a frame.

• A rectangle drawn with the shape tool looks identical to a frame and will never take auto layout, because it was never a container
• With clip content off, children spill past the edge invisibly on canvas, then turn up cut off or missing in the export or in Dev Mode
• Frames stacked many levels deep slow canvas interactions and make handoff harder to read
• Converting a group that mixes absolutely positioned and auto-layout children into a frame can shift the entire layout the second auto layout gets applied

The nesting problem is documented by Figma’s own engineering team. Files running into tens of thousands of layers made the layers panel sluggish enough that the company rebuilt the underlying architecture, which brought 30 to 50% faster interactions in the largest and most complex files (Figma engineering blog).

One deep frame is almost never the culprit. It’s the accumulation, dozens of them with their own nested children, in a file nobody has cleaned up since spring.

Bad group-to-frame conversions are easy to catch if you’re watching. The layout jumps, you notice, and undoing the last action costs you nothing. Catch it four steps later and you’re unpicking work.

FAQ on How To Make A Frame In Figma

What Is the Difference Between a Frame and a Section in Figma?

Sections group related frames on the canvas for organization, without acting as a container for content. Frames hold and clip the actual content.

Sections live one level above frames, which makes them useful for labeling whole flows like checkout or onboarding.

Can You Type an Exact Width and Height After Drawing a Frame?

You can, and you probably should if the freehand drag was approximate. Select the frame and type pixel values into the width and height fields in the design panel.

This works after any creation method, presets included, and the boundary updates as soon as you hit Enter.

Should You Use a Frame or a Section for a Large Canvas?

Frames for anything that needs to clip, export, or resize as a unit. Sections for labeling and visually grouping frames across a crowded canvas.

Big files tend to want both, sections for navigation and frames for the content boundaries.

How Do You Rename a Frame in Figma?

Double-click the name in the layers panel, type, press Enter. The label above the frame on canvas works the same way.

Naming feels optional right up until the file has forty nested frames and you’re searching for one of them.

Can You Add Auto Layout to a Frame That Already Has Content?

Yes. Select the frame with its contents in place, then hit Shift+A or use the right-click menu.

Figma arranges the existing children into a stack immediately. Overlapping or absolutely positioned elements will usually need spacing fixes afterward, so expect a minute of cleanup.

Is a Frame Required Before Auto Layout Works?

Auto layout applies to frames only, never directly to a group.

Select a group and press Shift+A and Figma converts it into a frame first, then applies the auto layout properties to the new container.

What Keyboard Shortcut Activates the Frame Tool?

F, on both Windows and Mac, no modifier.

Frame selection is the inconsistent one, requiring Ctrl+Alt+G on Windows and Cmd+Option+G on Mac to wrap existing elements.

Can You Convert a Group Into a Frame After It Already Exists?

Select the group and run frame selection (Ctrl+Alt+G or Cmd+Option+G) to wrap it in a frame.

The original group survives as a nested layer inside that frame. Nothing gets flattened or deleted.

What Should You Set Up First in How to Make a Frame in Figma?

Dimensions come first, then auto layout and constraints, then styling, then export settings. Every later property depends on the boundary fixed first.

• Dimensions, preset or custom
• Auto layout and constraints
• Styling, then export settings

Skip that order and you’ll be revisiting padding the first time a target device changes, because auto layout won’t retroactively fix spacing decisions made against the wrong width.

One last thing from Figma’s own reported user mix. Two-thirds non-designers against roughly 30% developers leaves just over a third of the user base as neither, product managers and marketers and writers building frames who will never open Dev Mode. Worth remembering when you’re naming layers.

The next step after the frames exist is wiring them together, covered in turning static frames into an interactive prototype.