How to Make a Frame in Figma: Design Fundamentals

Every Figma project starts with a frame. Without one, your design elements float aimlessly on an infinite canvas.

Learning how to make a frame in Figma takes less than two minutes, yet this skill forms the foundation of every UI layout, mobile screen, and component you’ll ever build.

Frames act as container elements that organize your layers, enable auto layout, and define export boundaries.

This guide walks you through three methods: drawing custom frames, using device presets, and converting existing elements into frames.

You’ll also learn keyboard shortcuts, troubleshooting tips, and best practices for naming your layer hierarchy.

Whether you’re designing a landing page or a mobile app screen, frames give your work structure.

How to Make a Frame in Figma

Making a frame in Figma is the process of creating a container element that holds and organizes other design layers like shapes, images, and text.

Users need frames when building UI layouts, designing for specific device dimensions, or structuring individual components like buttons and navigation bars.

This guide covers 3 methods requiring less than 2 minutes and any Figma account.

Prerequisites

Before you create your first frame, make sure you have these ready:

• Figma account (Starter, Professional, or Organization plan)
• Figma desktop app or browser access via Chrome, Firefox, Safari, or Edge
• Basic mouse or trackpad navigation skills
• 1 to 2 minutes of available time

No plugins required. No premium features needed for basic frame creation.

Step 1: How Do You Access the Frame Tool in Figma?

Press F on your keyboard or click the Frame icon in the top toolbar.

The icon looks like a hashtag symbol. You’ll find it in the top-left corner of the Figma interface.

Once activated, the right sidebar displays frame presets organized by device category.

Available Preset Categories

• Phone (iPhone 16, Pixel 9, Galaxy S24)
• Tablet (iPad Pro, Surface Pro)
• Desktop (1440×1024, 1920×1080)
• Watch (Apple Watch sizes)
• Presentation (16:9, 4:3 ratios)
• Social Media (Instagram, Facebook, LinkedIn)

The layers panel on the left will show your new frame once created.

Step 2: How Do You Create a Frame by Drawing?

Click and drag anywhere on the design canvas to draw a custom-sized frame.

Hold Shift while dragging to constrain proportions to a perfect square.

Release the mouse button to finalize your frame dimensions.

Drawing Controls

Width and height values appear in the right sidebar as you draw.

You can adjust these pixel dimensions manually after releasing the mouse.

This method works best for non-standard screen sizes or custom design containers that don’t match preset devices.

Many designers use drawn frames when creating wireframes with unique proportions.

Step 3: How Do You Create a Frame Using Presets?

With the frame tool active, click any device preset from the right sidebar.

The frame appears at the center of your current viewport with fixed dimensions matching the selected device.

Popular Preset Sizes

• iPhone 16 Pro: 393 × 852 pixels
• iPad Pro 11″: 834 × 1194 pixels
• MacBook Pro 14″: 1512 × 982 pixels
• Desktop: 1440 × 1024 pixels

Presets save time when designing for responsive design across multiple devices.

The frame label automatically displays the device name. You can rename it later in the layers panel.

Step 4: How Do You Create a Frame Around Existing Elements?

Select one or more existing layers on the canvas using click-drag or Shift+click.

Press Ctrl + Alt + G on Windows or Cmd + Option + G on Mac.

Figma creates a parent container frame that wraps all selected child objects.

Alternative Method

Right-click your selection and choose “Frame selection” from the context menu.

This frame selection shortcut preserves the relative positions of all nested elements inside the new container.

The layers panel updates immediately, showing your new frame with nested frames or layers indented beneath it.

This technique is useful when you’ve already built mockup elements and need to group them for export or prototyping.

Step 5: How Do You Rename and Organize Your Frame?

Double-click the frame name in the layers panel or directly on the canvas label.

Type your descriptive name and press Enter to confirm.

Naming Best Practices

Use clear naming conventions: [Screen name] – [Device type].

Examples: “Home – Mobile”, “Dashboard – Desktop”, “Login – Tablet”.

Good layer hierarchy naming improves collaboration when sharing files with developers or other designers working on user interface projects.

Consistent naming also makes it easier when you prototype in Figma and need to identify specific screens quickly.

Verification

Select your new frame on the canvas to confirm it was created correctly.

The right sidebar should display these properties:

• Frame icon next to the layer name in the layers panel
• Width (W) and Height (H) values in the Design panel
• Frame dropdown showing current preset or “Custom” for drawn frames

You’ll see the frame icon (rectangle with corner markers) in the layer hierarchy.

If you see a different icon, you may have created a group instead of a frame.

