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.
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.