1 of 12

The Future is Here

Skipping Figma for

UX Handoffs

2 of 12

The Starting Point

Real Code, Real Component

From the first minute, the examples were fully interactive — not screenshots.

3 of 12

Making Sense of the Project NotebookLM as a Living Brain

4 of 12

The Design Work Itself Four Revisions in One Session

With the structure in place, the actual design decisions were fast. In a single sitting we ran several iterations on the cell state model and landed on final specs for the cell UI & State, and also keyboard interactions.

5 of 12

- explore in Figma → share for review → write specs → dev interprets it → follow-up questions → design changes needed → restart

old flow:

now:

6 of 12

See the state live → decide → prompt → it's in the code.

The feedback loop collapsed. The interactive example makes the decision obvious in a way a static frame never does.

7 of 12

Idle Time Is a Feature

Not a Bug

There's real dead time while the AI works. That's not wasted — it's an opportunity to context-switch: answer Slack messages, groom tickets, review a PR.

8 of 12

Storybook Didn't End at Handoff

It Became the Iteration Stage

After the first handoff PR was shared, we kept working in the same Storybook to refine behavior. Cell-level hover, type-to-edit appending, cursor landing, read-only state visuals etc.

9 of 12

Recurring Infrastructure Issues? Write Them Down Once

We hit the same environment issues more than once. Each time we documented the root cause and fix in a running KNOWN_ISSUES.md. Future sessions — and future teammates — start ahead of where we started.

10 of 12

The Template

Start in 10 Minutes

The structure that emerged is now reusable: one folder per feature, a documentation story, shared helper components.

11 of 12

What This Changes for UX

Figma still has a place: early exploration, rough layout, stakeholder alignment. But the handoff phase is now much shorter and much less lossy.

Specs are interactive, not static — you can click, type, and drag the exact state you're defining.

Quality is dramatically higher — seeing the component live surfaces edge cases and awkward transitions invisible in a static frame. You're feeling it, not guessing.

Design decisions and documentation live in the same place as the code.

Iteration happens in the same tool as review — no translation layer.

12 of 12

What's Next

  • Does it scale to more complex flows?
  • How do we handle cases where code doesn't exist yet?
  • How does this change the relationship between UX and dev during the build phase?

We're finding out.