![[images/The Ridiculous Engineering Of Figma (ft. Figma Team).webp]] **Creator:** Enrico Tartarotti · **Published:** 2026-06-09 · **Length:** 30:12 · [Watch on YouTube](https://www.youtube.com/watch?v=5t8dh3DSdBk) > *Special thanks to the Figma team for letting me spend the day interviewing their team and share the genius ways they've simplified a powerful tool into something anyone can use.* (from the video description) Part of Enrico's behind-the-scenes series on how great products are built, with the people who build them. The companion episode is [The Ridiculous Engineering Of Notion](https://www.youtube.com/watch?v=b00sgRR_Vc0). ## 1) Detailed outline ### [0:00] Intro: why does Figma look so simple? - Cold open with clips from the interviews: copy-paste placement rules, undoing a misclicked selection ("that was worth undoing"), and the "which layer moves when I drag?" puzzle. - Figma looks "almost simpler than Paint," yet most of the tech of the last 10 years was designed in it and it became the default design tool for everything. - Enrico's thesis: behind every seemingly simple product sits a huge amount of design, engineering and psychology. He flew to **San Francisco** and "locked himself in a room" with the people who built it. They showed their design files, the versions that didn't ship, the ones that failed, and how they now have to reinvent it all again for AI. - The catch: to make something simple, it has to be far more complex behind the scenes. ### [1:32] Chapter 1: The insane engineering behind "it just works" On the surface Figma does what every creative tool does (select, move, resize, copy, paste), but the first time Enrico used it, it felt natural in a way he couldn't pin down, like his first time with the iPhone's multi-touch. The difference between good and great is in the details. **Hidden canvas rules** - **Drag priority:** with a red layer selected underneath a blue layer, which moves when you drag? Most tools prioritize the hovered (top) layer; Figma moves the **selected** layer. In older tools you'd hold Shift and hope. - **Selection bounds disappear** for a moment while you nudge with keyboard shortcuts, because the bounds get in the way of precise positioning. Nobody tracks a metric for this; once you use it, it's obviously right. "Users don't care about your rules. They care that it works how they expect." - **Copy and paste placement:** a "massive combination" of rules. The simple rule is "paste at the same X/Y inside the new frame," but built to spec that can drop an object off-screen ("Where am I? What just happened?"). So: if the position would be out of bounds, paste in the center; if you're zoomed in far, paste where you're looking; plus extra rules for things like asset frames. Each rule is simple; there are just many of them. - **Alignment and resizing of multiple selections:** left-aligning three layers inside a frame used to collapse them oddly. Now Figma draws separate selection boxes per group (a title belongs to its object), searches for the smallest sensible spot to align to, and resizes in a way that matches intent. - The team's takeaway: the best product decisions lead to simplicity, and getting there is the hardest part. You don't get there by strictly following a small set of simple rules. **Figma's founding bet** - Founders **Dylan** and **Evan** wanted a design tool that didn't "melt your computer," ran in the **browser**, and killed the "V3 final ultra final" file shuffle with **real-time collaboration**. - Early users feared two things: a browser design tool can't perform, and "why do I see you in my file?" (multiplayer cursors). **[5:58] Selling multiplayer with a game** - About eight years ago, sales demos were a **city-builder workshop**: everyone just built a city together. People put fire emojis on houses and others brought fire-truck emojis to spray water. No tutorial needed, and it got people past the fear of having others in their file. **[6:30] What happens when two people edit the same thing** - Simplest approach chosen first: **last write wins**. Both edits still land in **version history** and **undo history**. - **Offline:** if one person edits on a plane, their changes sync and can overwrite the other's when they reconnect. The team considered isolating offline users in a separate space but relied on version history as the safety net. - Fine-grained sharing: while one person moves an object, the other can change its color. The team describes "synergy moments," working on different parts of the puzzle without "sorry, sorry." **[8:10] Smart guides and undo** - **Alignment guides** change with context: zoomed in next to a large frame, they snap to start, center and end of nearby things because the viewport can't see much; zoomed out, they work hierarchically by **top-level frames and sections** first. - **Undoing selections:** Figma made Ctrl+Z also undo things that aren't technically file changes, like a misclicked selection. The cost is memory: big undo histories can hurt file and browser performance, so there are now limits. - Enrico's summary: simple products don't have less complexity, often more, but it's hidden. **[9:40] Rendering a pro design tool in a browser** - Creative apps normally need powerful GPUs and "send your laptop fans to hyperspace." Figma had to run at **60 frames per second** on "any crusty computer." - It started with "a bunch of water": a **WebGL** pool-of-water demo co-founder **Evan** built in **2011** to prove the browser could do what people thought only desktop apps could. WebGL was too new for big companies; Figma was small enough to try it. - Today the toolbars and layers panels are ordinary **React/HTML**, but everything on the canvas is drawn by Figma's own renderer (the engineer says **WebGPU**) using Figma's own schema, not DOM nodes. - That split is costly: anything in the HTML layer that must stick to a canvas object needs constant position updates. The new **assistant** (internal code name; it ships as **"agent"**) lives on top of any object but isn't part of the design, so for every frame Figma calculates its position from the viewport X/Y, zoom level and element coordinates, 60 times a second. **Comments** work the same way. ### [12:30] Why doesn't Figma look scary? - Enrico grew up thinking pro tools must look like panels, knobs and endless YouTube tutorials. That happens when success brings requests for more features, views and customization. The best products are built by saying **"Nope."** ### [13:03] Chapter 2: Friendlifying complexity - **Saying no:** users asked for an **incognito mode** to enter a file secretly. The team refused, because seeing someone join your **face pile** is part of feeling safe. - **Adding modes carefully:** when adding **Dev Mode** and **Draw** (internally called "texture" at the time), they explored "hundreds and hundreds" of ways to switch: from the cursor tool, its own thing, a modal, a menu, a mode, the toolbar, and how each would scale to future products. - **The toolbar principle:** the toolbar is for things that **change your cursor** (frame tool, text tool). Quick actions broke the rule, which "does make me sad." Simple rules like this, even if users can't name them, make powerful products feel approachable. - **Left-to-right like a book:** pages on the left, then top-level frames, then the canvas, then the most granular properties on the right, a "smooth gradient of complexity." - **Progressive disclosure from free-form to structured:** duplicate a layer a few times; later use multi-edit or selection colors; later make one a **main component** with **instances**; later publish it to a **library**, connect it to **code** and a system. Want a design system? Use one. Want to duplicate a frame 10,000 times and edit every border by hand? Also fine. **[15:50] The new left sidebar backlash** - The new left sidebar launched with only a couple of items because others were still in progress, and users complained it took "54 pixels of my gorgeous canvas," with "a lot of spicy feedback." - Framework: **canvas interactions** on top (orientation to pages, layers, inserts; search across the file, still debated since it could live with layers; the new assistant) and **views** below (warnings, library updates, missing fonts). People have said they miss those bottom items. - Small decisions eventually hit an inconsistent breaking point; then you make the hard call to redesign and some people won't like it. **[17:10] Plugins: let users build it** - There's a long tail of features, so plugins must exist. Because Figma is on the web, plugins are just code that already lives in the browser; you turn them on. - With millions of users wanting very specific features, sometimes the best move is to do nothing natively. Plugins also became a key signal for what to build into the product. - Rule of thumb: if it's not critical to a design workflow, it should be a plugin. Native makes sense when plugins feel non-native or slow, don't fit your design system, or need org approval to become a company workflow. - **Liquid Glass example:** when Apple shipped Liquid Glass, the community demanded it and dozens of plugins appeared overnight, but none were right because it's hard to rebuild. So Figma built it natively, with some help from **Apple**. One engineer studied refraction on clear ice cubes in a drink at a bar after work. ### [19:05] Sponsor-free series plug - Enrico asks viewers to comment which product they want to see next and to subscribe. ### [20:05] Chapter 3: Inventing the obvious - Patterns like Instagram Stories (progress bar up top, tap left or right, gone in 24 hours) or corner handles for resizing feel obvious, but someone had to invent them. Figma now needs a new obvious pattern for **AI on the canvas**. - **Why a new entry point:** AI features such as "replace content" and "check designs" lived in the **quick actions** menu, but you had to know they existed and search for them. The goal is one place to prompt anything, with Figma routing the request to the right tool underneath. - **Placement explorations:** a prompt box on the canvas; a prompt box docked at the bottom (rejected because it's far from the mouse and falls "out of sight, out of mind," especially on big screens); below the object; tied to the object; with extra tools; top; every corner. There's also a **Cmd+Enter** shortcut for power users. - **Why the right corner:** it mirrors **comments**, which already handle typing on the canvas. It looks and behaves the same: single line by default, growing into a full box as you type, fixed size when finished. The left corner gets the least interaction but the prompt box would cover what you selected, so they chose the right, the next-least-used corner. - **"It's in my way":** because it appeared on every click, it got in the way when zoomed into small objects. - **Scrapped prototype:** use **Fitts's law** and mouse speed to guess intent, scaling the entry point up only when you approach it at a certain speed. It was exciting but undiscoverable: if you can't find it, you move around more and it shows up even less. - **Shipped solution:** selecting an object reveals the entry point; mousing away hides it. A **safe polygon** touch target (a small box that tapers into a triangle) tracks whether you're heading toward it, hiding faster when you move away. Users who **overshot** lost it, so a short **delay** keeps it visible a bit longer. - The goal is that in a few years this little indicator feels obvious and other products copy it. The team notes that collective "muscle memory" for AI interaction hasn't formed yet, and changing a mental model once it exists is really hard. **[25:50] The old rendering decision bites back** - Early on, the model made buttons with broken spacing. In HTML/CSS you don't need flex to get spacing, but in Figma you need **auto layout**. They had to teach the model Figma's layout, using a **fine-tuned model** plus custom prompting. - Figma's **custom renderer** exists so files look identical on every platform (masks, blend modes and blurs render differently in Chrome and Safari). That means Figma primitives don't map exactly to HTML/CSS, while models are most comfortable in HTML/CSS. A Figma file is a tree of objects similar to, but not the same as, an HTML page, so models treated it like HTML. - Current rough edges shown: a "happy sun" drawing that isn't quite there (vectorization tools are in progress), layouts pushed off the edge, messy charts ("I have no idea what the heck this is"). - Enrico's view of Figma's edge: no tool will one-shot designs perfectly, but Figma has a strong canvas built over 10 years where you can quickly fix whatever the AI makes. - **Ambiguous prompts:** "make this centered" has a right answer; "make the title pink" depends on what the title is. The team had to decide which cases matter and how to align with user expectations. - **AI state on canvas:** indicators tied to the AI's state show what it's doing and when it has a question (for example, about missing fonts: proceed anyway?), so you keep working creatively while getting hints from the AI. ### [29:40] Outro - Points to the earlier behind-the-scenes episode on **Notion** with its product team. ## 2) Things mentioned ### Figma features and design details | Item | Role in the video | |---|---| | **Figma** | The browser-based collaborative design tool the episode goes inside. | | **Selected-layer drag priority** | Dragging moves the selected layer, not the hovered one on top. | | **Hidden selection bounds while nudging** | Bounds briefly disappear during keyboard moves for precise positioning. | | **Copy-paste placement rules** | Out-of-bounds pastes go to center; zoomed-in pastes go where you're looking; special cases for asset frames. | | **Multi-group alignment and resize** | Separate selection boxes per group; aligns to the smallest sensible spot. | | **Smart alignment guides** | Snap to start, center, end when zoomed in; to top-level frames and sections when zoomed out. | | **Undoable selections** | Ctrl+Z undoes misclicked selections too, with memory-driven limits. | | **Multiplayer cursors and face pile** | Real-time presence; incognito mode refused to keep files feeling safe. | | **Version history and undo history** | Safety net under last-write-wins and offline sync. | | **Dev Mode, Draw (formerly "texture")** | New modes whose switching UI took hundreds of explorations. | | **Toolbar and quick actions** | Toolbar holds cursor-changing tools; quick actions broke that rule. | | **New left sidebar (UI3 era)** | Canvas interactions on top, views at the bottom; criticized for "54 pixels" of canvas. | | **Components, instances, libraries, code connection** | The step-by-step path from free-form layers to a design system. | | **Plugins** | Web code you switch on; an outlet for the long tail and a signal for native features. | | **Liquid Glass effect** | Built natively after imperfect community plugins, with help from Apple. | | **Comments** | Model for the assistant's look and behavior; uses the same positioning math. | | **Figma assistant / agent** | AI entry point on selected objects, with a Cmd+Enter shortcut, routing prompts to tools. | | **Auto layout** | Figma's spacing system that AI models initially ignored. | ### Rendering and engineering | Item | Role in the video | |---|---| | **WebGL** | Early browser graphics API Figma bet on; Evan's 2011 water demo proved its potential. | | **WebGPU** | Named by a Figma engineer as what renders the canvas today. | | **React / HTML / DOM** | Used for panels and toolbars, separate from the canvas renderer. | | **Custom renderer and schema** | Ensures identical rendering across browsers and devices, but doesn't map to HTML/CSS. | | **Fine-tuned model + custom prompting** | How Figma taught AI its layout model. | | **Vectorization tools** | In development to improve AI-drawn shapes (the "happy sun"). | | **Chrome, Safari** | Examples of browsers that render masks, blend modes and blurs differently. | ### Interaction-design concepts - **"It just works"**: hidden complexity as the difference between good and great products. - **Many simple rules forming a complex system** versus a few rules followed strictly. - **Last write wins** conflict resolution. - **Progressive disclosure** and a left-to-right gradient of complexity. - **Saying no** to feature requests to protect simplicity and trust. - **Inventing the obvious**: creating new design patterns that later feel natural (Instagram Stories, resize handles). - **Fitts's law** intent detection (prototyped, not shipped). - **Safe polygon / safe triangle** hover targets with an overshoot delay. ### Other products and companies | Item | Role in the video | |---|---| | **Microsoft Paint** | The comparison for how simple Figma looks. | | **iPhone multi-touch** | Enrico's analogy for something that just feels right. | | **Instagram Stories** | Example of an invented pattern that is now obvious. | | **Apple** | Shipped Liquid Glass and helped Figma rebuild it. | | **Notion** | Subject of the previous behind-the-scenes episode. | | **Flask** (flask.do) | Enrico's video feedback tool, plugged in the description. | ## 3) Biographies ### Enrico Tartarotti (host, writer) Italian-born tech creator and designer behind the YouTube channel **Enrico Tartarotti**, where he goes behind the scenes of everyday tech products through designed video essays on UX and product design. He builds **Flask** (flask.do), a video feedback and review tool, offers one-hour calls through enricotartarotti.com, and handles sponsorships through **Rakugo Media**. Credits for this video: written by Enrico Tartarotti, produced by Enrico Tartarotti and **Bartek Malinowski**, edited by **Seequence** and Enrico Tartarotti. He's on X as @EnriTarta and on Instagram as @enritarta. ### The Figma team (interviewees) Several Figma designers and engineers are interviewed across product design, canvas engineering and the AI assistant, but the captions and sampled frames don't show their names or titles. Names that appear only as cursor labels in demos (Georgia, Nico, Alex, Semira) can't be confidently matched to the people on camera, so they aren't listed as interviewees here. ### People referenced - **Dylan Field**: co-founder and CEO of Figma, which he started in 2012 with Evan Wallace after they met at Brown University. Named in the video as one of the founders who wanted a fast, browser-based, collaborative design tool. - **Evan Wallace**: co-founder and former CTO of Figma, the engineer behind its WebGL-based rendering approach. His 2011 WebGL water simulation demo is shown as the proof that browsers could handle desktop-class graphics. He later created the esbuild JavaScript bundler. - **Bartek Malinowski**: Enrico's producer. - **Seequence**: the editing studio credited for the video. ### Organizations referenced - **Figma**: San Francisco design software company behind the Figma design tool, FigJam and related products, known for browser-based real-time collaboration. Adobe's planned acquisition of it was abandoned in 2023 after regulatory pushback, and Figma went public in 2025. - **Apple**: cited for introducing the Liquid Glass visual design language in 2025 and for helping Figma recreate it.