Figma Frame 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.

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

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.

Image may be NSFW.
Clik here to view.

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:

• Image may be NSFW.
  Clik here to view.
  UI Design
  Introduction to Figma
  Adi Purdila
• Image may be NSFW.
  Clik here to view.
  Figma
  Beyond the Basics: Figma
  Adi Purdila
• Image may be NSFW.
  Clik here to view.
  Figma
  A Guide to Prototyping in Figma
  Adi Purdila

• Hat tip to Carmel DeAmicis and Valerie Veteto for their regular community tips roundups—go and check them out!
• blog.figma.com
  
• www.figma.com
  
• Groups & Frames: Figma docs

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

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.