How can I get React code?
How can I get React code?
Inspect any element on the canvas, and you will receive the code immediately.
How to switch from JavaScript to Typescript?
How to switch from JavaScript to Typescript?
To switch from JavaScript to TypeScript,
In the Dev Mode plugin:
Click the 'React JSX' drop-down menu above the code snippet, and select TypeScript (TSX) option.
In the Inspect panel:
Click the 'Anima - Javascript' drop-down > Anima - Figma... > Anima -Typescript
How do I get HTML code?
How do I get HTML code?
You have two options to get HTML code:
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?
Do you plan to support Tailwind?
Yes! Tailwind is officially released 🤩
How can I get a responsive code?
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?
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?
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?
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?
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'?
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?
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?
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.
Are you a designer? Check out our Prototyping FAQ for Designers!