Dev mode plugin FAQ

FAQs for Anima plugin for Figma's Dev mode

Michal avatar
Written by Michal
Updated over a week ago

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?

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?

You have two options to get HTML code:

  1. 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.

  2. 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.

Are you a designer? Check out our Prototyping FAQ for Designers!

Did this answer your question?