Anima has been working on design-to-code tools since before the recent AI craze. A few months ago, they added support for shadcn/​ui components, which I tried last week on my current project designed with this library.

Unlike v0, they parse the Figma file and get a lot of details right. I was impressed with how accurately it selected shadcn/​ui components, even if layers weren’t explicitly named or instances were detached in the mockup. It becomes obvious that parsing a file is the right approach when different components look the same on the surface. For example, the trigger for opening a dropdown or date picker uses the same button, but they are different Figma components under the hood, and Anima chose their counterparts in code correctly.

Exporting custom colors and typography variables to a Tailwind config is also a nice touch. I ran into a few issues with excessive Tailwind styling and newer shadcn/​ui components like the Sidebar not being recognized, but overall, this clearly feels like the right direction.

The team at Anima asks a controversial question, and makes a strong case for Storybook being the single source of truth: ​“Even though products begin with the components in the design, the end-users of those products will actually experience the components from the code. The single source of truth, then, is what users will actually see in the end.”

“In this tutorial, we redesigned SVBs banking dashboard using Anima’s open source Component Library for Figma, then connected our data using Strapi’s headless CMS. Now you can launch fullstack React apps at lightning speed using the same approach.”

A cool explainer of impressive interactive effects made with Figma, Spline, and Anima.

“Today’s launch of Anima 5 marks another milestone on our mission to perfect the design-to-development workflow: truly functioning Material Design in Figma and Adobe XD. This means you can now build prototypes using actual code-based Material UI components.”

Creating responsive prototypes with Figma and Anima.

Anima has announced the launch of version 4.0, which will allow designers to create prototypes in Figma that are translated into components in React with the click of a button. See an article on TechCrunch or watch an overview by Femke.

Cool app for creating high-fidelity prototypes and exporting HTML from Figma designs. See also their review on DesignCourse YouTube channel.