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:

• Install the Anima plugin for Figma.
• Using UI Components with Anima and Figma
• Why design-to-code

Comments

[JoelBonetR 🥇]

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

[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).