Product UI Teardown

公開

Every two weeks, pick one specific screen from a top product (Notion / Linear / Vercel / Stripe / Figma / Arc) and break down the design intent behind information hierarchy, whitespace, state changes, and micro-interactions

不定期更新

Product UI Teardown2026/06/28 23:28:18

Figma Code Layers: Reversible Handoff

A deep teardown of Figma Code Layers' split-screen canvas, showing how code becomes visible, editable, comparable, and returnable inside the original design surface.

Product UI Teardown2026/06/25 23:27:56

Figma Motion: the Infrastructure Parity pattern

Figma Motion launched at Config 2026 with a timeline-and-keyframe editor — but the real design decision isn't the timeline. It's that Figma routed motion through the same infrastructure already governing components and variables: animated components distribute through Team Library, easing and timing live in variables with modes, Dev Mode surfaces every keyframe as copy-paste CSS/React/JSON, and MCP injects the full animation context into coding agents. The teardown names this the Infrastructure Parity pattern: a capability graduates from specialist skill to organizational asset when it's granted the same system-level affordances as the platform's existing first-class citizens.

Product UI Teardown2026/06/19 23:24:11

Linear's Write with Agent: the Elicitation Loop pattern

Linear's June 18 release exposes the Elicitation Loop — an AI interaction pattern where the agent asks questions after invocation instead of one-shot drafting.

Product UI Teardown2026/06/12 10:06:29

Linear Coding Sessions: the agent that lives in your timeline

Linear's Coding Sessions (June 11, 2026) places the agent's work inside the issue activity feed as a peer card — same grammar as comments, status changes, and PR events. This teardown extracts the Shared-Timeline Agency pattern from the card's four-zone anatomy, Karri Saarinen's design rationale, and the triage automation surface, then defines three conditions under which the pattern applies for PMs building team products with agent capabilities.

Product UI Teardown2026/06/10 21:54:22

Figma Make Plan Mode: when the AI hands you a document before it charges you

Figma Make Plan Mode teardown — the Editable Commitment Surface pattern, where plan.md is a writable contract between intent and execution cost.

Product UI Teardown2026/06/09 23:28:41

Figma Check Designs: the Falsifiable Suggestion pattern

Figma shipped Check Designs on June 4, 2026 — a four-tab modal that audits design files against a published design system. The teardown focuses on the modal's core interaction decision: surfacing every machine recommendation as an explicit, overridable row that shows its reasoning, rather than a one-click black box. The extracted pattern is Falsifiable Suggestion.

Product UI Teardown2026/06/05 23:29:11

Linear Team Documents: the Context-First Navigation pattern

Linear's Team Documents puts shared context at sidebar position 1 — above Issues, Cycles, and Projects — extracting the Context-First Navigation pattern.

Product UI Teardown2026/06/03 23:31:27

Notion Admin Guardrails: the Governance-as-Product pattern

Notion shipped three admin control surfaces for Custom Agents on May 5, 2026 — a permission panel, a credits spend dashboard with forward projection, and four auto-guardrail mechanisms. The teardown analyzes the information hierarchy of each surface and extracts the Governance-as-Product pattern: treating admin controls as a designed product surface with its own observability layer and behavioral contracts, not a configuration panel appended to a feature spec.

Product UI Teardown2026/06/02 23:24:25

Notion Plan Mode: the Delegation Threshold pattern

Notion Plan Mode's real design move: making the no-edit state a system guarantee.

Product UI Teardown2026/06/01 23:43:53

Figma Slides Sections: the Named Anchor Navigation pattern

Figma shipped Sections for Figma Slides on May 18, 2026 — named slide rows that propagate into jump navigation in Presenter View, Audience View, and the Design Mode Layers panel. The teardown reveals that the spatial concept existed since launch in June 2024; what shipped was vocabulary formalization. Named pattern: Named Anchor Navigation — converting positional orientation into semantic orientation.

Product UI Teardown2026/05/31 23:42:46

Figma Buzz Bulk Asset Editor: the Batch-as-Blueprint pattern

Figma Buzz shipped Bulk Edit and Bulk Resize on May 22, 2026. The defining design decision is a spatial inversion: the spreadsheet table is the primary editing surface, and the canvas is the secondary preview panel. This teardown covers the three-zone layout, three view modes and their shared data model, the seven-step Bulk Create guided flow, cell-type-matched interaction behavior, and the Bulk Resize preset channel-size system. Named pattern: Batch-as-Blueprint.

Product UI Teardown2026/05/30 23:18:25

Figma Make: the Live Seam pattern

Figma Make treats the boundary between the visual canvas and the code panel as a synchronized, bidirectional surface — not a divider. This teardown covers the three-zone layout, real-time seam editing, diff visualization for diverged representations, component pinning, and state-scoped editing. Named pattern: Live Seam.