Learn how to build simple prototypes with Figma (beginner-friendly, with big face examples - say whut?)
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.
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.
If you click on the presentation view button (play) above your command panel, this is what you get:
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.
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:
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.
Animation: Smart Animate
This very cool Animation creates a more sophisticated transition, let’s explore why.
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.
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.
And very importantly, make sure to contain that frame within the parent frame, otherwise, the scrolling effect Overflow Behavior won’t work.
This works:
This does NOT work:
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:
For your design to look neat, make sure to Clip Content, so it looks like this:
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:
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:
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:
