Introducing Generative AI in Design-to-Code at Anima4 min read

Latest AI releases from Anima and what’s around the corner

Anima is an AI-powered design-to-code platform, turning Figma/XD into runnable, pixel-perfect code.
In the background, Machine Learning elements are already auto-naming layers and cleaning code, so engineers can build 2x faster.

Anima is the leader of the design-to-code space – With over 700k installs, Anima is the #1 Figma add-on in the community for developers. We proudly serve teams from industry giants like Amazon, Cisco, Samsung, and Deloitte. Users report a 50% reduction in UI coding time, thanks to Anima.

The longtail of coding conventions

So far, we’ve focused on high-end React and HTML code. The code quality of Anima is unmatched in terms of being pixel-perfect, clean, and maintainable.

In the past 12 months, we’ve held Zoom sessions with over 1000 R&D teams. Despite 44% of the market choosing React for new projects, the Front-end tech stack is fragmented. In 1000 teams, there are multiple repositories, each with its own conventions.

The entry of GenAI

Combining Anima’s state-of-the-art code generation engine with GenAI capabilities means more frameworks, faster development, and maintaining high-performance code.

The use of LLMs enables us to support more coding conventions and scale our offering more quickly.

Since Anima has visual testing built-in and Figma features support from layouts to styles, to components and interactions, and you get all of it right away.

What it means today

As of today, Anima Figma users can start exporting design to Vue/CSS, Vue/Tailwind, (both Vue 2 & Vue 3), and React/Styled-components. In JavaScript or TypeScript. This matrix of code Frameworks, Styles and conventions will keep growing rapidly.

With the power of artificial intelligence, we are poised to expand our framework support, offering developers an even wider array of options for their front-end development needs. This means that whether you’re working with established frameworks like Angular, Ember.js, and Backbone.js, or exploring newer technologies like Svelte, Meteor, or Aurelia, our product will be ready to assist you. We understand that the frontend development landscape is diverse, and our AI-driven approach ensures we can cater to projects of all sizes and complexities.

Moreover, for those seeking simplicity and efficiency, frameworks like Mithril, Alpine.js, and Stencil can also benefit from our AI-enhanced front-end code generation. The future holds exciting prospects as we harness AI to continually enhance our product’s capabilities and support various frameworks, ensuring that we stay at the forefront of innovation in the front-end development landscape.

Just a heads-up, AI might take a bit more time to cook up the code, but the result is top-notch quality and efficiency. Plus, it’s personalized to your team’s coding conventions.

Anima vs multimodals

Anima with GenAI and multimodal Large Language Models (LLMs) are both groundbreaking innovations, but they serve different niches in the technological landscape. While Anima focuses on bridging the gap between design and development by directly converting design platforms like Figma into actionable code, such as React, multimodal LLMs combine textual understanding with visual processing to understand and generate content across multiple modalities. Think of Anima as a specialized tool that streamlines the web and app development process, turning design blueprints into reality without the need for manual coding. In contrast, multimodal LLMs like OpenAI’s ChatGPT with image input capabilities are more about broadening the horizons of AI, enabling it to interpret and produce both text and images synergistically. Both are transformative, but while Anima optimizes the workflow for designers and developers, multimodal LLMs open new doors for comprehensive AI-driven content creation and understanding.

Anima excels at translating designs into pixel-perfect code, capturing every detail from platforms like Figma with precision. In contrast, while multimodal LLMs are versatile in handling both text and images, they aren’t tailored for the exacting task of perfect design-to-code replication. Anima ensures design fidelity; LLMs offer broad content understanding.

What’s next?

In the upcoming version of Anima, we’re elevating the design-to-code experience to unparalleled levels of customization. Recognizing that every development team has its own coding style and conventions, Anima will now allow users to provide a sample from their own codebase. The platform will then intelligently analyze and adapt, ensuring that the generated code not only retains pixel-perfect design fidelity but also seamlessly blends with the existing coding patterns and conventions of the user’s project. This personalized approach promises to dramatically reduce integration time and ensure that the output feels right at home within any codebase.