Codegen plugins (and other tips) for automating design to code

When we first set out to build Dev Mode

, streamlining design implementation was our North Star. As we thought about how to incorporate codegen into the design-to-code process, we realized that codegen is not a hands-off replacement for translating design to code. Rather, it provides a jumping off point

What codegen is (actually) good for

Should you just use codegen to… generate code? Not so fast. Codegen is best for augmenting your design to development process, not automating it.

, so you don’t have to start from scratch every time.

That’s why we’ve included code snippets directly in Dev Mode, while allowing you to extend its functionality with codegen plugins. Whether you’re looking to generate code in HTML or React, or you’re using frameworks like Tailwind or Swift UI, we’ve rounded up plugins that can accelerate your workflows.

Customize code with Anima

Anima lets you export Figma-to-code components in React or HTML code with CSS, SCSS, or Tailwind snippets that are interactive, responsive, and easy to maintain. The code automatically detects repeat components to minimize duplication and speed up design implementation.

Pick any Figma layer, component, or frame and get the code right inside Figma. Anima is highly customizable, and as you add code snippets, Anima learns your team conventions and returns relevant code. You can also prompt Anima to add animations or snap a code snippet to specific styles—directly in Dev Mode.

Leverage code components with Builder

The Builder plugin offers AI-based codegen in languages like React, Svelte, and HTML that looks just like the code a developer would write themselves. By generating code that leverages your team’s code components, it brings design and code closer together. You can chat to refine the code with AI, train it to adapt its output to match your specific code style, and automatically make designs responsive. If you’d like to test code output outside of Figma, Builder has a unique UI that allows you to tinker with generated code in a separate web page.

Easily go from Figma to Code

Figma to Code, a free open source plugin from the Figma Community, allows you to convert designs into code for responsive websites (HTML or Tailwind) or mobile applications (Flutter or SwiftUI). You can run the plugin, see Tailwind code, and then copy and paste it into your code editor.

Create code across mobile and web with Locofy.ai

Available in free beta, Locofy.ai generates interactive code—in React, HTML/CSS, Next.js, Gatsby, and Vue—for components and full screens across web and mobile apps. Locofy.ai combines multiple aspects of front end development to create high quality code:

• Design optimizations like auto layout and frame grouping
• Interactivity with tagging semantic HTML elements, libraries, and actions
• Responsiveness across different screen sizes
• Components and props for cleaner modular code
• Contextual human-readable class names in code for better collaboration and scalability

After fine-tuning the code, designers and developers can collaborate and share prototypes, bind data, and export code or Storybook files. Developers can also sync directly to GitHub with automatic code merge and conflict resolution for continuous integration.

Turn designs into React components with Replit

The Replit plugin turns Figma designs into high-fidelity prototypes. You can convert your design system directly to React, iterate on your designs using natural language prompts, and wire the generated code up to live data for user testing.

See the full list of plugins to find one that supports the languages and frameworks you use, and learn more about working with plugins in Dev Mode.