We rebuilt the editor. Less panel hunting. More shaping.

Guide

How to Create a Frame in Figma

This guide will walk you through the process of creating a frame in Figma. Follow these steps to successfully add a frame to your design project.

Interactive tour · Open canonical tour

  1. Select the Frame Tool – Press F on your keyboard or click the Frame tool from the top toolbar.

  2. Choose a Preset (Optional) – In the right panel, pick a device/frame preset like iPhone, Desktop, or Custom.

  3. Draw the Frame – Click and drag on the canvas to create your frame manually, or click a preset to auto-generate one.

  4. Adjust Dimensions – Use the right sidebar to tweak the size, position, and layout of your frame.

  5. Add Elements – You can now add text, shapes, images, and components inside your frame.

  6. Rename the Frame – Double-click the frame's name in the layers panel to rename it for better organization.

  7. Done – Your frame is ready to use as a container for UI elements, layouts, or designs.