Material UI is an open-source library of UI components designers and developers can use to build React applications. It follows Google's guidelines for creating components, giving you a customizable library of foundational and advanced UI elements.
Using the Material UI React library you can add Material UI components to your React apps and switch seamlessly between CSS/JS and React even within the same app.
Material UI Design with Anima plugin
Anima supports various open-source React libraries, including Material UI, inside the Figma plugin! This means you can work with the same popular React components that developers use in production without ever leaving Figma.
Create your design with the latest Material UI guidelines and principles!
1. Open the Components Library and select MUI.
2. You can find all the components of the library on the left sidebar.
3. Select the desired component and customize its parameters: colors, sizes, variants, labels and others.
4. Select the frame and click the Insert button to add it to your design.
5. To edit the component, select it on the frame, and you’ll see an ‘Edit’ button in the Anima plugin's main panel. Customize the component and then click ‘Update’ to save the changes.
6. To see the components in action, click ‘Preview’ at the bottom of the plugin