From Figma to production, with AI

The problem

Design-to-development handoffs were losing detail: spacing, interaction states, responsive behavior, brand rules. Engineers rebuilt what designers had already decided, and designers re-reviewed what should have been right the first time.

AI coding tools promised to close that gap. But generic AI output ignores what a real product depends on: the approved components, the design tokens, the accessibility fixes the team learned the hard way.

Can AI build what we designed, using the parts we already trust?

How I led

1. Tested on real products, not demos. I set up production applications locally so we could run Figma-to-code experiments against the actual codebase.
2. Connected design to code. I used Figma Code Connect to map Figma components to their React and Storybook implementations, giving AI production-relevant component and property information.
3. Made the output predictable. I wrote AI context rules so generated pages reused approved components and followed our design-system standards for styling, typography and spacing.
4. Set a measurable bar. I proposed benchmarking Figma imports against our production component library, so "good enough" became something we could check.
5. Brought the team along. I ran knowledge-transfer sessions showing developers and designers how Figma components connect to code and how AI workflows can generate pages from shared libraries.

What we learned

• The design system is the AI's vocabulary. The better the mapping between Figma and code, the more accurate the output.
• Rules beat retries. Clear written context rules did more for consistency than re-prompting.
• Enterprise readiness is part of the design. Which tools and connectors are security-approved determines what is actually possible, so I tracked and communicated that status alongside the work.

Where it stands

What started as an experiment became a proposed technology initiative across two product lines, aligning design tokens between Figma and React and enabling repeatable AI-assisted development. I'm now building the proof of concept to demo the end-to-end process to executive stakeholders.