Grace Ng

work

about

resume

Figma Presentation Mode

adding a feature to Figma to enhance its presentation capabilities

Role

Sole UX designer

Timeline

2 weeks

Tools

Figma, Figjam

Summary

The problem

Figma is being used more and more for decks by designers, but is still not the preferred platform for presentations despite its customization features.

The solution

Adding presentation mode to Figma that allows for hidden speaker notes to make it a stronger competitor in the presentation tool market.

Background

Figma is a design tool that allows designers to collaborate and create user interfaces.

However, it has grown in popularity for not only developing UI designs, but also graphics, decks, and even interactive games.

In fact, there are 100+ deck templates in the Figma Community — some with 3k+ duplicates.

This suggests that more and more designers are using Figma for their slideshow presentations. I’ve seen firsthand Figma be used in this capacity during many workshops and events. However, Figma wasn’t originally built for this, indicating that there is room for growth.

How might we improve Figma's presentation capabilities?

User research

Identifying what could be improved

To begin, I did a competitive analysis of different presentation software to see any similarities in features and what could make them stand out from Figma itself.

Competitive analysis

Two traits that all these products share are templates and presentation mode. Since templates can be accessed and duplicated in the Figma Community, I hypothesized that adding a presentation mode feature to Figma could be beneficial to current users.

I then conducted a survey to validate my hypothesis and assess any additional challenges people encounter when using Figma to create and present decks. I decided to perform a survey to reach a larger audience and get as many perspectives as possible since designers leverage Figma in a variety of ways. I also wanted to receive some quantitative data from a larger sample. My survey had 27 participants.

I discovered that many users like to use Figma to create decks since it’s easy to customize and convenient to copy and paste design work between files.

However, as predicted, the presentation aspect of Figma is lacking.

55.6%

said they do not prefer to use Figma for presentations

due to lack of a presenter mode with speaker notes.

33.3%

use another application to help them present with Figma

such as Notes to write down their speaker notes.

With my hypothesis validated and backed by user data, I concluded that a presentation mode could be a game changer for Figma.

Since there are a wide variety of users for Figma, I created this user persona to narrow the focus on somebody who uses Figma primarily for slideshow presentations.

Meticulous Manager user persona

Ideation

Envisioning presentation mode

To visualize how presentation mode could be integrated into Figma’s UI, I thought about how the Meticulous Manager may navigate through Figma to add her speaker notes.

Adding speaker notes + presenting flow

As seen in the task flow, to add speaker notes to a frame, I thought it was the most intuitive to place that button in the Prototype tab in the right panel as the speaker notes window would only be displayed when the play button is pressed.

Taking inspiration from Google Slides and how certain plugin modals look, I ideated and iterated upon what Figma’s speaker notes window could look like.

Speaker notes window mid-fidelity wireframes

To help me decide which iteration to move forward with, I asked other designers for their feedback. They preferred the second variation as it minimizes the real estate needed to travel to change slides, which is helpful during a presentation when your focus needs to be elsewhere.

I also brainstormed a couple different ways for speaker notes to appear beneath the frame/slide, from only having speaker notes live in the Prototype tab to something that looks similar to Sections.

Speaker notes in workspace mid-fidelity wireframes

Usability testing

Testing the concept

After creating the high-fidelity mockups and prototype, I used Maze to conduct unmoderated usability testing and determine the intuitiveness of this new feature. The tasks I tested were:

Adding speaker notes
Presenting your deck
Jumping to another slide

87.5% of users had direct or indirect success on the tasks with a low misclick rate. A majority of users found the new feature to be straightforward and useful as “it feels like it should already be on Figma.”

Usability testing

However, some key pain points were:

Distinguishing text

For some users, it was “hard to distinguish between speaker notes and text that should be included” in the frame.

Visual hierarchy in window

Some users suggested “adding more depth or borders to give users breakpoints of where to look when reading the notes.”

1. Distinguishing text

To differentiate between speaker notes and regular text:

Added a “Speaker notes” label

Made the container for speaker notes look like an extension of the frame

2. Visual hierarchy in window

To add more depth to the speaker notes window:

Added a “Speaker notes” label

Outlined the text container for speaker notes

Addressing user feedback

Here are some before and afters of the priority revisions I made.

Iteration

Addressing user feedback

Here are some before and afters of the priority revisions I made.

1. Distinguishing text

To differentiate between speaker notes and regular text:

Added a “Speaker notes” label

Made the container for speaker notes look like an extension of the frame

2. Visual hierarchy in window

To add more depth to the speaker notes window:

Added a “Speaker notes” label

Outlined the text container for speaker notes

Final solution

Introducing presentation mode for Figma

Here's a video of the prototype or click here to play with the prototype yourself!

In the Prototype tab on the right panel, users would be able to add speaker notes to their slide and make edits there or in the attached text box as necessary.

When a user clicks the play button, they would see the typical screen of the prototype of their deck that they can screen share and have a private speaker notes window. The user can read off their script and move or skip to different slides from here.

With the addition of a presentation mode in Figma, this could make it easier for designers everywhere to present their work within the platform that they use on a daily basis already. This would hopefully not only make Figma every designer's go-to design tool, but also their go-to presentation tool.

Reflection

My takeaways

What challenged me?

Trying to replicate Figma’s UI and following their conventions in my new design was tedious work, but it’s great practice for refining my UI skills and building my own library on design patterns.

What are some potential next steps?

I would like to do some moderated usability testing to ascertain if the speaker notes text is distinguished enough from regular text that would be added to the slide. I would also like to expand on this concept to see if there’s a use case of adding speaker notes to mobile/web mockups to help designers present their prototypes.

Figma has given me the resources to be a better designer. This was a fun, enlightening add a feature project that made me be more critical of a product that I use on the daily.

<- Previous case study