Elements Inspect: Open Anima's plugin in Figma's Dev Mode. You can inspect elements on the canvas and instantly get the HTML code for your selection.
Whole Flow HTML: Open Anima's plugin in Figma's Edit Mode. You can generate HTML code for an entire flow, including links between pages and breakpoints. Additionally, access advanced prototype features such as text input, media embedding, and more. This mode is best suited for comprehensive website or landing page development.
Do you plan to support Tailwind?
Yes! Tailwind is officially released 🤩
How can I get a responsive code?
We translate Figma's Auto layout into CSS flex. The code's quality improves with the more design data we can gather.
Do you support Figma's styles/ variables?
If the file contains styles or variables, we convert them into CSS variables and reuse them across files.
How can I export the code?
There are three ways to get the code:
Copy directly from the snippet
Open in CodeSandbox
Download a Zip package
Can I add Breakpoints?
Breakpoints can only be added through Anima in Edit mode. Within Edit mode, you can export code for entire flows or multiple screens. To access the breakpoints feature, navigate to the Responsive section.
What is the difference between Anima's plugin in Dev-mode vs Edit-mode?
Dev mode is ideal for developer handoffs, allowing you to inspect any element on the canvas and to get React code for that component, including sub-components.
Edit mode is better suited for getting code for the entire screen or flow, and it is best for generating HTML to publish full websites or landing pages.
What's the difference between the component's 'Source' and 'Usage'?
You can easily toggle between the selected instance of your component ('Usage') and its full definition ('Source'), which includes all variants and sub-components
Do you support Figma variants and interactions?
Yes, Anima's code supports Figma variants and variant transitions. Currently, we support the 'on click' & 'while hovering' gestures with instant animation, generating stateful and interactive React components.
Do you have support for Sub-components?
Yes! If the component has sub-components, you will receive a list of these components and a link to their source code.