How to do Framing in Figma

Writer
Updated on: December 14, 2022

Framing in Figma is can be considered the most crucial process to learn before anything else, and as basic as it seems, it is what makes Figma so special. This tutorial will explore How to do Framing in Figma so stay tuned. 

Framing for Everything

First, if you don’t know how to add Frames in Figma here is a quick, fast, speed lesson on several ways you can do it: 

The Frame Tool

The first way is to use the Frame tool, which is located in the toolbar on the left side of the screen. To use the Frame tool, simply click and drag your mouse to create a rectangular frame. You can also click on the edges of an existing frame to resize it.

You can also use the Frame tool to create nested frames. To do this, simply click and drag your mouse to create a frame, and then click on the "Nest" button in the toolbar. Finally, you can also use the Frame tool to create groups of frames. To do this, simply select the frames that you want to group and then click on the "Group" button in the toolbar.

The Layer Tool

Another way to add frames to your design is to use the Layer tool. To use the Layer tool, simply select the layer that you want to frame and then click on the Frame button in the toolbar. 

framing in figma

What you see next to the application design is the Frame we have created using The Frame Tool. 

Finally, there are many things you can do with Frames such as organizing your designs into sections, creating margins and padding, using frames as masks, resizing elements within a Frame, or changing the stacking order of elements within a Frame, just to mention a few.

So there you go! Take the best from using Frames in Figma and stay curious.

Access 4,242+ video lessons. Instantly.
Start Learning Now →
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram