Creator: Enrico Tartarotti · Published: 2026-06-09 · Length: 30:12 · Watch on YouTube

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.

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

Rendering and engineering

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

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.