Building Figma Slides with Noah Finer and Jonathan Kaufman

Listen to this episode from The Pragmatic Engineer on Spotify. 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!—Brought to you by:• Graphite — The AI developer productivity platform. • Sonar —  Code quality and code security for ALL code. • Chronosphere — The observability platform built for control.—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⁠⁠⁠—Where to find Jonathan Kaufman:• X: https://x.com/kauffecup• LinkedIn: https://www.linkedin.com/in/jkaufman5/• Website: https://www.jkaufman.io/Where to find Noah Finer: • X: https://x.com/finerflame• LinkedIn: https://www.linkedin.com/in/noahfiner/• Website: https://noahfiner.com/—In this episode, we cover:(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—See the transcript and other references from the episode at⁠⁠⁠⁠⁠⁠⁠⁠⁠⁠⁠⁠⁠ https://newsletter.pragmaticengineer.com/podcast⁠⁠⁠⁠⁠⁠⁠⁠⁠⁠