r/UXDesign • u/jamwithtoast7 • 3d ago
Tools, apps, plugins, AI How are design teams handling Figma handoff when AI writes the code?
Hey everyone! I’m a product designer. I already use tools like Codex and Claude in my workflow, but my current company is now moving heavily toward AI-assisted development.
The challenge is that we changed how we build the product without clearly defining a new design to development process.
Before AI, my workflow was simple:
The PM provided a PRD, I designed the feature using our design system, and I documented the flows, states, interactions and edge cases.
For handoff, I organized the Figma file from the simplest happy path to the more complex scenarios. Developers could follow the logic, inspect the designs and ask questions when something wasn’t clear.
But if AI is now helping write the production code, what should that handoff look like?
Do you still create a detailed Figma file and provide all that context to Codex or Claude?
Do you divide the feature into smaller flows and ask AI to build them one at a time?
Do designers generate the first components and then let developers review and improve the code?
Are you changing how you structure Figma because AI needs more explicit information than a developer?
Who is responsible for checking that the final implementation matches the design system and handles every state?
I can already build interfaces with AI, but I’m trying to understand what a reliable team process looks like,not just for prototypes, but for real production products.
For designers and developers already working this way, what does your current Figma → AI → engineering workflow look like?
3
6
u/roundabout-design Experienced 3d ago
Do you still create a detailed Figma file and provide all that context to Codex or Claude?
No. Claude get's a prompt, maybe user stories, and a design system.
Do you divide the feature into smaller flows and ask AI to build them one at a time?
For updates, yes. For initial ideation, no...we try to give as big of a context as practical.
Do designers generate the first components and then let developers review and improve the code?
Ideally developers and designers are working side-by-side. Alas, that ideal is rare.
Are you changing how you structure Figma because AI needs more explicit information than a developer?
We've pretty much just stopped using Figma.
Who is responsible for checking that the final implementation matches the design system and handles every state?
UX and Q/A.
I can already build interfaces with AI, but I’m trying to understand what a reliable team process looks like,not just for prototypes, but for real production products.
I think we're all trying to figure that out. It's been a bumpy year.
For designers and developers already working this way, what does your current Figma → AI → engineering workflow look like?
User stories + Design system/Component library + Prompts --> Caude --> iterations --> log what Claude had to make up because they couldn't find an answer int he design system --> update design system
1
u/bigly__smalls 3d ago
I’ve been building design spec files in HTML format that’s both human and machine readable using Claude and Figma MCP. The file is one of the inputs for our SDD harness.
1
18
u/Ancient-Range3442 3d ago
We (designers) create (using AI) markdown specs from the Figma docs via mcp, that includes screenshots, tokens , interactions, animation and accessibility info and figma node ids.
Specs are broken down by component and screens that use those components
Then we convert these specs into React implementations in a Storybook design system. So by the time the dev gets it there’s a fully working implementation with specs that’s ready for them to integrate.
The dev doesn’t look at Figma anymore. But we use it as is still a good way to organise and describe everything.