In our previous article, we learned what a wireframe is, and why it is so useful for our process of prototyping. In this tutorial, you will learn how to create a wireframe in Figma. Easy as waking up from a beautiful dream on a summer day. Indeed, very easy.
First of all, we recommend you take a look at previous articles where we teach you How to Create an Account using Figma, and How to Create a Design file. Also, before diving into creating a Wireframe, please check How to Do the Ultimate User Research and How to Understand Interface Principles where you will grasp the theory behind UI-UX design.
Now that you have the project you want to work on and have done the research and mapping the user journey in FigJam, what comes next is to give the project a structure to follow.
Open your Figma workspace and click the option Design File.
NOTE: Remember to be organized when creating the files in your workspace. This will always save you time and getting unnecessarily stressed. We also recommend having your FigJam file open to follow the User Journey you created.
Now that you have your Design File ready to be used, you will see a few options available at the top toolbar. Check the Quick Guide to Figma Tools for more info about these tools.
At the top toolbar, you will find the shape tool, the text tool, the hand tool -just to mention some of them- and there it is, The Frame Tool. Once you press the frame feature, notice that you have now at the left of the screen a wide range of options to wireframe.
These options correspond to the different screen sizes most tech devices have. If you press any of them, the wireframe will automatically draw in the canvas. Wow, we told you it was easy, wasn’t it?
