What Figma Learned About AI Consistency in Code Generation
TRIGGER
AI coding agents generating UI code from designs would produce inconsistent component implementations—sometimes using the correct design system component, sometimes creating one-off implementations—because they couldn't see the relationship between visual design components and their production code equivalents.
APPROACH
Figma built Code Connect to define explicit mappings between Figma design components and codebase components, with prop/variant mappings for most frameworks. Originally CLI-only, they added an in-app UI to browse components inside Figma, map them to code files, and track which are linked or missing. When connected through the MCP server, AI agents receive both design context and code component locations with usage guidelines. Input: Figma component selection. Output: production component path, prop mappings, and usage guidelines. Early internal evals and alpha customers reported 'more consistent code output, faster file navigation, and improved token efficiency from AI agents.'
PATTERN
“Sometimes AI uses Button, sometimes creates custom button divs. The inference step is where inconsistency enters. Explicit declarative mappings between design components and production code eliminate variation that prompt engineering can't fix.”
✓ WORKS WHEN
- Design system has established component library with >20 reusable components
- Codebase has typed component props that can be mapped to design variants
- Team experiences inconsistent AI output when generating component code
- Design and engineering teams have agreed on component naming conventions
✗ FAILS WHEN
- Components are still evolving rapidly and mappings would require constant maintenance
- Design system is minimal or non-existent (custom one-off designs)
- AI code generation is for greenfield projects without existing component conventions
- Design tool and codebase use fundamentally different component models that can't be mapped