Before you Start
Who can use this feature
Users on Any plan can use Frames
Users with Edit access to a File can create and edit Frames
In Figma, you can add layers directly to the Canvas. If you're designing for a specific device or screen size, you may want to create a container for your designs.
This is where Frames come in handy.
If you've used design tools before, you'll be familiar with Artboards. Like Artboards, Frames allow you to choose an area of the canvas to create your designs in.
They also give you access to extra functionality. This includes features like Layout Grids, Auto Layout, Constraints, and Prototyping.
Unlike traditional Artboards, you can also nest Frames within other Frames.
Create Frames in the canvas using the Frame Tool.
- Use the keyboard shortcuts F or A
- Select the Frame tool in the menu bar:
You then have a few options:
- Click in the canvas to create a default Frame with 100 x 100 dimensions
- Click and drag in the canvas to create a Frame with custom dimensions
- At the top of the Properties Panel, use the dropdown to select a Frame size from the list of presets. Choose from popular devices, screen dimensions, paper sizes, or social media templates.
You can identify Frames by the icon in the Layers Panel.
Tip! You can also create a Frame around a selection. This could be a single layer, or a selection of layers.
- MacOS: Option Command G
- Windows: Ctrl + Alt + G
There are a few Properties associated with a Frame.
Access 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 our Relationships in Figma article.
Adjust Properties of the Frame
Frames can also have their own 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 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
Before, you could adjust the properties of child objects when you selected the Frame.
Now, when you have a Frame selected, you can only adjust the properties of the Frame itself.
You can select a child object by using the keyboard shortcut: Enter or Return.
- Press the Tab key to move to the next sibling.
- Press Shift + Tab to move to previous sibling.
- Press Shift + Enter to move up to the next parent
In Figma, you can place Frames within other Frames. We call this process nesting. This allows you to build more complex interfaces by combining Frames with different properties.
In Figma, you can place Frames within other Frames. We call this process nesting. This allows you to combine Frames wit different properties to build complex interfaces.
When you add a Frame directly to the Canvas, we refer to this as a Top-level Frame.
We bold Top-level Frames in the Layers Panel. We also show the Frame name on the Canvas:
For us to consider a Frame as a Top-level Frame, you must not nest it within another Frame or object.
Nest Frames within other Frames
You can then nest other Frames inside that Top-level Frame. 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 cards for each of the posts in our News Feed.
We can then add these to a Top-level Frame, using one of our device presets. Now, we've built a single screen for our mobile app design.
You can interact with Frames like any other object on the Canvas. This includes resizing and scaling Frames.
There are a few ways to change the size of a Frame:
Drag the Frame
Drag to resize a Frame manually.
- Select the Frame in the Canvas or Layers Panel.
- Click and drag one of the corners, or sides to resize.
Tip! Hold down the modifier key to ignore any Constraints while resizing: macOS: Command Windows: Ctrl
Change the Frame Preset
Change the Frame's size by selecting another Frame Preset.
- Select the Frame.
- In the Properties Panel, click on the Frame field.
- Select a Frame preset from the list.
- Figma will update your Frame to the preset you selected.
Note: If you have applied Constraints to any child objects, Figma will resize them to match the new Frame size. Otherwise, objects inside the Frame will stay at the original dimensions and position.
Update the Frame's Width and Height in the Properties Panel. Update the dimensions in the positioning section at the top of the Design panel.
Toggle on the link button next to the Width and Height to constraint resizing to the current proportions.
Tip! You can use the measurement fields in the Properties Panel to perform calculations. This allows you to quickly scale or resize objects.
- % Percentage e.g. 50%
- + Add e.g. +100
- - Subtract, e.g. -20
- * Multiply, e.g. *4
- / Divide, e.g. /8
It's not possible to multiply a width or height by a percentage e.g. *50% will result in a value 50x the original, not 50%.
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:
- macOS: Option Shift Command R
- Windows: Option + Shift + Command + R
- Click the Resize to Fit button in the Properties Panel