By leveraging Anima within Figma, teams can:
Automatically generate code from Figma designs.
Produce responsive code with support for Figma’s Auto-Layout.
Customize the generated code to fit specific project needs with AI personalization.
Export pixel-perfect, runnable code, reducing the time spent on manual coding and iterations.
The Anima plugin for Figma is available in both Dev Mode and Design Mode
Anima was Figma’s launch partner for dev mode, and remains the main choice for developers aiming to inspect code in Figma with over 1.5 million installs.
Code settings
When you open Anima in Dev Mode, you'll see the plugin window containing only "Select a layer to start".
Start by selecting a layer - Once a screen / frame / component is clicked, you will be able to see all the inspect settings. That includes code settings (framework and styling options), breakpoints, and AI Personalization
Framework selection - Here, you can select which framework you want your code to be generated into. We currently support React, Vue, and HTML. Each framework has its own options:
React
UI Library - You can choose from multiple available options: no library, MUI, AntD and shadcn.
Language - JavaScript (
.jsx) or TypeScript (.tsx)Styling - CSS, Tailwind, Styled Components, CSS Modules, SASS, SCSS
Vue
Version - Vue 2 or Vue 3
Language - JavaScript (
.jsx) or TypeScript (.tsx)Styling - CSS
HTML
Styling - CSS or email compatible (inline CSS)
💡 In every code framework you can toggle the between "Fast" and "High quality" for code generation
Next steps after inspecting
After you've seen the preview for your code in the plugin's window, you have some possibilities for getting your code:
Copy code - By clicking this button you will copy the code you see in the preview to your clipboard, and paste it into your project.
Include screens to your export - Clicking this will open a list where you can check all the screens you want to be exported along with the one you selected, and just like that you can import a full flow prototype! Please note that the screens must have been connected using Figma's native prototype tool in order for this to work:
Prompt in Playground - This will take you to the Anima Playground, where you can edit your code, preview the rendered project and use prompts - all in one platform!
Download selection - This button will create a .zip package with your code project, which will be downloaded to your computer, and later can be opened using anuy standard IDE, such as VS Code.