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