Prototyping in figma: The beginner's guide (2021)

Today I'm going to show how you can do prototyping in figma with ease.

When I started to learn about how to do prototyping in figma, I would just jump from blog post to youtube video trying to make sense of scattered information.

And that is a very hard way to do it.

In this guide you'll learn what is the step by step process you need to follow in order to learn how to do prototyping in figma.

At the end of the article I'm also going to show some of the best resources to further increase your knowledge on the topic.

Let's get started.

What is prototyping?

Prototyping is a preview of how your final product is gonna look and work.

At the one end, there's a static design file. At the other end, there's a final coded product.

Prototyping comes in between these two ends.

In your design tool, you take the static design and prototype it to help visualize how your final product is going to look and feel like.

So this way you'll be able to identify if there's something you need to change.

But doing that with code would be very hard.

Changing the code every time when you want to change design is a nightmare.

But doing that in prototypes is super easy (If you know how to do it properly).

That's what we're going to learn in the next section.

Prototyping tab basics

If you're getting started in UI design first thing you need to do is to familiarize yourself with prototype tab in figma.

You can find that at the top right corner of the interface.

It look like this.

So first step is to create your static design file.

Then click on the prototype tab.

Then hover over any element that you want a reaction to happen when you perform an action.

For example, if you want to move to another screen when you click on a button(rectangle), then here action is clicking on the button. Reaction is moving to another screen.

Easy right?

Now for practice purpose, create two artboards.

Fill one with red, second one with blue.

The create while rectangle on first artboard.

Place some text which says "BUTTON".

Group white rectangle and text.

Here's how it should look like.

Then click on the prototype tab.

Then hover over the button rectangle & you'll see a white dot at the right middle edge of the button.

Hover over it & drag drop it on blue frame.

It should look like this.

You might notice the first option is the "Interactions details" popup is on click.

This is the action you have to select.

If this action is performed by the user, the reaction will happen.

The second option "Navigate to" is the reaction.

No click on the play button at the top right corner.

Wait for the prototype to load.

Then click on the button & you'll navigate to blue screen. Because that's the thing you programmed to happen.

Now there's an "Animation tab" where you can select how that reaction should happen.

Be default it is set to "Instant".

So the reaction will happen instantly.

But you can also select other options too.

So go ahead change these options and see what will happen.

The more you do this, the more you'll become proficient at it.

Use different layouts, different animations, different actions and reactions.

Have FUN.

That's the secret.

However one final tip I would like to give you is, if you want your animation to start at a particular frame, do the following.

You'll see a flow rectangle at the first frame in the above image.

Drag it & leave it to the second frame. So prototype will start at second frame.

Super cool.

Additional resources

Now I hope you've switched options & got familiar with the options.

So for further study on the subject, here's my recommended resources.

Figma prototyping tutorial by Udayraj Sathe

Link: https://www.youtube.com/watch?v=rUIhP66a2l0

I've personally watched his videos & his way of explaining is really great.

He goes into each & every options of the prototyping tab.

So if you've skipped some options & don't really get, this is exactly what you need.

Figma prototyping by Figma

Link: https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma

Officially figma has created some guides for you so you can easily understand all the components.

Google it

So now you're familiar with basics of prototyping, you need advance your skills.

Google the hell out of it.

Learn everything you see.

That's the way you'll master it.

Conclusion

I almost spent a week searching how to switch starting point of prototype in figma. But you've learned that in a few minutes thanks to this post "Prototyping in figma: The beginner's guide (2021)".

Prototyping is really important topic.

It would be really hard to visualize & iterate over design details.

It can save you a ton of time for you & ton of frustration for your client.

So invest time into mastering it.

Which tip of this blog post do you liked the most? Or do you have any prototyping tip you want to share?

Comment below, so others will also learn from you.

Hope you'll get stuck in endless browsing of our awesome blog posts 🙃.