Figma Codegen: Turn Designs into Framework-Specific Code

WHY IT EXISTS Figma's default code generation is generic. Real-world projects use specific frameworks like React or Vue, custom component libraries, and strict conventions for things like internationalization or theming. Codegen plugins bridge this gap, allowing teams to generate code that matches their actual codebase, reducing manual translation and errors.

THE MENTAL MODEL A codegen plugin is a custom interpreter for a Figma design. It runs in Dev Mode and listens for when a developer selects a design element. Instead of just showing generic CSS properties, it executes your plugin's logic to generate a string of code—a React component, a Swift UI view, or even just a block of metadata—that is specific to your team's needs.

HOW IT WORKS You build a plugin and declare codegen as a capability in its manifest.json file. The plugin registers a callback with figma.codegen.on("generate"). This function is triggered whenever a user selects a new node in Dev Mode. Inside the callback, your code receives the selected node object and returns a string of generated code. You can also define preferences (like rem vs px, or component variants) in the manifest, which Figma renders as native UI controls for the user.

WHEN TO USE IT Use this when you want to enforce coding standards directly from the design tool. It's perfect for generating boilerplate for your company's design system components, automating the extraction of translatable text into a specific JSON format, or generating code for a framework Figma doesn't support out-of-the-box.

WHEN NOT TO USE IT This is not for generating entire, complex applications; its scope is limited to the selected node(s). It's overkill for simple CSS or if your team's conventions are too fluid to be codified. If the logic is highly complex, maintaining the plugin can become a project in itself. Don't use it if a simple copy-paste of CSS attributes is sufficient.

ONE CANONICAL EXAMPLE A plugin can be configured for a React codebase. When a developer selects a Figma component for a "Button", the plugin doesn't just output CSS. It generates <Button variant="primary" size="large">Click Me</Button>, reading the variant and size from the Figma component's properties and using the correct import from the team's component library. It translates the visual design directly into the correct code abstraction.