❗️Please Note: The Component Library is currently available for users upon request only.

Anima's component library is a set of the most popular open-source UI libraries inside Figma. Design and edit React components visually, and export React.js code that refers to the relevant open-source library.

Anima's Components Library currently consists of MUI (Material UI), Ant Design, Bootstrap, Mantine UI and Recharts.

Select a UI library

Open the Anima's plugin and click 'Component Library'. From here, you'll see a list of the available UI libraries.

💡 Tip: You can find more information for each Anima component library here: MUI, Ant design, Recharts.

Choose a component and modify its properties

All components are fully customizable. To find a component, you can use the search bar at the top of the plugin or use the navigation buttons next to the library name to scroll.

Click ''See all'' to open all the library's components and choose the one you need.

Next, you can edit the properties of your component as needed.

Insert your component

Click Insert Component to add your component to your Figma canvas.

*Note that some of your components may be inserted as an image layer for the time being, but will export as a component nonetheless.

You can also customize certain theme properties by going to the library's page in the plugin, such as Material UI, click Edit Theme, and then edit the relevant fields and click Apply at the top right to save the component's properties.

💡 Tip: Anima also supports complex components, which are components that contain sub-components or 'nested components', such as tables, menus or tabs. Learn more about them here!

Edit your component

To edit a component, simply select it on the canvas. In the Anima plugin, you’ll see an Edit button. Customize its properties and click on the Update button above to see the changes in effect.

Preview your design

Click on the Preview button to see your design come to life! You can see the code in action by hovering over and clicking on each component.

Export production-ready React.js code

Export a full React app or inspect each component separately when each component refers to the relevant open-source library.

Click on Get code or Sync to open your design in the Anima web app. Next, click Code mode to inspect all of your components' code below, make sure your code framework is set to React.

When you're ready to export, click Export code on the top right, select your desired export options, and voilà, you have your production ready code!

Upcoming features

  • More theme support

Get involved in our Anima Community Forum! 😎

New to Anima?

Learn More

Did this answer your question?