How To Use Figma Prototypes For Presentations

Figma prototypes are useful when designing a product. Prototypes are critical to get feedback from stakeholders. There are a wide range of tools which help create, edit, share and present prototypes. Adobe XD, Sketch, Figma, Invision and MarvelApp are some of them. 

In this article, we especially focused on using Figma for presenting prototypes. Figma is a relatively new app with a lot of functionalities that enable you to design any type of design. Figma has tools for prototyping, designing, collaborating and sharing. In 2017, the tool rapidly gained popularity among UX/UI specialists thanks to its simple interface and capabilities that some other prototyping tools do not have.

Figma is a web-based design tool that offers something to all professions. What makes Figma important is its collaborative nature. Engineers, developers, designers can work together on prototypes dynamically by using Figma.

It’s a great and user-friendly tool that allows you to design wireframes, high fidelity mockups and prototypes. In fact, within a few minutes, you can implement your ideas into ready to present product designs.

What is Figma?

Figma is a web based design platform which makes it possible to design collaboratively. Since it’s also a cloud based tool, you can work with almost any browser or device, from everywhere. It’s an online tool so you and the team may all log into a design at the same time and make changes to it.

And because these designs are all kept online, you never have to worry about any team members falling out of sync with the project. The most recent modifications are always included in the file, and you don’t have to bother about moving files between team members or pushing documents to and from any third-party storage site.

Figma’s features include real-time collaboration, flawless and more inclusive design processes, the ease of moving code from the design, and the flexibility of constructing design systems. 

Using Figma for product design is ideal if you haven’t created the full design yet. Since Figma allows designers  and the collaborators to work together seamlessly at any stage of the project lifecycle, it’s great for getting feedback about design before making all the effort for something not certain. Regardless of the point you are in the product cycle, you can create prototypes that look just like the final product to communicate better with colleagues and stakeholders. 

What is Prototyping?

If you’re not familiar with the concept of a prototype, here’s a great explanation by Jeff Gothelf, author of Lean UX:

Even the most high-fidelity mockups are only meant to be concrete representations of ideas, not the end result. When stakeholders see and interact with an interactive prototype, they can experience firsthand how interacting with the product might feel.

Jeff Gothelf

The fundamental difference between prototypes and other showcase ways like wireframes and mockups can be summarized as functionality.

Prototypes allow stakeholders and developers to experience the experience, by adding some functionality to design. 

How To Use Figma Prototypes For Presenting Your Design? 

Reaching a common understanding of product and design is one of the most critical parts of success and happiness. There are a variety of ways to get constant feedback and align mindsets. Presenting prototypes they can interact with is one of them.

You can use Figma to create and present prototypes. The effectiveness comes from how similar it is to the real product. Figma makes it easy to create and interact with prototypes. When stakeholders interact with live prototypes, they are more likely to generate meaningful feedback. 

You can connect frames together and deliver triggers by prototyping in Figma. To increase fidelity, you can create transitional images. Here is a prototyping flow: 

1. Activate the prototype bar.
2. Create your own prototype interactions.
3. Choose elements.
4. Select animation.
5. Customize the starting frame.
6. Join elements together by connecting them to the same frame.
7. Preview.

3 Tips for Presentations

To present your prototype to the stakeholders, Figma offers presentation view. You can choose whether to share the prototype by email, or through link, with either the private link or public link. It is also possible to share the file with your clients for reviews and feedback. 

Although Figma made presentations very easy, there are still some tips you can follow. We list 3 tips to consider when you present your prototypes; finding specific devices, finding your perfect scale and full screen mode. 

1. Find Specific Devices

If your prototypes are made for specific devices, you have a list of options to view your frames within these devices. You can even choose the device colors. Alpine Green of iPhone 13 Pro is among colors yet. Waiting for Figma to notice that.🙄 

With this feature, your prototypes get closer to the end result. It’s enough to choose devices you aimed like these screenshots:

2. Find Your Perfect Scale

Screen sizes are very important to reflect the end-result’s feeling in the prototyping level. Figma allows you to change artboard size. If the artboard size is not the same with the screen of your presentation device, you’ll need to scale the prototype. 

There are some options to scale; fit to screen, fit width, actual size. One of them should work just fine for your case. 

3. Stay in Zen Mode: Full Screen

Lastly, it is important to keep the focus on what you’re presenting, right? There is an expand button in the top-right corner of the presentation view. Click to the button to remove all disturbing elements from the screen. 

If you’ll jump to other prototype flows, all of them are listed on the left sidebar. You can create for Desktop, Tablet and Mobile flows for example.

To sum, 

Figma has advanced prototyping and collaboration features that can bring your project to the next level. You can do more than just showcase ideas, you can be sure that your colleagues and clients will see what you meant to illustrate.

This post also available as story!