Prototyping 101: Wireframes in Figma

Introduction

This article is a part of Prototyping 101 workshops and presents how to quickly start wireframing in Figma.

Figma is a tool which suits well for much more complex and interactive prototyping but for the purpose of this part of workshops, only some of the functionalities of Figma will be presented.

Figma allows multiple user collaboration at the same time which makes it a useful tool during teamwork.

Wireframes are part of low/medium fidelity prototyping which should focus on the overall idea of the product and its functionality while the design details as colours/typography should be left for mockups or be applied in high fidelity prototype. Wireframes help to communicate an understanding of the project requirements by the team to the product owner as well as support a common understanding of the project among designers, developers, content creators etc.

Part 1: Preparation to collaboration

1. Sing up to Figma!

2. One of your team members should add Wireframe Component Library to her/his Figma

3. Change the name of the project

4. Share your project with your team members (Figure 1)

Figure 1: Click button Share in the right corner and follow instructions

Part 2: Wireframing

1. Create a new page in the project (Figure 2)

Figure 2: Click button Plus to add a new page from the Layers menu

2. Add a frame to the project (Figure 3)

Figure 3: Add a frame to your project from the right menu Prototype

3. Copy chosen elements of UI to your Wireframe (Figure 4)

Figure 4: Example of two wireframes created with Wireframe Component Library

Part 3: Present your wireframe

1. You can present your wireframes in Present mode or share a link to the prototype in Presenting mode (Figure 5, Figure 6)

Figure 5: To present your wireframes click button play in the right corner of the screen

Figure 6: Example of view in presenting mode

See the demo in presenting mode

2. Or you can share your wireframes as a project view

Prototyping101: wireframe

Congratulations! Now you know your basis to start wireframing in Figma!

Edit Nov. 2020:

I’m getting quite a lot of reads on this article which I’m doubting are from humans.

If you are not a robot*, please give me a clap or a comment that I can see human reads of this article. 👏

And if that article was helpful for you, then you should especially let me know! 👏👏👏