Learn how to build simple prototypes with Figma (beginner-friendly, with big face examples - say whut?)

Accurate
There are two ways to learn the basics of prototyping on Figma:
- Either you learn directly from their help center, here’s the link.
- Or you learn while having fun, so stay here. 🤪
Words are sometimes not enough to express ideas, and they can often be confusing when a designer explains a transition effect to a client or a developer.
To avoid confusion, one can with prototyping put effects into motion, without the need to code them.
In this article, we’ll go over basic prototyping effects the tool Figma offers, and have fun while using those.
We won’t cover all of them, but this should give you enough ground to get started.
Table of Contents
Setup
Interaction and Animate
Smart Animate
Overflow Behavior
Starting Frame
Setup
When you first create a project, you have an empty canvas. In the Properties Panel, click on Prototype to get the Settings.

Nothing
In it, you can choose on which Device and Model you’d like to visualize the prototype. Let’s go for the iPhone SE (Device) Rose Gold (Model).
You can also select the rotation of the phone, and the background color of your prototyping page. I will stick with vertical (rotation) and black (background color).
You have to create at least one frame to launch the prototype view.

Big head is in the house
If you click on the presentation view button (play) above your command panel, this is what you get:

Keeping it simple
Now, this is useless because we only have one frame. Let’s create two, and tweak the content of the second.
Let’s connect both frames with an arrow, to establish a connection.

Beam that out
Interaction and Animate
Now that both frames are linked, let’s discover how to move with the Interaction and Animate parts.
Here is a snapshot of the multiple Interaction options, they determine how to trigger the prototype:

On tap: just click on the screen, and the animation will happen.

Click for the lasers
Shortcut: in presentation mode, press R to go back to the original frame.
On drag: you have to drag your cursor to make it happen.

Drag for the lasers
This comes with the Move In Animation, at a speed of 300ms. You can adjust those to define the Interaction.
While hovering: just hover, and keep your cursor to make the effect active.

Hover for the lasers
While Pressing: keep clicking, and the animation will appear. If you release your mouse, it will disappear.

Press for the lasers
Animation: Smart Animate
This very cool Animation creates a more sophisticated transition, let’s explore why.

The day I sink
I create a series of frames of the story I want to showcase, then select the Interaction After Delay to 1ms to have an immediate effect.

Behind the scenes
Tip: what I do to play around with prototyping is, I open both the Figma desktop app on a screen, and the prototyping view on desktop, to quickly explore options.

Always working in the dark #unhealthy
Overflow Behavior
Horizontal
This is very useful when you have items outside of your frame (or screen), and you want to show how (for example) a carousel would work or map move.
To make this happen, you must make sure to Frame the elements you want to apply the scrolling effect on. In this example, look at how I put all the items in a single frame.

On the left bar, you can see that all the items fall under the same frame
And very importantly, make sure to contain that frame within the parent frame, otherwise, the scrolling effect Overflow Behavior won’t work.
This works:

Frame within the parent frame validates the behavior
This does NOT work:

The prototype will not work
Here is the result:

Shot in the face (but in a paintball match)
Horizontal and Vertical
Now, let’s say you have a map (or other item) in your design, and want to show how the interaction would look like when you scroll within it (up, down, left, right), you can use the same Overflow Behavior but with both Horizontal and Vertical scrolling:

Eeeeeeeey stop moving fast
For your design to look neat, make sure to Clip Content, so it looks like this:

Clip your content like a hairdresser
And not like this:

Hard to work in a dirty workspace
And if you want one of your items to stay in the same position while you scroll in a prototype (like the “Imaginary Header” above), make sure to tick Fix position when scrolling:

Fix it before it disappears
Starting Frame
If you are going to have multiple interactions, you want to make sure that your Starting Frame is the correct one before you test your prototype.
Move the arrow to the correct frame:

I thought the button was useless
What’s next?
This was a very brief intro to Figma prototyping. If you liked this article, cool.
I am getting deeper into web design, so keep your eyes open on the 1st of the next month, I’ll drop some more savage stuff (responsive web dev, exploring drawing tools, etc.).
Extra: the Ultimate Prototype
Sometimes, just stick to simplicity, and do your prototyping on paper:

Hair surgery