techlist.io
KREN
figma

What Codegen Is (Actually) Good For | Figma | Figma Blog (opens in new tab)

figmadesign-systemsdesign-to-codecomponent-librarydeveloper-toolscode-snippetscodegenai-code-generation

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.