AI accelerates execution, not clarity; precise context gets agents writing less, and writing it better
Figma deep dive: Agentic workflows and the MCP | Config 2026 · Jake
32 min total·Actually worth watching closely: ~20 min·3 must-watch clips
- 0:16 – 3:57Listen
Opening: don't hand over your judgment
Starts from the uncertainty everyone in the industry feels and introduces cognitive surrender — adopting an LLM's judgment as your own, which relieves you of the burden of validation and of the work required for a distinct point of view.
AI accelerates execution, not clarity, and at times gets in the way of it — and clarity is exactly what designers shouldn't outsource.
He's on his feet making an argument the whole way; the screen is just him and a few large title lines, so it works fine with your eyes elsewhere.▶ Jump to 0:16 - 4:00 – 8:20Listen
Polish no longer means you thought it through
In the past you couldn't get a file to high fidelity without settling the decisions surrounding the problem one by one, so polish was a natural quality filter for ideas. Now you can produce something beautiful with no context at all, but it's built on averages.
The biggest risk isn't an ugly output — it's that a more complete, better-looking one seduces you off the path you should have been on.
This stretch moves on argument, with mostly conceptual illustrations, so following the logic matters more than watching the screen.▶ Jump to 4:00 - 8:20 – 11:02Watch
Design is itself a specification
Using a button as the example: a design token payload is bigger than hardcoded raw values, yet it states both light and dark mode at once; abstract one level further into a component and a single line carries all the interactivity to the model. Then he shows how CodeConnect attaches production-grade code templates to components.
Design systems are precise language — they fit more intent into less surface area, which is the fundamental way to stop agents from guessing.
The button comparison and the CodeConnect template code only land on screen: the deliberately hardcoded label text in the template and the event handlers left as empty shells are both signals to the model that this part is illustrative and still needs filling in — details the audio alone drops.▶ Jump to 8:20 - 11:02 – 14:40Watch
How wasteful default context is
He hands a Figma table to the model live, and by default gets back a wall of React and Tailwind faithfully reproducing the visual style — outside the table header text, almost none of it is relevant, and the reusable elements aren't described in production terms at all. He then contrasts it with the precise-context version.
More context isn't better; irrelevant detail crowds out the actual intent, and the difference ends up as tech debt for people to repay.
The length and content gap between the two code screens is the whole argument here — especially how that pile of verbose style class names looks next to the trimmed version, which no verbal description conveys.▶ Jump to 11:02 - 14:40 – 18:05Skim
Hypertokens: the overlooked middle layer
There's a layer hiding between raw values or tokens and components — wrapping a group of style decisions into one semantically named value. Figma is trialing a strongly typed, form-agnostic schema that compiles deterministically from a single source into the Figma library, CodeConnect, CSS, and whatever else each side needs.
Name the style combination and there's one less layer for the model to infer; that naming layer later becomes an index into how design thinking is distributed.
Mostly architecture diagrams and a list of compiled outputs, plus a Storybook view of which components reuse a given style fragment — a glance at the structure is enough, no need to follow line by line.▶ Jump to 14:40 - 18:05 – 25:02Watch
Deploying your expertise onto the canvas
On maintaining the skill documents agents use: people maintain one source of context, and after each update agents translate it into their own versions. He lays that source out directly on a FigJam canvas, carves out a dedicated section for briefing agents, and even sets homework — having the agent actually write CodeConnect from the canvas, then check it against an answer key.
Don't hand-edit agent-generated documents, but don't fully let go either; maintain a regenerable source so you can regenerate whenever the model moves on.
The value of this whole stretch is the spatial layout of the canvas itself: which block is the task briefing for agents, which is reference material read only on demand, which holds the homework and answer key, which is the handoff area where human and agent write back and forth. A flat document can't express that zoning — you have to be watching to see what he's demonstrating.▶ Jump to 18:05 - 25:07 – 32:09Watch
Speedrun in one night: the Stegaset build
The full flow, end to end: feed the project's domain source code plus asset frames to the design agent for a surprisingly good first draft, assemble the prompt for the coding agent on canvas, have it deliver a plan first and only start work after human review and edits, then land the changes in Figma and the codebase at once with before/after screenshots sent back. The result is a site where clicking an image plays the audio hidden inside it.
Source code is badly underrated as design context — and the plan-first, human-review, then-execute checkpoint is the one step in the whole flow you shouldn't skip.
This is the only continuous hands-on run in the session: assembling the prompt on canvas, the before/after screenshots the agent returned, and the animation and audio playback actually running are only convincing on screen. He closes by showing the whole process preserved as-is on the canvas — that record is itself the talk's final argument.▶ Jump to 25:07