All Collections
Developer's Guide to Anima
Convert Figma Designs into ReactJS Components for Free
Convert Figma Designs into ReactJS Components for Free

Learn how to inspect and export Figma layers into ReactJS components using Anima.

Andres Raul Leon Bal avatar
Written by Andres Raul Leon Bal
Updated over a week ago

Anima now allows you to get highly optimized, easy to read and maintainable code while speeding up your frontend development by 2x! ๐Ÿš€

Here's how you can maximize Anima's 'code inspect' and 'export' features in order to receive functional React components, stateful interactivity, and responsive CSS flex layouts based on Figma's Auto Layout.

Skip to a Section:

Method 1: Figma's Dev Mode

Figma's new Dev Mode integration offers a seamless way to generate your React components' code right inside Figma. Here's how to do it:

1. Toggle on Figma's Dev Mode panel, then select the โ€˜Pluginsโ€™ tab.

2. Run the Anima plugin for Dev Mode

3. Choose a Figma component, layer, or frame

4. Choose your framework (React or HTML) and configure your preferred options: JavaScript (default) or TypeScript, and either Plain CSS or Tailwind (Styled components coming soon!)

5. 3 ways to export code:

  • Download your code locally as a zip file by clicking 'Download selection.'

  • Run the code in your browser by clicking 'Open in CodeSandbox.'

  • Or 'Copy.'

Method 2: Classic Anima Plugin (Figma's Design Mode)

If you prefer to use Anima's classic plugin from Figma's Design Mode, you can still inspect and export your layers into React components! Let's explore how.

1. Open the Anima plugin within Figma

2. Select the "Turn Design to Code" option in the Anima plugin

3. Pick the desired frame, component, or instance from your design and click Get Code > Inspect to generate its React code inside the plugin:

4. Switch between Javascript (default) or Typescript by selecting the option from the dropdown:

5. Inspect and copy the generated code directly from the Anima plugin:

6. Similar to the Dev Mode integration, you can download the selection locally as a zip file or click "Open in CodeSandbox" to instantly run the code in your browser!

Get involved in our Anima Community Forum! ๐Ÿ˜Ž

New to Anima?

Learn More

Did this answer your question?