Introducing: Design system automation - Anima Blog
Product updates

Introducing: Design system automation6 min read

Reading Time: 5 minutes Anima’s goal with design system automation is to help core product teams, designers and developers, build and maintain design-systems faster, with automation.

Introducing design system automation by Anima

Introducing: Design system automation6 min read

Reading Time: 5 minutes

Introducing: Design system automation

Anima’s new release streamlines design system maintenance

I’m excited to announce the launch of design system automation by Anima!

Anima’s goal with design-system automation is to help core product teams, designers and developers, build and maintain design-systems faster, with automation. Design and development speed will increase and allow short development lifecycles. Get access here.

Introducing Design system automation

The future of product design and front-end

Gartner has recently named Anima as a representative vendor of design-to-code and the modern way to go about it. With over 350k installs on the Figma community, Anima is the #1 integration in the ‘development’ category on Figma. We lead the design-to-code motion and have a deep thesis about the future.

We have seen product design and front-end become closer over the past decade. And although concepts are becoming more and more similar, these are still two separate worlds. That will change, and those worlds will gradually merge.

Product designers will play a bigger part in software development lifecycle

Product designers and front-end developers own the digital storefront of every business today. These teams will run closer with automation tools, and the recent AI wave will only speed up the merge and amplify its impact.

AI already does magic around code and design. ChatGPT can already code a specific method and usually does a good job. Midjourney can draw nice, simple interfaces as a single image. Anima’s AI can convert Figma/XD/Sketch designs into static React and HTML. But this is only the beginning.

Product design and front-end are closer than ever. AI will help merging these two worlds.

By 2035, we expect the approach of basing design systems on open-source libraries to accelerate and spin with AI: Companies will have custom components and flows on top of open-source components and tokens, themed to their own brand, of course.

Product designers will design components faster with AI, theming and mixing existing components into bigger organisms. Product designers will add logic with AI – Prototypes with micro-interactions, UI logic, and connection to real data will be generated automatically. AI will reuse existing code, both proprietary and open-source.

AI will become the junior designer and developer in the team that does the heavy lifting but doesn’t make the calls. Then the gap between prototypes and the real product will fade away, as it will all be based on production-like code. Engineers will still be the gatekeepers of production.

The first step towards this future starts with today’s release.
We started with design to code, and the path to the future goes through code-to-design, and it is a huge milestone. A lot is happening at Anima, and we are excited to take an active part in product design and front-end evolution.

Design-system biggest pains are maintenance and adoption

Design-system pains

Design systems are at the core of product design and front-end development today. It is how we communicate and build robust and coherent products. Design systems are already the standard methodology in most mature companies. However, key pain points for mature organizations are design-system maintenance and adoption across teams.

We’ve spoken with hundreds of teams during 2022, and the stories are similar: Everyone wants and needs a design-system. Some have more resources to maintain it, some don’t.

A half-maintained design-system will not get adoption, and will create disconnections between designers and developers.

The math is simple: With 100 components in a design system, and each component requires 3 days to maintain in Figma a year (Tables, charts, tree-views, and multi-variant cards are some of the hardest), you realize that at least 1 designer works full-time on maintenance.

Code is the ultimate source of truth. It is what our users interact with.

A single source of truth: Code

The first version of design system automation will bring a single source of truth, bringing your code components into Figma. Anima will generate Auto-layout, variants, and design tokens directly from Storybook. As it evolves, design-system automation will sync design and code continuously in both ways.

With a single source of truth based on your code, R&D teams can run faster, build robust products, and focus on creativity. The technology reduces the time and effort required to create and maintain a design system. This results in a significant reduction of manual, repetitive work and helps to free up time for bringing more business value and focusing on creative tasks.

Design system automation — How does it work

Anima keeps UX and Front-end teams aligned with an up-to-date design system in Figma. With a single source of truth based on your code, teams can build robust products faster, skipping the design maintenance work and improving designer-developer communication.

Design system automation is syncing Storybook and Figma continuously

1.Turn your Storybook into a Figma library with Anima:

  • Continuous updates — Anima will push updates from the code to Figma.
  • Figma variants — Anima will map code states into native Figma variants.
  • Auto Layout — Anima creates auto-layout based on CSS, automatically.


2. Build faster with Anima’s code snippets:

  • Code snippets in Figma — Anima adds references to code components based on variants.
  • Onboard developers faster — An exact representation of the code in Figma means more reuse and less time looking for what functionality exists in the code.
  • Design system adoption — A highly maintained design-system drives adoption.

Join us in building the future

Anima’s design system automation is changing the game for product design and front-end development teams. With a single source of truth based on code, teams can build and maintain their design systems faster, focus on creativity, and bring more business value.

Join us on this journey to the future of product design and front-end development, where we lead the way with cutting-edge technology and a deep commitment to innovation. Get access here.

Join us


Co-founder & CEO

A seasoned software engineer on a mission to improve developers’ lives and evangelize the power of code. When creating new software is made easier by software, he’s happy². In his leisure time you’ll find him trotting the globe, book in hand, in search of new perspectives.

Leave a comment

Your email address will not be published. Required fields are marked *