What Codegen Is (Actually) Good For | Figma | Figma Blog (opens in new tab)
Code generation is most useful as an augmentation to the design-to-development process, not as a replacement for developers. Figma found that fully automated design-to-code output often fails because teams use different frameworks, codebases, and patterns. Instead, codegen works best when it provides context, suggestions, and a useful starting point that developers can refine themselves. ## Codegen’s Broad Ecosystem - Codegen automatically produces code from rules or specifications. - It ranges from: - IDE completion tools such as Microsoft IntelliSense - Reusable templates and snippets - Visual programming and no-code platforms such as Bubble - AI assistants such as GitHub Copilot and Replit Ghostwriter - AI codegen adoption is high: 82% of developers surveyed by Stack Overflow in 2023 said they already write code with AI tools. - Trust remains low, however; fewer than 3% reported highly trusting the accuracy of these tools. ## Why Fully Automated Design-to-Code Falls Short - Figma initially envisioned Dev Mode as a way to automate design-to-code conversion. - Early results were promising, but developers often found the generated code impractical or not useful. - Producing code that fits a wide range of frameworks, architectures, and team conventions is difficult. - The better goal is “intelligence amplification”: technology should extend a developer’s capabilities while keeping the developer in control. ## From 0 to 0.5 - Codegen is particularly effective at helping developers move from a blank screen to a partial implementation. - In products with established design systems and component libraries, it can: - Suggest the appropriate component - Surface component names and property values - Reduce guesswork during design handoff - Rather than generating a complete solution, codegen helps developers reach a useful starting point faster. ## Applying Codegen to Existing Design Systems - Codegen delivers the most value when customized for a specific team, company, and workflow. - If a design system and component library already exist in Figma, teams may not need a separate automated design-to-code application. - More useful alternatives include: - Referencing design tokens and variables - Viewing component documentation - Building a Figma codegen plugin - Generating custom code snippets - These tools help developers understand a design quickly while allowing them to write code that matches their own codebase. The practical recommendation is to use codegen as a guided assistant: provide suggestions, reusable patterns, and context, but leave architectural decisions and final implementation to developers.