Figma Intermediate: Advanced Prototyping

Name: Figma Intermediate: Advanced Prototyping
Author: Justin Billmeier

Learn how to create interactive prototypes in Figma

Preview the first lesson free — get full access to all 4 lessons.

Course: On-Demand

Hello, my name is Justin, and in these lessons, you will learn about prototyping and Figma. You'll learn how to use flows in your prototypes, work with interactive components, how to nest flows in presentations, and how to take advantage of remembered settings. In this lesson, we'll talk about using flows in your prototypes. By the end of the lesson, you'll know how to set up multiple flows and link them in a single presentation slide. Okay, so here is my latest design. I have a few different flows here, and I'm going to link them up as a prototype, and I'm going to start with my welcome screen, and I'm going to select my create account button and make sure that prototype is selected as the panel to the right, and I'm going to select my button and add my interaction there. On tap, navigate to that looks fine, instant is good, and I'm going to take my form fields and do an on tap to go to the next screen, and then my login button, same thing. Okay, and I'm going to click on the first screen here and add a flow starting point, and I'm going to name this login, and you'll see this edit description button here. If I can add a description for the flow, and I'll just say login steps for now, you don't have to use this, it can be helpful sometimes. Okay, and now I'm going to go to this flow, this is going to be my search flow, so I'm going to select my search button and hook that up to the search screen, and I'm going to add that there to, you can also change the name on the flow indicator right here, I'm going to call this search flow, I'm going to say search, I know it's a flow, and one more, add memory, I'll say I'm going to click the add button right there, and that'll bring that up, okay, and let's add our starting point, add memory, and I'm going to actually put descriptions in here, search, and add a description for add memory, add a new memory, okay, and I can see when I click on the background in my prototype panel, I have all the flows listed right here, that's good for reference, and you'll notice this icon next to the name of the flow, this lets me do a quick preview of this particular flow, which can be handy, so I can have a look at it this way, that looks pretty good, so you might want to do that as a quick preview, but let's click on the play button here, or present rather, and let's see what it looks like in our presentation mode, okay, if you click on the background, you can see that you have the option of putting in some device hardware, basically, on the design, so you don't have to do that, you can do that, I did it for this one, and we look at our prototype presentation, okay, we have the login flow, and I can see the description right here, login steps, search, search for a memory, and add a memory, so everything is right here, so that's a nice way to navigate through multiple flows, and let's also look at one more thing, on the prototype panel on the right, when I look through the names of my flows here, you'll see I have a cross hairs that will allow me to select a frame and make that the starting frame, there's also a link icon where I can get a link to the beginning of just that flow, and that can be helpful if you want to link to different flows within a presentation, so let's do that quickly, I'll copy the link for the login flow, and I see that it's copied, let me jump up here to my presentation screen, and I'm going to select the text I want to, and do a command K to link it, okay, and I'm going to paste the URL into that one, and I'm going to go back and grab the others, search command K and the URL, and let's do the last one, add memory, copied, select my presentation slide, and memory command K, there it is, so now this is its own flow for presentation, so I'm just going to call this, I'm just going to call this presentation, and let's open up this presentation, okay, and I can see here that I can now jump to the flows from within that presentation, so that can be helpful when sharing ideas with your team, okay, in our next lesson we'll look at animations and components, thanks for watching.

Intermediate Provider : Justin Billmeier 4 Lessons · 21m in English

Course Description

With Figma, it’s easy to build prototypes of your user experience and user interface designs. Over these lessons, we’ll go over some user-friendly features you can use to create interactive flows in Figma that can quickly turn a static design into a realistic version of a proposed website or product. Prototypes also allow you to see how new user flows will work, which gives you a better idea of the user experience and makes it easier to discover design defects and fix them. You can also communicate interactions with your team, get feedback from users, and show designs to stakeholders for buy-in.

In this KnowledgeCity course on Figma Intermediate: Advanced Prototyping, you’ll learn how to create interactive prototypes in Figma. We’ll discuss how to add animations to your prototypes and how to nest your prototypes within your presentations. You’ll also learn how to share your prototype with nested settings.

What You'll Learn

Describe what prototyping is and how prototypes work in Figma
Create interactive prototypes in Figma
Add animations to your prototypes
Nest prototypes within presentations
Share prototypes with remembered (nested) settings
Use flows as guides to build interactive prototypes

Key Takeaways

Figma makes it easy to build prototypes of user experience and user interface designs.
Interactive flows in Figma can quickly turn a static design into a realistic version of a proposed website or product.
Prototypes let you see how new user flows will work, making it easier to discover and fix design defects.
Prototypes help you communicate interactions with your team, gather user feedback, and show designs to stakeholders for buy-in.
This course covers adding animations to prototypes and nesting prototypes within presentations.

Frequently Asked Questions

What will I learn in this course?

You'll learn how to create interactive prototypes in Figma, add animations to your prototypes, nest your prototypes within your presentations, and share your prototype with nested settings.

What topics do the lessons cover?

The lessons cover using flows as guides, animations and components, nesting prototypes in presentations, and sharing prototypes with remembered settings.

Why are prototypes useful?

Prototypes let you see how new user flows will work, giving a better idea of the user experience and making it easier to discover and fix design defects. They also help you communicate interactions with your team, get feedback from users, and show designs to stakeholders for buy-in.

What level is this Figma course?

It is an intermediate course focused on advanced prototyping, teaching how to create interactive prototypes, add animations, and nest prototypes in presentations.