DEV Community

desvocate
desvocate

Posted on

How to automatically create UI components that match your code library

No more trying to match designs to UI components - just production-ready code. \o/

Here's how

  1. Go to Figma and install the Anima plugin
  2. Work with live UI Components that update automatically.
  3. Sync and share with the team.

Designers will be using live UI components in Figma that match the same open-source React libraries that you're already using in production, so you can:

  • Skip the grunt work of searching open source libraries for components that are β€œclose enough,” then editing props to match the design.
  • Access a component library made with React components from three of the popular libraries: MUI, Bootstrap, and Ant Design.

Additional resources:

Top comments (2)

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡

Does that consists on pre-defined components that you can customise a bit or is it a WYSIWYG component builder?

Collapse
 
desvocate profile image
desvocate

Hey @joelbonetr! The Anima library components in Figma are fully customisable.

Here's a little more on how it works (with a couple examples).