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.
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.
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.
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.
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:
- 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:
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.
