Check out our Widget Library FAQs here

Anima's Widget Library holds a collection of interactive components that already contain code snippets inside of them. The Widget Library currently consists of the Material Design Library, Google Maps and soon we'll release Bootstrap as well.

Material Design Library

Watch Video Tutorial

Create your design with the latest Google Material Design guidelines!

Library documentation

Github

1. Open the Widget Library and select Material Design.

2. Click Edit theme if you'd like to customize your Material Design styles to better reflect your product’s brand. We currently only support the colors theme.

You can set up your brand colors, and it will affect all the components in this library.

3. You can find all the widgets of the library on the left sidebar. Select the desired widget and customize its parameters.

4. Select the canvas and click the ‘Insert’ button to add it to your design. You can also drag and drop the widget into the frame ( only in Figma❗️).

5. To edit the widget, select it on the canvas, and you’ll see an ‘Edit’ button in Anima plugin's main panel. Customize the widget and then click ‘Update’ to save the changes.

6. To see the code in action, click ‘Preview in browser’ in Anima plugin's main panel.

Google Maps

1. Open the Widget Library and select Google maps.

2. Customize the map, select the layer and click the ‘Insert’ button.

3. Click the 'Preview in browser' button in Anima plugin's main panel to view the map live.

Getting started 😀

Try our sample projects to explore all the possibilities of the Widget Library!

Adobe XD sample project

Figma sample project

Did this answer your question?