How do I wireframe in Figma?

If you're just starting with UX (user experience) design or just a beginner to web design entirely then you're probably having a hard time understanding what are wireframes, what are they used for and how does one design them.

For the sake of simplicity I decided to create wireframes for an already designed page. Usually you're supposed to create the wireframes first and the UI/design after. But so that it's easier to understand I decided to do it the other way around.

 How do I wireframe in Figma?

First you're going to use a frame tool and create a desktop frame. After that what you're basically doing is creating a low fidelity design of the finished page. The idea is to help your UI designer understand how the page structure is going to look like.

So you will be designing the position of the buttons, images, text, headers, icons and you can get as detailed as you want. Normally UX (user experience) designers don't really go in that many details, they prefer to give more creative freedom to the UI (user interface) designer but it's all subjective.

There's not a lot of fixed rules when it comes to wireframing in Figma or in general. You should be aiming at making the design easy to understand and easy to use.

I also use guidelines that help me align layers properly on the page - aligning should be high on your priority list because it's pretty much the only reason you're doing the wireframe in the first place.  

Once you're done with the wireframe you can invite your designer to the file or you could export the wireframe as pdf or PNG and send it over to the other team members. Or if you're doing both the UI and UX design then once you're done wireframing it's time to start designing the actual page. 

In short, if you're looking to wireframe in figma just start by creating a new frame and enable guidelines so that your layers are properly aligned.

After that you're good to go to position squares and shapes that resemble images, buttons, text and icons which are going to help the designer understand how the web page is going to be structured. You can go into as many details as you want but at the same time don't overcrowd the page. It will just confuse everyone and it will be hard to use.