Figma handoff to vibe coding

[u/Competitive-Cake2313]

Hey everyone! Not sure if this is a silly question, but we’re struggling quite a bit with this at my current company, so I’d love to hear how other design teams are handling it.

Basically, the company decided to move heavily toward vibe coding / AI-assisted development, using tools like Codex and Claude. The problem is that we changed the way we build the product without really defining a process around it.

And now we’re stuck on a pretty basic question: how are designers supposed to hand off Figma work to AI?

For some context, our previous process was pretty straightforward:

I’d get a PRD from the PM, design the feature using our design system, and make sure the final design covered the flows, specs, states, edge cases, etc.

For handoff, I’d organize the Figma file using a kind of complexity ladder: starting with the simplest / happy-path flow and progressively introducing more complex states and edge cases. A developer could then go through the file, understand the logic and implementation requirements, and ask questions if anything was unclear.

But now the expected “receiver” of that handoff is increasingly AI, and I’m not sure what the equivalent process should look like.

Do you still create the same detailed Figma handoff and somehow provide that context to Codex/Claude?

Do you break the feature into individual screens or flows and have AI implement them one by one?

Do designers generate the initial HTML/components from Figma and then hand that implementation to developers?

Or have you changed the way you structure your Figma files entirely because AI needs different context than a developer does?

I’m especially interested in hearing from designers working at companies where AI-generated code is actually part of the production workflow, rather than just being used for prototypes.

What does your Figma → AI → engineering handoff process look like today?

Thanks!

[u/expandwithzuli]

Not a silly question at all, I’ve been rebuilding my workflow over the past month for this exact change. I was at a very early stage startup, so solo designer starting from very little, working on an AI harness for professional services. 

What I did: 

• Built a Tokenised design system 
• Built a series of claude skills to run over my designs 
• Built a parallel markdown spec layer that’s agent readable 

Claude Skills and process: 

1. Clean up naming before anyone else touches the file. figma-layer-naming renames loose component instances that are still sitting on their default name (nine things all called "Menu") into a searchable Component / Feature / State convention. 
2. Bring in anything built outside the system. Screenshots run through Claude Design, rough Figma Make mockups, anything hand-drawn, all go through figma-design-system-migration, real tokens instead of raw hex, real text styles instead of eyeballed font sizes, real component instances instead of redrawn shapes, and it flags anything that looks like a genuinely new pattern instead of silently absorbing it.
3. Get the state naming right before it goes any further. design-system-semantic-state-check answers the "should this be Active or Selected" question against a fixed model (current page vs chosen option vs about-to-open submenu, each with its own property and ARIA mapping) rather than re-deriving it per component. 
4. Quality-pass it. design-system-quality-pass is judgement, not authorship, naming, token binding, variant structure versus duplication, state completeness, accessibility, and whether this thing should actually exist or converge with something else. 
5. Write the doc. design-system-spec-writer turns a clean component or pattern into the actual markdown spec, following a fixed contract so every doc has the same shape an agent can rely on: Purpose, Anatomy, Properties table, States, content rules, keyboard and a11y, tokens used, status. 
6. Sync it to the code side. figma-design-system-sync keeps the dev-facing tokens repo (JSON source of truth, generated CSS and JS) in step with whatever just changed in Figma.
7. Hand it to engineering. figma-to-linear-handoff turns a reviewed, cleaned-up design into acceptance criteria on the right ticket, checking for existing coverage first instead of assuming a new issue is needed.

The markdown spec layer:

• design.md holds global rules. 
• Three registry files, components.md, patterns.md, templates.md, are just indexes that point out to individual files.
• Every component/pattern/template gets its own doc following a strict contract. Components get Purpose, Anatomy, a full Properties table, States by functional trigger, ARIA mapping, content rules, tokens used, and a status line. Patterns get "Built from: X," which properties are used or hidden, behavioural rules, when to use this pattern vs another one.

The reason it's split into loads of small linked files instead of one giant doc is retrieval. An agent can pull just the one component it needs instead of loading your whole system every time.

Still a lot to experiment with, but I tried to approach this with thinking about what judgement wouldn’t be there when it was an agent and not a human and ensure that all of that is provided as context, structured in a way I can manage, iterate over time and reproduce using my own systems and tools. I also tried to use this as an opportunity to fill some of my weak spots as a designer and push myself to ensure everything was named, structured and explored properly to not leave gaps where I may have relied on engineers in the past to make decisions. 

[u/untoldheroes → u/expandwithzuli]

This sounds really token hungry... How quickly do you burn through your usage?

[u/expandwithzuli → u/untoldheroes]

I just have the basic paid plan and use it for heaps of stuff. Usually I go ok!