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.

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:

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! 😎