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
Create your design with the latest Google Material Design guidelines!
1. Select the artboard in Adobe XD, 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. Click the ‘Insert’ button to add it to your design.
5. To edit the widget, select it on the canvas, and you’ll see an ‘Edit’ button in the Anima plugin's main panel. Customize the widget and then click ‘Update’ to save the changes.
6. To see the code in action, click ‘Get code’ in the Anima plugin's main panel or syncthe file and export the code in the Anima web app.
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 the 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!
Get involved in our Anima Community Forum!
New to Anima?