Introduction

Ant Design (antd) is an open-source React UI library. It contains a set of high-quality React components and is useful for building an interactive user interface.


Ant Design with Anima plugin

Anima supports various open-source React libraries, including And Design Library, inside the Figma plugin! This means you can work with the same popular React components developers use in production without ever leaving Figma.


Easy-to-use

  1. Create your design with the latest Ant Design guidelines and principles!

  2. Open the Components Library in your Anima plugin and select Ant Design.

3. Choose the components of the library on the left sidebar to make your design interactive: you can add Ant Design login forms, pagination, switches and other React-based components.

4. Select the desired component and customize its parameters: color, size, states, placeholders and more.

5. Select the frame and click the Insert button to add it to your design.

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

7. To see the components in action, click ‘Preview’ at the bottom of the plugin

8. Export a full React app or inspect each component separately when each component refers to the relevant open-source library: click on Get code or Sync to see your design inside Anima's web app. Next, click < code > to see your design's code come to life, along with the different available export options.

💡 Tip: To maintain the original code, make sure the code framework is set to React.


Get involved in our Anima Community Forum! 😎

New to Anima?

Learn More

Did this answer your question?