Building Figma Slides with Noah Finer and Jonathan Kaufman
Building Figma Slides with Noah Finer and Jonathan KaufmanFigma engineers Jonathan Kaufman and Noah Finer share how they built Figma Slides from a hackathon project into a polished product, covering key engineering decisions, challenges, and practices.
Stream the Latest EpisodeListen and watch now on YouTube, Spotify and Apple. See the episode transcript at the top of this page, and a summary at the bottom. Brought to You By
— In This EpisodeHow 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:
TakeawaysMy biggest takeaways from this conversation: 1. Figma’s web app uses a surprising amount of C++ code. It’s rare for web engineers to need to use C++ — but Figma is an exception, as the design tool built their own rendering engine. This means that frontend engineers need to get into the opinionated C++ codebase to make changes — though rewriting some parts of the code to TypeScript is currently on the way. 2. The “EngCrit” process is an interesting — and unique! — one. Figma’s engineering reviews/discussions are called EngCrit. An engineer presents their plan or idea in a FigJam board, and other engineers join in to give their feedback. This process has parallels with the RFC or design doc process — but it feels a lot more lightweight. Plus, it dogfoods Figma’s own products! 3. Some of the most straightforward UI parts are the most involved ones. It was interesting to learn that one of the most complicated pieces of the web app was the Single Slide View. This seemingly simple interface: The reason for the complexity was how this view is actually a zoomed in version of the grid view — this one: There are several reasons that the team decided to do this “zoomed in trick:” one of them is that when multiple people are editing a slide, zooming in means that the cursors for these other users show up both on the slide view and on the grid view. This detail is a good reminder that a simple UI can hide a complex implementation. The Pragmatic Engineer deepdives relevant for this episodeTimestamps(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 A summary of the conversationInitial development
Tech stack and tools
Engineering practices
Engineering challenges
Where to find Jonathan Kaufman: • LinkedIn: https://www.linkedin.com/in/jkaufman5/ • Website: https://www.jkaufman.io/ Where to find Noah Finer: • LinkedIn: https://www.linkedin.com/in/noahfiner/ • Website: https://noahfiner.com/ Mentions during the episode: • Figma: https://www.figma.com/ • Figma Slides: https://www.figma.com/slides/ • Config: https://config.figma.com/ • FigJam: https://www.figma.com/figjam/ • C++: https://en.wikipedia.org/wiki/C%2B%2B • Typescript: https://www.typescriptlang.org/ • React: https://react.dev/ • Debug C/C++ WebAssembly: https://developer.chrome.com/docs/devtools/wasm • Xcode: https://developer.apple.com/xcode/ • Multiplayer cursors: https://www.figma.com/community/file/1267761575266415196/multiplayer-cursors • How Figma’s multiplayer technology works: https://www.figma.com/blog/how-figmas-multiplayer-technology-works/ • Design-first software engineering: Craft – with Balint Orosz: https://newsletter.pragmaticengineer.com/p/design-first-software-engineering • Reconciliation: https://legacy.reactjs.org/docs/reconciliation.html • Inside Figma’s Engineering Culture: https://newsletter.pragmaticengineer.com/p/inside-figmas-engineering-culture • How we engineer feedback at Figma with eng crits: https://www.figma.com/blog/how-we-run-eng-crits-at-figma/ • Nextjs: https://nextjs.org/ • Hacker News: https://news.ycombinator.com/ • Refactoring UI: https://www.refactoringui.com/ • Tailwind: https://tailwindcss.com/ • Adam Wathan’s website: https://adamwathan.me/ • Steve Schoger’s website: https://www.steveschoger.com/ • Piranesi: https://www.amazon.com/Piranesi-Susanna-Clarke/dp/1635577802/ • Immune: A Journey into the Mysterious System That Keeps You Alive: https://www.amazon.com/Immune-Kurzgesagt-gorgeously-illustrated-immune/dp/1529360684 — Production and marketing by Pen Name. For inquiries about sponsoring the podcast, email podcast@pragmaticengineer.com. You’re on the free list for The Pragmatic Engineer. For the full experience, become a paying subscriber. Many readers expense this newsletter within their company’s training/learning/development budget. This post is public, so feel free to share and forward it. If you enjoyed this post, you might enjoy my book, The Software Engineer's Guidebook. Here is what Tanya Reilly, senior principal engineer and author of The Staff Engineer's Path said about it:
|
Comments
Post a Comment