Figma Slides

Context

What

Figma's third flagship product—a storytelling and presentation app, designed to make use of everything Figma has to offer.

Why

Designers were already using Figma for presentations, but we knew we could make a focused experience that allowed anyone to contribute to the process.

Who

I lead content, writing, & template design, along with 2 AI features. Team included 2 designers (Keeyen Yeo, Jakub Swiadek), 1 PM (Mihika Kapoor), and a bevy of top-notch engineers.

When

Built over the course of ~6 months, from December '23 – June '24, with a beta that launched at Config.

Results

Slides briefly fizzled after initial buzz, but bounced back to become part of a package (coupled with FigJam) that drove big contracts with non-designers.

Toolkit

Composition

Figma
Figma Slides
Warp

Workflow

GitHub
Asana
Slack

Specs & Details

Core IA

Figma Slides was designed to take advantage of everything Figma already does well—creation tools, components, design systems—while providing the structure and organization of a traditional presentation tool. The simpler, default Slides mode makes it easy for anyone to create a deck, with Design mode on click away for the designers in the room.

A single slide open for focused design — **Single Slide + Grid Views:** Slides is grounded in two views—one for focused design and creation, and another for outlining and organization. The combo of the two makes it easy to switch mental modes as needed.

The grid view, for outlining and reordering a deck — **Single Slide + Grid Views:** Slides is grounded in two views—one for focused design and creation, and another for outlining and organization. The combo of the two makes it easy to switch mental modes as needed.

**Slides + Design Modes:** To cater to both designers and their teammates, we added two different creation modes—a simpler, default set of tools, and Figma's classic, powerful design tooling.

The Slides toolbar — **Toolbelt:** The new Slides toolkit borrowed and built on FigJam's success, simplifying Figma's classic tools for a broader audience. Default type styles, smart shapes and connectors, and more.

**Toolbelt:** The new Slides toolkit borrowed and built on FigJam's success, simplifying Figma's classic tools for a broader audience. Default type styles, smart shapes and connectors, and more.

The presenter window, with notes and deck controls — **Presentation:** To formalize the presentation process—something we knew designers struggled with in Figma Design—we gave presenters two windows: one to control the preso and view their notes, and one to display the deck itself.

The audience window, showing the deck alone — **Presentation:** To formalize the presentation process—something we knew designers struggled with in Figma Design—we gave presenters two windows: one to control the preso and view their notes, and one to display the deck itself.

AI Features

As part of the beta launch, we added two novel AI features—both exclusive to Slides, at the time—to help folks craft exactly what they wanted. Both were later patented by Figma, and were designed by Natasha Tenggoro and yours truly.

The Adjust tone panel and its two-axis dial — **Tone Dial:** We created a novel interaction model for editing text with AI, letting users drag a handle across two axes to find the tone and length they wanted. I drummed up the content framework and polished prompt details.

Picking a FigJam board to summarize into a deck — **Board to Deck:** Instead of starting cold, we let users pick a FigJam board to use as an outline for their deck. We optimized a few of our templates for this specific use case, to make sure the output was always crispy.

The generated outline, laid into a template — **Board to Deck:** Instead of starting cold, we let users pick a FigJam board to use as an outline for their deck. We optimized a few of our templates for this specific use case, to make sure the output was always crispy.

Templates

To make the tool as accessible as possible, we hand-crafted 20 templates to use as jumping-off points. We worked with an agency on initial design and direction, and I produced the final bits—layout, styles, variables, content, naming, etc.

Placeholder content guiding how to use a template — **Content Strategy:** I used placeholder content in each template to provide guidance around how to use them, with varied voice and tone to match the vibe of the deck.

A template's voice matched to its visual style — **Content Strategy:** I used placeholder content in each template to provide guidance around how to use them, with varied voice and tone to match the vibe of the deck.

Picking a template when creating a new deck — **Template Selection:** When creating a new file, you can pick a template to start with. You can also pick individual slides from any template at any time, so you can evolve your deck as you go.

Pulling individual slides from any template — **Template Selection:** When creating a new file, you can pick a template to start with. You can also pick individual slides from any template at any time, so you can evolve your deck as you go.

Publishing a template to a team or to community — **Team & Community Templates:** We later added the ability to publish templates to your internal org and to community, dramatically increasing adoption of the feature across the board.