Figma Beginner: Prototyping & Sharing Your Designs

Name: Figma Beginner: Prototyping & Sharing Your Designs
Author: Justin Billmeier

Bring Your Designs to Life: Learn Prototyping and Sharing in Figma

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

Course: On-Demand

Hello, my name is Justin, and in these lessons you will learn all about prototyping with Figma. We'll learn how to create a clickable prototype from a design and share it with collaborators. In this lesson, we'll dive into setting up your prototype. By the end of the lesson, you'll know how to create and set interactions. Now prototyping is one of the things that makes Figma so great because you can do everything in one place. You can create your design, you can create a prototype out of that design and share it with internal stakeholders or even people outside of your organization. Prototypes or you could call them presentations, they are great for user task flows that you want to put in front of users for usability testing, or you can even use it just to create presentation decks as an alternative to Google Slides with a lot more flexibility. Let's look at our design flow, very simple checkout flow. If I click on prototype, I see that I can choose a device, right now none is selected. What this will do is it will simulate the actual hardware, so if you have your design set up properly for an iPhone 14, it will show up nicely inside the iPhone 14 in the prototype. We don't need to do that for this, it's just a web design, I'm going to click none. Background is the color that you'll see outside of your design in the presentation if your page doesn't fill the entire space. You can add an interaction to any design element that you have. The element that I want to add an interaction to is this button right here, which is my View Ceiling Lamps button, and I'm going to link that to the Ceiling Lamps page. When I do that, I see Interaction Details. I can see that we have the type of interaction that I'm adding that it defaults to, which is on click, the behavior which is telling us what it's going to do, and the destination. It's going to navigate to the product page. The animation style is going to be instant, which is instant. There are some other things that we will look at, but not at the moment. So I'm going to add that interaction, and let me add a few more connections here. I also want the same connection to be for the image, so I'm going to drag that over, and I'm going to have the logo go back to the home page, and I'm going to have add all, add everything to the cart. If I want to go back to see the details of the interaction, I can just click on one of these lines and go back and make an adjustment. I could also delete an interaction by selecting one of these lines and just deleting it, and of course you could delete it here as well. Another thing you may notice in the panel here is Scroll Behavior, where you can have scrolling with parent versus no scrolling. These are some options that you'll play with as you start to create your own prototypes. And Figma makes it easy to move connections around. In fact, you could take two connections and move them at the same time. If I just select both, I could have them go here instead. Now for top level frames, you'll see something added here called Flow starting point. This is something you don't need if you only have one flow, but if you have multiple flows that will come in very handy, I'm going to add this anyway, just so it's very clear to me where to start this. It also gives me another button to launch the presentation from here as a flow. We've learned how to add connections to our prototype. In our next lesson, we'll work more with interaction details. Thanks for watching.

Beginner Provider : Justin Billmeier 3 Lessons · 13m in English

Course Description

Prototyping is a critical step in the design process. It allows for interactive user testing and feedback collection before final implementation. It also helps identify potential design issues early, saving time and resources. Figma's sharing capabilities facilitate collaboration, making it easy to gather input from team members, stakeholders, and clients. Getting early feedback will ultimately lead to better design outcomes and higher levels of productivity.

In these lessons, you will learn the necessary skills to build interactive prototypes and share them within Figma. We’ll explore the creation of simple interactions and the connection of screens for a cohesive user experience. We’ll also go through the process of previewing and testing your design. Key areas of focus include interaction setup, understanding prototype settings, and managing interaction details. Upon completion of these lessons, you'll have the ability to create interactive prototypes, connect design elements seamlessly, preview your prototypes, and share them with collaborators.

What You'll Learn

Build interactive prototypes in Figma from your designs
Create simple interactions and set up your prototype
Connect screens and design elements, including different interaction types and animations
Preview and present your prototype in Figma's present mode
Share your prototype with collaborators for feedback

Key Takeaways

Prototyping enables interactive user testing and feedback collection before final implementation.
Prototyping helps identify potential design issues early, saving time and resources.
Figma's sharing capabilities make it easy to gather input from team members, stakeholders, and clients.
Getting early feedback leads to better design outcomes and higher productivity.
Key areas of focus include interaction setup, prototype settings, and managing interaction details.

Frequently Asked Questions

What will I be able to do after completing these lessons?

You'll be able to create interactive prototypes, connect design elements seamlessly, preview your prototypes, and share them with collaborators.

What topics do these lessons cover?

The lessons cover creating simple interactions, connecting screens and elements, and previewing, testing, and sharing your prototype, with focus on interaction setup, prototype settings, and managing interaction details.

Why is prototyping important in the design process?

Prototyping allows for interactive user testing and feedback collection before final implementation, and helps identify potential design issues early, saving time and resources.

How does Figma support collaboration on prototypes?

Figma's sharing capabilities make it easy to gather input from team members, stakeholders, and clients, and you can navigate your prototype in present mode and share it with collaborators.

What skills will I gain from these lessons?

You will gain skills in clickable prototypes, Figma design software, prototyping, software prototyping, and user interface prototyping.