Troubleshooting

Clicking Creates a Group Instead of a Frame

Verify the frame tool is active by pressing F.

Groups use Ctrl/Cmd + G. Frames use Ctrl + Alt + G (Windows) or Cmd + Option + G (Mac).

Check the toolbar icon. The frame icon looks like a hashtag, not a dotted rectangle.

Frame Appears Off-Screen

Press Shift + 1 to zoom and fit all content on your design canvas.

Or select the frame in the layers panel, then press Shift + 2 to zoom to selection.

Large preset sizes like Desktop 1920×1080 can appear outside your current viewport when zoomed in.

Cannot See Frame Presets in Sidebar

The frame tool must be active. Click the Frame icon in toolbar or press F.

Presets only appear when the frame tool is selected, not the selection tool or other tools.

Frame Properties Not Editable

Make sure you’ve selected the frame itself, not a child object inside it.

Press Escape to deselect nested elements and select the parent container frame.

You can also click the frame name directly in the layers panel.

Related Processes

Once you’ve created your frame, you’ll likely want to explore these related Figma features:

Layout and Structure

• Use auto layout in Figma to create dynamic frames that respond to content changes
• Make a grid in Figma to add grid system structure to your frames
• Round corners in Figma to adjust frame corner radius

Components and Reusability

• Make components in Figma to turn frames into reusable design elements
• Use components in Figma to build consistent user experience patterns
• Create variants in Figma for multiple frame states

Export and Sharing

• Export Figma to HTML to convert frame designs to code
• Download images from Figma to export frames as PNG, JPG, or SVG
• Export Figma to PDF for presentation-ready frame exports

Design Techniques

• Mask in Figma to clip content within frame boundaries
• Make a gradient in Figma to add fill color backgrounds to frames
• Scale in Figma to resize frames and their nested elements proportionally

Frames are the foundation of every Figma project. Mastering frame creation speeds up your entire website design workflow in Figma.

FAQ on How To Make A Frame In Figma

What is the keyboard shortcut to create a frame in Figma?

Press F on your keyboard to activate the frame tool. Then click and drag on the canvas to draw a custom frame, or select a preset size from the right sidebar.

What is the difference between a frame and a group in Figma?

Frames act as container elements with their own properties like constraints, auto layout, and clip content. Groups simply bundle layers together without these features. Frames support responsive layouts, groups don’t.

Can I convert a group to a frame in Figma?

Yes. Select your group, then right-click and choose “Frame selection.” You can also use Ctrl + Alt + G (Windows) or Cmd + Option + G (Mac) to convert any selection into a frame.

How do I resize a frame without scaling its contents?

Select the frame and drag its edges while holding Cmd (Mac) or Ctrl (Windows). This resizes the frame boundaries only. Child objects stay at their original pixel dimensions and positions.

Why can’t I see frame presets in the right sidebar?

Frame presets only appear when the frame tool is active. Press F to activate it. If you’re using the selection tool or another tool, the sidebar shows different options instead.

How do I create nested frames in Figma?

Draw or place a new frame inside an existing parent frame. The layers panel shows nested frames indented under their parent container. This layer hierarchy helps organize complex UI layouts and components.

Can I change a frame’s preset size after creating it?

Yes. Select your frame, then use the Frame dropdown in the right sidebar to choose a different device preset. You can also manually adjust width and height values in the design panel.

How do I duplicate a frame in Figma?

Select the frame and press Cmd + D (Mac) or Ctrl + D (Windows). With the frame tool active, you can also hover over an existing frame and click the + icon to quick-add a duplicate.

What does clip content do on a frame?

Clip content hides any design elements that extend beyond the frame boundaries. Enable it in the right sidebar under frame properties. This works similar to cropping in Figma for overflow control.

How do I export a frame from Figma?

Select your frame and scroll to Export in the right sidebar. Click the + icon, choose format (PNG, JPG, SVG, PDF), and set scale. Click Export to save. Frames define your export boundaries automatically.

Conclusion

You now know how to make a frame in Figma using three different methods. Press F to draw custom frames, select device presets from the sidebar, or convert existing elements with a quick keyboard shortcut.

Frames give your designs structure. They enable constraints, clip content, and define export boundaries for your assets.

Practice creating nested frames to build complex screen mockups and reusable components.

Name your frames clearly. Good organization in the layers panel saves hours when projects grow larger.

Start with a top-level frame for each screen. Add child objects inside. Apply auto layout when you need responsive behavior.

The frame tool is where every Figma wireframe and prototype begins. Master it, and the rest of Figma becomes easier.