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
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.'
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:
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?