moon indicating light mode
sun indicating light mode

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

Self-drawing of Omar in the prototype world.
Accurate

There are two ways to learn the basics of prototyping on Figma:

  1. Either you learn directly from their help center, here’s the link.
  2. 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.

Blank canvas on Figma.
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 <e/m>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.
Big head is in the house

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

Picture of Omar in a prototype.
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.

Picture of Omar with laser beams from his eyes.
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:

Options for Interaction on Figma

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

On Click interaction on Figma.
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 interaction on Figma.
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 interaction on Figma.
Hover for the lasers

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

Pressing interaction on Figma.
Press for the lasers

Animation: Smart Animate

This very cool Animation creates a more sophisticated transition, let’s explore why.

Smart Animate on Figma.
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.

Lay out the groundwork for Smart Animate on Figma
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.

Working in the darkness
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.

Horizontal overflow behavior in Figma
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:

Important to make the overflow behavior work with the frames.
Frame within the parent frame validates the behavior

This does NOT work:

If you don't keep the frames in the parent frame, the overflow behavior will not work
The prototype will not work

Here is the result:

Valid overflow behavior in Figma
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:

Horizontal and vertical overflow behavior in Figma
Eeeeeeeey stop moving fast

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

Clip your content on Figma to keep your canvas clean
Clip your content like a hairdresser

And not like this:

Clip your content on Figma to keep your canvas clean otherwise it's messy
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 your content on Figma so it scrolls well
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:

Fix the play button on Figma
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:

Prototype on paper is sometimes a good option
Hair surgery