FD4B: Prototyping fundamentals

Lesson overview

In this lesson, we’ll learn how to turn our static portfolio design into an interactive prototype that feels like a real website. Along the way, we’ll preview our prototype to test our interactions.

Prototyping fundamentals

As you design websites and apps, it’s important to think about the experiences you’re designing, too. Prototyping brings static screens to life and puts yourself in the shoes of the end user.

Prototyping can happen at any point in the design process. Make them early to test ideas and get feedback. Or wait until your designs are more polished to add animations and interactions that feel like the real thing.

No matter when you make prototypes, you’re sure to learn something from testing them yourself, or by sharing them with others for feedback.

Figma Design has many prototyping features, and multiple ways to present and test them—including the Figma mobile app where you can interact with prototypes directly on your devices. We won’t be covering every prototyping feature, but you’ll learn plenty to get started.

Prototyping terminology

In Figma Design, prototyping is a set of features, settings, and properties that define how parts of your designs behave when people interact with them. Let’s break down a few of the basics.

Flows

Prototypes are made up of Flows. These flows describe the journeys people can take through a design, usually across multiple screens—like a sign up flow, or a checkout flow.

We can think of each flow separately, like these two, or you can make a single flow for your entire design.

Every flow has a starting point, marked with a blue preview icon with the flow’s name, and a preview icon we can use to open the flow in the inline preview.

A starting point is attached to a top level frame, and can be moved to another frame by clicking and dragging the label. Learn more about prototype flows.

Interactions

All prototypes are made up of interactions. Interactions are rules we set for how your prototype will respond to user inputs. Learn more about interactions.

They are made of a few smaller parts. A trigger, an action, and an animation.

Triggers

A trigger is what causes an interaction to begin, like when someone:

• hovers a mouse over an object, like an image or button
• Clicks or taps on an element, like a button, or a link.
• Presses a key on a keyboard, or a game controller.
• Or after a specific amount of time has passed.

Learn more about prototype triggers.

Actions

Next up, Actions. An action is the result of a trigger, and include things like:

• Opening an external link in a browser

• Opening an overlay, which is a frame that appears above the current frame.

• Scrolling to an area of a page

• Showing or hiding elements of your designs

• Changing a component to a new state

• Doing something after a specified time has passed

• Or perhaps most commonly, navigating from one frame, or screen, to another one. We call this type of navigation a connection, which we’ll talk more about in a minute.

Learn more about prototype actions.

Animations

The third part is animation, which defines how different properties, or objects, animate over time. This could include how:

• A page or menu pushes in from one direction, or leaves by moving another direction

• Opacity changes while hovering

• Or how a page scrolls from the bottom of a page, to the top over time.

Learn more about prototype animations.

Connections

Connections are used to string together frames and assets into a logical navigation flow for your prototype. We can identify connections by the blue arrows on the canvas, which we sometimes call “noodles.”

Once you create the first connection between two objects, you also set the start of a flow.

A connection starts with a hotspot—where a user performs a trigger like clicking their mouse—and ends with the destination, which is usually a top level frame, since most connections navigate between screens of your design.

Learn more about prototype connections.

Check your knowledge