Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Figma

Figma Frame Tips

This post is part of a series called Figma Tips and Tricks.
Figma On Canvas Tips
Figma Project, Page & Artboard Tips

Frames allow you to combine layers together under a single parent. Unlike groups, frames in Figma have explicitly set dimensions (much like an HTML iframe). Here are some great tips and tricks for when you’re working with frames.

Watch Tips

1. Nest Objects by Drawing Frames Around Them

Use the Frame tool (F) to draw a frame around a whole bunch of objects on your canvas; they’ll instantly become child objects of the frame, without you needing to manually drag and drop them into a new frame.

Drawing frames around objects in Figma

2. “Resize to Fit” Frames Instantly

Once you have a frame around a group of objects you can hit the Resize to Fit button to make the frame wrap snugly around the whole group.

3. How to Scale Frames and Their Contents

By default, if you resize a frame, its contents will be unaffected (but cropped). However if you want to scale the contents as well, grab the Scale Tool (K) and resize the frame; all the contents will resize uniformly along with it.

scaling Figma frame contents with the scale tool

4. Use Constraints on Frame Contents

You can use constraints to control how a child object behaves when its parent frame is resized. By default, if you resize a frame by dragging its bottom left corner handle, all the contents will remain positioned in the same place, relative to the top right corner. However, by selecting a child object and altering its values in the Constraints panel, you can make it cling to any edge or corner you wish.

Resultant behavior from the Figma constraints panel

5. Selecting Multiple Constraints

You can select constraints on all sides of an object if you wish; so instead of a child object clinging to a corner, or a single edge, it can stick to all four sides of the parent frame, effectively stretching it in all directions.

Multiple constraints selected in a Figma document

Figma Learning Resources

Those were some quick tips for working with frames in Figma. For even more take a look at our series of courses:

The UI kit used in this tutorial is fully compatible with Figma and available from Envato Elements:

First Order UIUX Tool
First Order UI/UX Tool

Learn Figma

We've built a complete guide to help you learn figma design, whether you're brand new to Figma's design tools, or you want to take your skills to the next level.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.