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 Figma tutorial, you will learn how to create a Frame.
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.
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.
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.
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.
Do the exercise of exploring until you feel comfortable using Frames and their different possibilities. Enjoy the process of using Figma and stay tuned!
