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, and Recharts.

Select a UI library

Open the component library from Anima's plugin main screen. On the next screen, you'll get a list of the available UI libraries.

You can find more info for each library here: MUI, Ant design,

Choose a component and modify its properties

All components are fully customizable.

Once you select a library, you can find all the components of the library on the left sidebar. Each component has its own properties. Configure the properties as needed.

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

Insert your component

Click on the Insert button to add your component to Figma canvas.

*Currently, we're inserting an image of the component, but very soon we'll be able to insert them as Figma layers.

Preview your design

Click on the Preview button and see your design comes to life! You can see the code in action by hovering and clicking 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 the Get code button/ or the Sync button to get your design to Anima's web app. Next, open code mode, and you'll see all the code export options you have.

Make sure the framework is React since the source code is in React.

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.

Upcoming features

  • Theme support

Get involved in our Anima Community Forum! 😎

New to Anima?

Learn More

Did this answer your question?