How to Prototype in Figma

In this post we will learn how to upgrade our wireframes and mockups from static to interactive with Figma’s Prototype Mode! This is one of the most exciting features in Figma and the perfect way to test and iterate our projects before moving them for development.

In this beginner-friendly step-by-step guide I will teach you how to change a basic wireframe into a working prototype. This guide is based on my Figma UI and UX Essentials course. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

Ready to think and work as a true UI/UX designer? Let’s go!

What is Prototyping in Figma?

Prototyping is all about creating user flows in a project, making it interactive and a close simulation of how the final product should look, feel, and perform for users and stakeholders.

As UI and UX designers, we focus on human-centered designs. We must consider at all times our users’ journey and emotional experience while interacting with the service or product we are providing. Prototyping is the key to lead us straight into our users’ minds and behaviors, allowing us to verify how efficient and stress-free our design is and what can be done at each test and iteration stage to optimize visuals, interactions, and user flows.

What is a Flow in Figma?

When we design in Figma, we work with frames. Inside these frames we add content like text, images, icons, and buttons. Then we link these frames together to form a flow, the path the users will follow from a welcome screen or homepage to a checkout or confirmation page. We can have multiple flows, depending on our project’s goals and complexity.

What are Connections, or “Noodles”, in Figma?

In Prototype Mode we use Connections, a.k.a. “noodles”, to connect frames and form a flow. These flexible blue lines are the visual representations of how frames are linked and relating together. “Noodles” hold interaction and animation settings and can be applied to a top-level frame or to hotspots inside a frame. These hotspots are objects we create, such as buttons, links, images, or icons.

Now we have covered the basics, let’s fire up our laptops and jump into Figma!

Step 1 – Switch to Prototype Mode

We will be working with basic wireframes from my Figma Essentials Course as examples. To start prototyping, we must activate the Prototype mode in Figma. We can do this by moving our mouse to the top right corner of our screen, above the Properties panel and clicking on the Prototype tab. Easy!

We can also use the shortcut Shift + E on both PC and Mac to toggle between Design and Prototype modes.

Step 2 – Setting a first Interaction and a Flow Starting Point

When we create our first connection, Figma automatically sets a flow starting point. We’ve covered what flows are, so we now know that this first action will be followed by other links until we have a clear view on how users will interact with our digital product from A to Z.

We will keep this simple, so let’s join top-level frames and understand how it all happens.

For this, all we need to do is select our frame by clicking on its name. We’ll see a blue line highlighting the frame. That’s how we know we have an active frame or object in Figma. Next, we hover with our mouse cursor over that line until we find a “+” icon, the Add Interaction tool.

Now we click, hold, and drag that icon in the direction of the destination frame. A “noodle” will grow from the “+” icon, pointing in the direction our interaction will follow. In this case, we will jump from our mockup’s “Homepage” to the “Product Details” page.

We can release the mouse button when the arrow-pointed noodle is close or over its destination frame. It will snap both frames together.

Now we have our homepage connected to our product page, we know that by clicking on the first we will be transferred to the second. This can happen as an instant cut or animation, there are different settings to explore that I cover in my Figma Essentials Course.

Pro Tip: When we are prototyping, our mind must be set on our project’s structure and hierarchy and how our users will feel while experiencing them. At this stage in development, mind that we’re not skipping from frame A to frame B, but from a specific user journey step to the next.

Step 3 – Repeat

Now we repeat the click and drag process until all the frames that compose our flow are connected.

If we want to delete a connection, we can do it in Prototype mode by clicking on it and hitting the Delete key. It’s gone! One other way to do it in Prototype mode is to have the frame selected, move up to the Interactions panel to the right of our workspace and click the “-“ icon, or remove interaction button, next to the connection we want to remove.

Cool, huh? A working prototype in just a few minutes! Now we jump to testing our prototype and understanding how our users will react to it.

Timeout #1

Check out this article to learn more about the importance of prototyping in UX and UI design.

Step 4 – Previewing prototypes in Figma

We have our wireframes all ready for testing and we’ve linked all the different pages to create our first user flow. Now, we take our prototype out for a drive along the coast and see if it is fit for the road. In other words, we preview it and test the interactions. Remember, from our users’ point of view.

The first thing to do is make sure that we have selected our prototype’s first frame, the homepage – that’s where the flow starting point is set.

It’s perfectly OK to begin our preview from any other frame, we just need to pick the one from which we want to test from. For this post, we’ll do it from ground zero.

There are two ways we can bring up the preview to our screen:

1. Click on the “preview” icon that is placed in the flow’s name panel. This will open a window on our workspace, ready for interaction.

1. Move our mouse cursor to the toolbar over the Properties panel and click on the Present button. This will open a new tab in Figma, both on browser and app. In this new tab, we can test our prototype as if we were handing a mobile device or computer monitor.

We can customize the preview device’s screen appearance to further enhance our previewing experience. For this, we must go back to Prototype mode, click on the “Show prototype settings” button, and choose the one we need from the Device or Model lists.

We can also set a Custom Size for our preview device screen, if there isn’t a preset for the one we are working on, and change the background color to fit the brand identity or have higher contrast.

Isn't it great to see our prototype all shiny and functional? Imagine how you will feel when you are working with a fully designed prototype, ready for development. It’s the best!

Step 5. Some other cool settings in Presentation preview

Let’s have a quick look at some of the settings we can find in Figma while presenting our prototype for testing.

We’ll start with a shortcut. We can hit the “R” key on our keyboard at any time to restart the presentation from the flow starting point we’ve set.

There is an Options drop down menu, where we can adjust the presentation’s zoom state, activate full screen, or define other preview settings, like showing hotspot hints or hiding Figma’s UI.

One other great thing to know about our presentation tab: we don’t have to close it every time we jump from design to prototype or preview. It updates as we make any changes to our objects.

We can toggle tabs by pressing and holding Command on a Mac or Control on a PC and the numbers 1, 2, 3, 4, and so on, depending on how many tabs you have open.

This automatic update also happens on the preview pop-up window and on the next brilliant feature that Figma offers for real-time prototype testing.

6. The Figma Mirror app

Let’s say we are designing for Android mobile devices. Or maybe we are testing website responsiveness on an iPad. Or developing an app for the latest iPhone version. Wouldn’t it be great to test our prototypes on an actual Android or iOS device?

Well, yes it would and yes, we can!

All we need to do is download the Figma Mirror App from the Android or Apple store, install it on the specified mobile device, and log in. From there we can select the project we’re working on and all the available flows.

Awesome! We’re now testing our prototype on the very same device our users will be holding while using the final product. It’s as real as Figma can get and an incredible productivity tool for any UX and UI designer to try out.

Timeout #2

UX is a human-centered design. UI and Prototyping are all about your users and how they interact with your brand and products.Check out this article on Usability Testing. These skills will make you a better UX and UI designer.

What 's Next?

Dive deeper into Figma at Bring Your Own Laptop. When you become a BYOL member, you will gain access to my Figma courses as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

See you in class! – Dan