Building Figma Slides with Noah Finer and Jonathan Kaufman

Key takeaways

Figma Slides was born out of a hackathon idea, quickly evolving into a widely used product within just one and a half years.
The engineering challenges in creating a robust and interactive UI, such as single slide view, involve substantial technical depth, utilizing C++ and TypeScript.
Collaborative features are central to Figma Slides, allowing seamless real-time edits across users through competent server-based multiplayer functionalities.
Effective testing and quality assurance practices are crucial, backed by rigorous methodologies including feature flag testing and user ‘vibe’ feedback.
The structured rollout process with feature flags helps manage new features effectively while minimizing disruptions for users.

Summary

The Genesis of Figma Slides

Figma Slides is a product that originated from a hackathon project and has rapidly evolved from concept to a developed product within a year and a half. The conversation highlights how the idea was transformed into a working product used to create over 4.5 million slide decks. The engineers, Noah Finer and Jonathan Kaufman, discuss the initial brainstorming phase, building the project primarily on a grid view to create an interactive platform before launching a single slide view.

Engineering Complexities and Innovations

Building a platform that seemingly operates on a simple UI, like the single slide view in Figma Slides, involved tackling complex architectural considerations. The engineers detailed how Figma uses a tech stack comprising C++ and TypeScript to achieve smooth functionality, the challenges of integrating features while maintaining quality across different environments, and how the team is able to execute complex features using innovative methods like a unique two-way navigation system.

Multiplayer and Collaborative Features

One of the defining characteristics of Figma Slides is its collaborative capabilities, including multiplayer editing. The engineers elaborate on how multiplayer cursors are implemented and how changes made by one user are reflected across the platform. They discuss the technical underpinnings, involving server connections and conflict resolutions, and what it takes to maintain a seamless experience for multiple collaborators editing at once.

Testing and Quality Assurance Methodologies

The team highlights their dedication to maintaining high product quality through rigorous testing methodologies. They address their zero-bug policy and how they employ a comprehensive testing strategy that includes rolling all feature flags on and off during unit tests to catch potential regressions. They also share insights into ‘vibe testing,’ through which they gauge user feelings about UI elements, and the internal crit process used to refine features.

Release Process and Feature Flags

When it comes to deploying new features or fixing bugs, the Figma team takes a meticulous approach. They utilize feature flags to manage the release of product features, ensuring new changes don’t disrupt users. The pod discusses the importance of feedback loops from internal testers before a more extensive rollout, as well as the integration of user feedback into continuous product improvements.

Show notes

Supported by Our Partners

• Graphite — The AI developer productivity platform.

• Sonar — Code quality and code security for ALL code.

• Chronosphere — The observability platform built for control.

—

How do you take a new product idea, and turn it into a successful product? Figma Slides started as a hackathon project a year and a half ago – and today it’s a full-on product, with more than 4.5M slide decks created by users. I’m joined by two founding engineers on this project: Jonathan Kaufman and Noah Finer.

In our chat, Jonathan and Noah pull back the curtain on what it took to build Figma Slides. They share engineering challenges faced, interesting engineering practices utilized, and what it's like working on a product used by millions of designers worldwide.

We talk about:

• An overview of Figma Slides

• The tech stack behind Figma Slides

• Why the engineering team built grid view before single slide view

• How Figma ensures that all Figma files look the same across browsers

• Figma’s "vibe testing" approach

• How beta testing helped experiment more

• The “all flags on”, “all flags off” testing approach

• Engineering crits at Figma

• And much more!

—

Timestamps

(00:00) Intro

(01:45) An overview of Figma Slides and the first steps in building it

(06:41) Why Figma built grid view before single slide view

(10:00) The next steps of building UI after grid view

(12:10) The team structure and size of the Figma Slides team

(14:14) The tech stack behind Figma Slides

(15:31) How Figma uses C++ with bindings

(17:43) The Chrome debugging extension used for C++ and WebAssembly

(21:02) An example of how Noah used the debugging tool

(22:18) Challenges in building Figma Slides

(23:15) An explanation of multiplayer cursors

(26:15) Figma’s philosophy of building interconnected products—and the code behind them

(28:22) An example of a different mouse behavior in Figma

(33:00) Technical challenges in developing single slide view

(35:10) Challenges faced in single-slide view while maintaining multiplayer compatibility

(40:00) The types of testing used on Figma Slides

(43:42) Figma’s zero bug policy

(45:30) The release process, and how engineering uses feature flags

(48:40) How Figma tests Slides with feature flags enabled and then disabled

(51:35) An explanation of eng crits at Figma

(54:53) Rapid fire round

—

The Pragmatic Engineer deepdives relevant for this episode:

• Inside Figma’s engineering culture

• Quality Assurance across the tech industry

• Shipping to production

• Design-first software engineering

—

See the transcript and other references from the episode at ⁠⁠https://newsletter.pragmaticengineer.com/podcast⁠⁠

—

Production and marketing by ⁠⁠⁠⁠⁠⁠⁠⁠https://penname.co/⁠⁠⁠⁠⁠⁠⁠⁠. For inquiries about sponsoring the podcast, email podcast@pragmaticengineer.com.

Get full access to The Pragmatic Engineer at newsletter.pragmaticengineer.com/subscribe