Anima is now able to turn components with instances and variant states into React components! This integration allows designers and developers to create dynamic and engaging components, ready for handoff, right inside Figma.
In this article, we will explore the supported interactions along with the process of implementing them. We'll also provide you with a sample file so you can explore the feature for yourself and be amazed at the results!
❗️ Note: The interactive component support is currently live in our new code generator. Please ensure that this is what you see when you select React code inside your synced project, otherwise you can request it from us by emailing support!
 |
Skip to a Section:
Figma's Interactive Components
Anima now offers support for the following interactions within Figma:
On Click: Trigger an action when the component is clicked.
Mouse Enter: Activate an action when the mouse cursor enters the component's area.
Mouse Leave: Trigger an action when the mouse cursor exits the component's area.
While Hovering: Activate an action while the mouse cursor is hovering over the component.
❗️ Note: Currently, Anima only supports instant transitions for interactive components. Animated transitions are not yet available but they are in our roadmap! |
Exporting Components
To export your interactive components into React code, follow these steps:
Select the frame containing the desired components.
Click on "Get Code" to access the necessary code snippets and choose React.
Open the design in the Anima web app, and from the desired page, choose "Open in Codesandbox." This step ensures compatibility, as the code in the Omniview is based on HTML, so they won't be interactive. Once you export the components into React, however, you'll be able to interact with them properly.
Try it out!
Put Anima's new feature to the test! Take a look at this Figma sample file and its live code to see how much faster, easier and dynamic your workflow can be!
Get involved in our Anima Community Forum! 😎
New to Anima?