How to Create a Frame in Figma

Yes, framing is different from wireframing in Figma, chill, is not like comparing a vegetable with a shoe. Both terms are part of the same semantic family but in practice, they are slightly different. In this tutorial, you will learn how to create a Frame. 

Frame, Wireframe, what’s the difference?

There is, indeed, a difference. We previously discussed why Wireframing is important, it works as the visual guide to structure the prototyping phase. Wireframing then refers to ALL the visual structure and gives you specific details about how the interface is going to look, the functionalities of the design, and its practicality of it. There are also types of Wireframing: Low Fidelity Wireframing and High Fidelity Wireframing. Which is basically like getting a basic hamburger with cheese (LFW) and getting the full combo with fries and dessert (HFW). Framing on the other hand is the tool itself that creates the frame for the wireframe.

Frame by Frame 

The wireframe has a specific size depending on the screen resolution you are designing for, while the frame doesn’t. Open a Desing File and let’s take a look.

jOVu3mR15fSrZCoI1cRAO8pnlNXQURRL011r15KKkDC Zg57X9vrY2x0cXz7ogTUMMEWxfnO1rn9tMj7ENohOLalULPHruESQgMNTGnS8LHybj5pHub8zQdBIa5KQONpsZthr3pyfJHSl buXLhD7LeTtha8UUkx7v4JVM5ElCjA0PRzDrh3J97c2syJK wPSQ9sQ

Go to the top toolbar and select Frame. Now you can click and drag in the canvas and create the frame of the size you want because everything is allowed in Figma’s world except for being sad or uninspired. 

Playing With Frames

You can move and resize the frame as you want you just have to drag the sides of the shape by pressing on them. Some interesting features of framing include The Layout Grid, which helps you by knowing where exactly to place the elements of your design inside of the frame.  

5GLnL88pnABDHGjBSe ei2v1k2Ympz2XXZEbeqV4oySZajEIaivF47UIxrCPs vOSK1o DsqsBCU33qFXEETMZW9B AUjJaRffaXSsRYAb2XFF53QLoBfw0gKf679 jNY1 r149VRkDNrjBFmKeORXQXwiYjT5ECRqAQ0AQW Lz8N6zme5Wi20aXN8eHJ ABwyaueA

Do the exercise of exploring until you feel comfortable using Frames and their different possibilities. Enjoy the process of using Figma and stay tuned!

Read The Previous Lesson