Frames in Figma Design

Before you start

Who can use this feature

Available on any plan

Anyone with can edit access to a file can create and edit frames

Frames are layers that act as containers to organize other layers—such as shapes, images, and text—into cohesive designs. You can even nest frames within other frames, allowing you to create more complex designs. Frames allow you to build everything from individual elements like icons or buttons, to entire website layouts and mobile app designs.

Frames that sit directly on the canvas are called top-level frames. Frames that contain other layers are called parent objects. Any layers or nested frames inside a parent frame are called child objects. Learn more about the parent, child, and sibling relationship.

Similar to other layer types, you can adjust the properties of a frame including its dimensions and fill.

Frames also give you access to other features including layout grids, auto layout, constraints, and prototyping.

You can identify frames in the Layers panel of the left sidebar by the frame icon.

Select the frame tool

Enable the Frame tool by selecting it in the toolbar, or by using one of the keyboard shortcuts: F or A.

Create a frame

Once the Frame tool is selected, there are several ways to create frames:

• Click on the canvas
• Use a frame preset
• Duplicate an existing frame

Click on the canvas

With the Frame tool selected, do one of the following:

• Click on the canvas to create a top-level frame. If this is the first top-level frame you’re creating during your current session in this file, the frame’s dimensions will be set to 100 x 100. Otherwise, the top level-frame will use the same dimensions of the last top-level frame you created.
• Click inside an existing frame to add a 100 x 100 nested frame.
• Click and drag on the canvas or in an existing frame to add a frame with custom dimensions.

Use a frame preset

When the Frame tool is enabled, a list of frame presets become available in right sidebar. Click the arrow to expand the section and select a preset from the list. You can choose presets for popular device and asset templates:

• Phone
• Tablet
• Desktop
• Presentation
• Watch
• Paper
• Social Media
• Figma Community
• Archive

If you want to change a frame to a different preset, select the frame and use the Frame dropdown in the right sidebar to select a different frame preset.

Duplicate an existing frame

There are two ways to duplicate an existing frame:

• Quick-add: With the Frame tool enabled, hover over an existing frame and pressing the + plus on either side of the frame. This will duplicate the frame and nudge other frames over to accommodate the new frame.
• Duplication shortcut: Select a frame and use the duplication keyboard shortcut ⌘ Command D (Mac) / ⌃ Control D (Windows). You don’t need to enable the Frame tool to use this method. Learn more about duplicating options.

For both methods, if your frame is in a section, the section will resize to accommodate the new frame.

You can also quickly create a blank frame of the same size by clicking the + plus on either side of the frame while holding the keyboard modifier:

• Mac: ⌥ Option
• Windows: Alt

Frame properties

There are a few properties associated with frames. Frames support the following properties.

• Corner Radius: Round the corner of a frame to create softer edges.
• Clip Content: Hide any objects within the frame that extend beyond the frame's bounds.
• Layout Grids: Create guidelines to help with the visual structure to your designs.
• Auto Layout: Create dynamic frames that respond to their contents
• Fill: Apply a solid fill, gradient, images (PNG, JPEG, GIF, TIFF and WEBP) to a frame.
• Stroke: Add strokes to a frame to create a border or outline
• Effects: Add a shadow or blurs to a frame

Extra functionality

Frames allow you to access extra functionality in Figma. You will need to use frames to use the following features or functions:

• Layout Grids: Apply transparent grids, columns, and/or rows to frames to provide visual structure
• Constraints: Define how child objects respond when you resize a frame. Apply constraints to objects within a frame.
• Auto Layout: Add Auto layout to frames to create dynamic layouts that respond to their contents
• Prototyping: Create interactive prototypes that move between frames in your canvas

A frame is a parent object. This means that it can control or influence any child objects you place within it.

Learn more about parent/child relationships in Figma.

Adjust properties of the frame

In the past, it was possible to adjust the properties of child objects when you selected the frame. Now, you can adjust the properties of the frame itself.

• Select a child object by using the keyboard shortcut: Enter or Return.
• Press the Tab key to select the next sibling.
• Press Shift + Tab to select the previous sibling.
• Press Shift + Enter to select the parent

Nest frames within other frames

In Figma, you can create frames within other frames. We call this process nesting. This allows you to combine frames with different properties to build complex interfaces.

This creates new hierarchies or relationships:

• Top-level frames: Any frame that is directly on the canvas. For a frame to be a top-level frame, you can't nest it within another frame, group, or object
• Nested frame: Any frame that is placed within another frame. You can place frames within top-level frames, or within other nested frames. Nested frames are both a parent and a child
• Children: Any object that is within a frame

Learn more about parent, child, and sibling relationships.

Top-level frames

Figma bolds top-level frames in the layers panel and shows the name of any top-level frames on the canvas.

Nested frames

Nested frames are frames that you place within another frame or object. This makes them both a parent and a child. You can place frames within:

• Top-level frames
• Other nested frames
• In groups

In our example below, each of our elements are in their own frame. We have a status bar at the top and a navigation menu at the bottom. We also have a card that includes the details of our Upcoming Tickets.

Using one of our device presets, we can create a top-level frame for our elements. We can add our elements to the top-level frame to build a single screen in our mobile app.

Resize frames

You can interact with frames like any other object on the canvas, including change the size or scale of frames. There are a few ways to change the size of a Frame:

Drag the frame

Drag to resize a frame manually.

1. Select the frame in the canvas, or layers panel in the left sidebar.
2. Click the handle in one of the corners and drag to resize. Or, click one of the edges and drag.

Change the frame preset

Select another frame preset to change the frame's size. 

1. Select the frame.
2. In the Properties Panel in the right sidebar, select the frame field.
3. Select a preset from the list. 
4. Choose presets for popular device and assets templates:
   • Phone
   • Tablet
   • Desktop
   • Presentation
   • Watch
   • Paper
   • Social Media
   • Figma Community
   • Archive
5. Figma will update your frame's dimensions to match the preset.

Properties Panel

Update the Frame's Width and Height using the right sidebar.

Enter a new number in the W and H fields, or hover over the icon to scrub the field. Drag left to decrease and right to increase.

Select <icon> Lock aspect ratio next to the Width and Height fields to maintain the layer’s proportions while resizing it.

Resize to fit

You can resize a frame so that it shrinks or grows to fit its child objects. This will redraw the frame around the outermost bounds of the objects within it.

• Use the keyboard shortcut:
  • Mac: ⌥ Option Shift ⌘ Command R
  • Windows: Alt Shift Control R
• Click in the Layout section of the right sidebar

Ungroup a frame

To ungroup a frame, select the frame and press:

• Mac: ⌘ CommandShiftG or ⌘ CommandDelete
• Windows: ControlShiftG or ControlBackspace