In the age of generative AI, we expect AI to simply understand us. And in many cases, it already does. And it is pure magic when some tool provides exactly what you need, based on a tiny hint.

Our goal at Anima is to automate front-end engineering so humans don’t waste their time. During 2023, Anima’s AI produced over 750k code snippets, the equivalent of 1,000 years worth of human coding. With over 1 Million installs on Figma’s platform, Anima is leading the design to code space.

As the next phase, we take a deeper path into automating front-end day-to-day coding.

Today’s LLMs do not understand Front-end and UI

There are many models around code generation, from code completion to instructions. There are multiple popular Copilots – Coding assistants that help you code faster and are based on these code models.

However, when it comes to Front-end automation, we believe there’s a big gap between what’s out there and what’s possible. With Anima’s capabilities and our understanding of this domain, we’re aiming to solve this gap.

And so, today, we announce Frontier – An AI coding assistant for developers building Front-end.

Frontier – AI Code-gen with your code in mind, tailored for frontend

Anima Frontier meets developers where they’re at, the IDE. Starting with VSCode, the most popular IDE.

First, Frontier analyzes the entire codebase and maps your code design system, frameworks, conventions, and components. This part takes seconds and is done locally, so your code is as secure as possible.

Second, using Anima’s state-of-the-art design-to-code engine, Frontier analyzes your design and simply understands what’s in the design version and the code of the design system.

And lastly, you could pick any part of the Figma design right inside VSCode, and get code based on YOUR code. And it is magical.

Start Free

Check out this walkthrough of Frontier by Andrico, developer at Anima

Increasing Design-system adoption with automation

Mature projects often have hundreds of components, if not thousands.
Design-system governance and adoption are challenging tasks that are crucial for maintaining these projects. Automation helps.

AI Security and Guardrails

Frontier was built from the ground up to offer an Enterprise-level secured solution.

AI adoption in Enterprise companies has more friction due to popular privacy concerns:

• Egress privacy: How do we ensure that our code doesn’t “leak” into the LLM model through training, which means other companies might receive snippets of our code?
• Ingress privacy: How do we ensure that other companies’ code that might have been fine-tuned or trained into the LLM, doesn’t enter our code base – causing security and potentially copyright concerns?

In order to generate code that integrates Anima’s interpretation of the Figma design, but uses the components in the user’s code base, we could have taken the easy way and simply trained the LLM around the code base. This has severe privacy and security implications, as we would have needed to upload a significant amount of user/enterprise code and train a custom LLM around it. We realize how critical security and privacy are, particularly to developers in Enterprise environments. We therefore took a completely different direction.

Instead of uploading code to the cloud, we implemented local data gathering, indexing, and ML models, locally, inside VS Code. These identify and index the relevant code on the developer’s machine. The gathered information is stored locally, as part of the code base, which means it can be shared securely within the team through Git – and not through the cloud. When a particular component needs to be instantiated, we are able to perform a significant amount of preprocessing locally and send the LLM in the cloud only a small amount of code and information it needs – not enough to expose the enterprise to any risk in Ingress or Egress. This innovative approach has the added benefit of performance, as most of the operations are done on the developer’s fast computer.

Under the hood of Frontier – LLMs, ML, and AI-first architecture

Anima Frontier is automating the front-end with AI, based on Anima’s vast experience in leading this space and utilizing the most advanced tech for the mission.

We often see impressive weekend projects that are 99% powered by LLMs and have amazing results 30% of the time. These are cool projects, but they are not suitable for professionals.

LLMs, as powerful as they are, open new doors but aren’t silver bullets; they require a supporting environment. At Anima, we test and benchmark, choosing the right tool for the right task. When it comes to LLMs, we provide them with context, validating their results and setting them up for success.

In the process of solving this complex problem, we broke it down into tens of smaller problems and requirements. Some problems require creativity and are solved best with LLMs, and specific models are faster and perform better than others. Some of these problems require classic Machine-learning / Computer Vision problems, i.e. classification rather than generation. Some are solved best with heuristics.

By combining the best-of-class solutions for each individual problem, we can produce mind-blowing results with minimal risk of LLM Hallucinations, which are so prevalent in LLM-based code solutions.

What’s next for Frontier

As we look to utilize everything possible with AI to help developers code Front-end faster, it feels that we’re just scratching the surface. Anima Frontier should be able to merge code with design updates, heal broken code, understand states and theming, name elements correctly, read specs, and think more and more like a human developer.

We have a rich list of features, and we need you to tell us what bothers you most and what you’d expect AI to do for front-end developers today. Join the conversation on Anima’s Discord channel.

Start Free

The post Introducing: Frontier, the future of front-end by Anima appeared first on Anima Blog.

Update: Frontier, Figma to code in VSCode, is now accessible to all!

With almost 1M installs on Figma’s platform, Anima is leading the design to code space. As the next phase, Anima is evolving into a front-end coding assistant. In this article, we will cover the challenges our customers are having and how we address more of them by taking a more active part in helping R&D teams deliver faster daily.

A big step toward becoming developers’ sidekick is Anima’s new VSCode extension, now available in beta. With the first beta, you’ll be able to turn Figma into code right inside Visual Studio Code.

Anima’s code is clean, runnable, and has high fidelity compared to the Figma design. All you need in order to start is a link to a Figma file, and the rest append in the IDE. Select any layer, turn it into code, extract visual assets, and deliver great UX at half the time.

Today’s new beta means that Anima will now be available in developers’ home court. We have a great roadmap around how to interact with existing code and integrate smoothly into your workflow.

How to Turn Figma to React in Visual Studio Code

Here is the gist:

1. Install Frontier, Anima for VS Code
2. Paste a Figma link into Anima
3. Select any part of the design to generate React code
4. Assets are available under “Asset Manager”

Generative AI and Front-end Code Automation

As generative AI is slowly maturing, companies are experiencing AI tools and discovering the pros and cons of providing such solutions to their teams. AI in places such as email and document creation, as well as data analysis, is becoming a no-brainer.

GenAI tools in software development are less straightforward. These are the early days, and we are starting to see a variety of solutions for developers, ranging from chat interfaces to interactive WYSIWYGs, to coding completion, such as GitHub’s Copilot, and all the way to an “AI Developer agent” that tackles bugs.

When it comes to Front-end automation, we believe that there’s a big gap between what’s possible and what’s out there. And with Anima’s capabilities and our understanding of the space, we can do much more. 

A Developer’s Sidekick – Evolving into a Front-end coding Assistant

Gradually, Anima will help developers run faster and faster as they build and maintain front-end code. Mixing Anima’s code-gen engine with GenAI in multiple ways opens new doors to what’s possible. From building new workflows on top of existing code, and all the way to maintaining and governing design systems and even older legacy code.

If you wish to become a design partner and help us shape the future of Front-end, contact us.

Who is This For?

Any dev team building Front-end, starting with those building with React.

Anima’s front-end coding assistant does not compete with Github Copilot, Tabnine, or Amazon’s CodeWhisperer—it complements and expands the amount of coding you can automate.

With this first release, we start by bringing the same offering of today’s Anima to VSCode—Figma to React—runnable, pixel-perfect UI code. Next comes design-system integration and front-end code base maintenance and monitoring.

We’d love to hear your feedback, join the beta, and give it a spin

The post Anima’s VSCode extension: Figma to React is now in your favorite IDE appeared first on Anima Blog.

Anima recently welcomed Ofer as its new Vice President of Research and Development. With our focus on AI and GenAI, and Ofer’s rich experience at Wix, we believe his perspectives are incredibly valuable to our community. We recently sat down with him for a conversation, and we’re thrilled to share some highlights with you.

For those who may not be familiar, Anima is the modern way of transforming design into code through AI. With over 800,000 installs on Figma and 400,000 on Adobe XD, Anima is leading the way in the design-to-code space.

Ofer, tell us a bit about your background

I’ve been coding, managing software building processes and software engineering projects for almost 30 years. From smaller startups to big companies – but my favorites are startups, of course. I joined Anima after managing the Editor R&D team at Wix for over two years. Before that, I managed R&D in multiple startups and managed and sold my own startup company.

At Anima, we’re focused on automating the visual elements of front-end engineering. Can you share your thoughts on the future of front-end engineering in the AI era?

Designers in our space are experiencing a really big shift over the last few years: they are becoming much more sophisticated, they are more exact in their demands from the front end, and the level of expectations from them is rising and becoming more complex.

Designers themselves are becoming increasingly technical, too. Their demands and expectations from front-end developers are also evolving. They’ve gained a deeper understanding of CSS, design systems, and the intricacies of responsive design. Their tools have evolved too, leading to more structured and efficient workflows. This evolution means that front-end developers are increasingly the technical implementers of the designer’s vision, shifting their role toward technical execution. I see a lot of “ping pong” between these two personas, trying to pin down the design and implementation and often leading to friction between these two critical functions building our digital world.

With the rising expectations and sophistication in UX, the roles of UX and product designers are becoming more prominent. Developers are now utilizing AI tools like Copilot, which enhances their efficiency by reducing time spent on repetitive tasks.

Remember the days when we were grappling with issues like pixel-perfect designs and responsive components? Designs were essentially “flat” images and in some cases were shown in different snapshots based on sizes. However, there were a lot of gaps in behavior that the developer would need to “guess” or discuss with the designer, wasting time for both sides.

Now, tools like Sketch and Adobe XD and predominantly Figma, which supports components, design tokens, and Auto-Layout, are addressing many of these challenges directly in the design phase, saving everyone involved considerable time.

Devs increasingly lean towards open-source solutions, shortcuts, and more streamlined frameworks. The progression from javascript + jQuery/Bootstrap to modern languages and frameworks, TypeScript + Angular, Vue, React, and NextJS is a clear indication of this trend, boosting both efficiency and productivity.

How do you envision AI’s role in this evolving landscape?

Copilot and similar tools, will provide front-end devs shortcuts that would make them more productive. Developers would be able to “pull” code directly from the design and reach production faster with automated tests and without having to repeatedly ping-pong with the designer or other team members.

At Anima, our goal is to develop tools that simplify the development process by shifting the developer focus more towards business logic and less on the mundane work of creating pixel-perfect designs. Our challenge lies in intelligently ‘understanding’ the specific coding practices, frameworks, languages, and subtle nuances unique to your team’s codebase and producing code that looks more like it. This approach aims to eliminate the need to start from scratch every time a designer introduces a new component, alters a composition, or modifies existing designs. Ideally, AI would assist developers in deciphering these elements, allowing them to concentrate on architectural details, the finer aspects of design, and the intricacies of state management and business logic.

We are seeing that Copilot and other similar tools are gaining popularity with developers. I have long ago ditched Google in favor of ChatGPT for my daily “how-do-you-do-this” queries. It’s simpler than Google and gives me the answer rather than sending me through a series of hoops I have to jump through to find my answers. Generative AI is a tremendous leap for productivity.

I’d love to hear your thoughts about the future, particularly regarding generative AI, which is a significant part of it. As someone deeply immersed in technology, where do you envision AI altering our reality in, say, the next 5 to 10 years?

Considering the developments of the past 2-3 years, attempting to predict the next five years seems virtually impossible. The impact of ChatGPT, along with the advancements from Meta’s LLAMA2 and Anthropic’s Claude, were beyond my predictions. The pace of progress, especially in the last year, has accelerated exponentially.

I’m inherently optimistic, as are many in the startup and product management communities. Predicting the future is challenging, but I’m confident, especially considering the number of talented individuals working on these projects. I view current AI advancements more as machines with exceptional memory recall rather than possessing a ‘spark of intelligence.’ Therefore, I don’t subscribe to the notion that AI will bring about an apocalyptic change. This perspective is shaped by recent technological breakthroughs: autonomous cars haven’t replaced all drivers, blockchain hasn’t eliminated banks, and quantum computers haven’t decrypted all encryption. These advancements are significant, and while they may revolutionize various fields and technologies, I believe they won’t fundamentally alter the world as a whole.

This technology will be incredibly beneficial, not only for developers but for humanity at large. However, it’s crucial to ensure that AI isn’t solely focused on optimizing tasks like manufacturing “the most efficient screwdriver”, to the point where it could potentially have adverse effects on the world in its pursuit of optimizing efficiency.

Considering the current state of AI, how would you compare open-source platforms to off-the-shelf products like ChatGPT, Claude, and all the projects popping regularly on Hugging Face?

Let’s distinguish between large language models and other AI models. In fields like image categorization and generation, there’s significant progress across various fronts. We’ll likely see which technologies excel once the field stabilizes. In my view, OpenAI has notable gaps in generative imaging, and even GPT-4’s vision capabilities haven’t been as transformative as I initially had hoped.

For instance, many attempt to use GPT-4’s vision capabilities by feeding it a screenshot and expecting it to generate high-quality code. However, in our tests, the results have been less impressive compared to our current state-of-the-art design-to-code technologies. Often, the generated code is inadequate and not a reliable foundation for further development. The outcomes frequently don’t align with what developers or designers would deem usable. A critical question we often consider is whether this serves as a practical starting point for a developer, or does it take more effort to fix than create the code from scratch. Of course, this doesn’t rule out the possibility that future iterations of this technology might overcome these limitations and function more effectively.

In terms of Large Language Models (LLMs), our expectations for Anthropic were higher than their current performance. Nevertheless, we remain optimistic about their upcoming releases. Meta’s solution, while effective, is somewhat limited due to token constraints and issues with hallucinations. GPT-4 Turbo is an impressive tool, but it currently has its limitations, such as generating ‘skeleton code’ that often results in excessive ‘todo’ comments throughout the codebase.

I believe we’re close to seeing the open-source community develop a code-centric public Large Language Model (LLM) like Mistral that rivals OpenAI in specific languages and frameworks, trained on a more targeted set of code templates. Such a development would be a significant breakthrough, though it hasn’t yet occurred.

OpenAI continues to lead in areas like contextual memory, speed, quality, and the pace of advancement. Despite the recent turmoil within the company, I hope this doesn’t significantly impact their progress. They seem to be on the right path, with innovative ideas, and with Microsoft’s support, the advancement of state-of-the-art technology is progressing rapidly.

Fascinating. In the realm of ‘Design to code’ and front-end automation, Anima is currently at the forefront, though this field is still in its nascent stages. Assuming Anima maintains its leadership position, where do you envision the company heading in the future?

My hope is for Anima to be regarded as a Copilot tool, one that developers regularly use to seamlessly integrate their Figma design changes into code. This would enable them to focus on enhancing and refining the code, concentrating on the more complex aspects of R&D.

The code generated by this tool should be familiar with your existing codebase, components, frameworks, and coding style. Ideally, it would take over the routine tasks typically handled by a junior front-end developer, such as creating tests. Additionally, you should be able to interact with it, requesting specific code modifications as needed.

This approach would allow junior engineers to concentrate on more challenging tasks, such as developing state management, good architecture, choose the best framework, work on CI/CD and, of course, the business logic: all of which are not necessarily immediately apparent from the design.

Great, thanks a lot Ofer. And we are very happy to have you onboard!

The post Interview with Ofer, Anima’s Newly Appointed VP of R&D appeared first on Anima Blog.

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.

The post Introducing Generative AI in Design-to-Code at Anima appeared first on Anima Blog.

 

I am the CEO and co-founder of Anima, the leading platform for automating design to code with AI.

With over 600K installs, Anima is the #1 tool for developers in the Figma store and was recently named a representative vendor of the design-to-code space by Gartner.

 

I talked recently about the future of product design and development teams. Here, I put things in writing.

 

Our thesis around design-dev alignment is straightforward.

The two worlds of product design and development have been moving toward each other rapidly for over a decade. And although the concepts have become increasingly similar, we still have two sources of truth — Design and Code.
Anima is here to automate design-to-code with AI, freeing developers and designers to create and build digital products faster.

Background: Why is UX so important?

Let’s start with the motivation for improving this process of taking user experience to production.

We live in a digital world. Every day, my phone tells me I spent 3–4 hours on the tiny screen. And thank God my laptop doesn’t tell me how much time I spent there because it’s probably 8–12 hours. We work, communicate, and eventually live a significant portion of our lives on the screen.

We experience everything on the screen through the UX of all the software we use — Google, Slack, Zoom, Gmail, Google Docs, IDEs, Figma, any way of non-face-to-face communication today, financials from banking to trading, shopping, ordering food, reading books, reading the news, watching videos, listening to music, trip planning, taking notes. It’s all digital.

For almost any business today, their website and mobile apps are the new storefront. You want to serve your clients, provide value easily, and engage with them in the best possible way.UX is at the core of every business today, and it is how we experience the world. It is crucial.

Past & present: State of Design-Dev alignment

Over the past decade, designers and developers have made huge progress, introducing new tools and methodologies from handoff tools to the concepts of modular components and all the way to design systems.

• Design handoff — 10 years ago, designers manually created red lines and ‘slices’ and sent them over email or Dropbox. We are now living on the same tools — it started with Zeplin/InVision and now Figma.
• Modular components — This concept was brought from code and adopted with love by design tools, starting with Sketch, and quickly became a standard. It allows us both to design smarter with a more modular design with reusable elements and speaks the same language and concepts between design and code.
• Atomic design — Once we adopted components, Atomic design allowed us to start thinking about hierarchy and expanding design systems into a smarter foundation for design work.
• Design tokens — This is another level of shared communication around repeating values between design & code, from fonts to colors, to corner radius, spacing, etc.

“Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code.”
– Google’s material design

• Component properties — Components have become even more modular and robust with variables and overrides, allowing even more reuse, and again — similar concepts from development brought into the design process.
• Component variants — Yet another level of modularity, allowing our components to change their layout, content, and hierarchy to support different states (disabled, hover, error, expanded, mobile vs. desktop).
• Responsiveness — Auto-layout, Auto-responsiveness, Pins, Constraints, and other ways to make our design dynamic have made their way to design tools as the standard way to design.

Conclusions from 1000 talks: There is no silver bullet

Talking with a thousand Design system teams over the past year, we learned that the design-development alignment is not a solved problem yet. There is no silver bullet on how to do it perfectly. We are still evolving.

Here’s what we’ve learned from 1,000 talks with design systems teams:

• Figma is not fully updated. And code. And Storybook — Having two sources of truth makes it hard to keep up-to-date design with everything in code/production. A lot of maintenance is required, and most teams can’t afford it. 25% Started to adopt Storybook, and less than 40% managed to keep it updated.
• Everyone redesigns — 30% are redesigning now, 30% plan to redesign soon, and you cannot redesign if the design files do not reflect your live product.
• Multi-layer DS is a thing — Simply put, large companies need a core design system for multiple products/brands and expand it for every product/brand. Making the design system multi-layer.
• Open-source as a base — This is a great best practice. Save time on creating the components that every product has — Why reinvent inputs, buttons, and date pickers? Just define your needs first and align on the open source technology with both design and teams. The most popular choices are MUI and Ant, but many alternatives exist.
• UX Agencies — This is a fascinating case. UX agencies create and manage or hand off design systems regularly. They live and breathe design systems to the extreme and are specialized in setting them up. Here, the best practice of starting with an open-source or a proprietary base DS is widespread.

The future: The next phase is automation

AI is not here to steal our jobs. I believe it will allow us to design faster, build faster, communicate better, and be on the same page.I see the next phase of evolution in automation.Anima plays a crucial part in this phase of evolution. Anima has over 600k installs on Figma and over 300k on Adobe XD. We have recently partnered with Figma to co-launch #DevMode, where Anima turns design into code right inside Figma.

Near-term predictions

Anima is not alone. We will see more automation around design-ops and development alignment:

• Co-pilot design tools — Tools like Diagram will rise and help designers draft new flows based on your Design systems.
• Design Systems governance and adoption are classic tasks for AI.
• UX copy automation tools will assist in writing, micro-copy feedback, and applying voice and tone across your product.
• Tokens automation — Tokens are a great shared language between design and code. Tokens Studio already syncs design and code.
• Storybook automation — Storybook is excellent for DS alignment and adoption but is hard to maintain. AI will maintain it for you.
• Responsiveness and dynamic layouts (i.e., Auto layout) are incredible but take time. It will be automated, created, and maintained for you.

A lot is coming now that screen-first design tools have matured, and with new technologies that are now available thanks to Genetarive AI.

Where to Go From Here

First, I invite you to follow me & Anima on Twitter/LinkedIn. We’ll be announcing our upcoming releases, all of which are centered around AI-powered, automated design-to-code.My previous piece was related to the future of designers and developers in the AI revolution.

The post The Future of Design-Dev Alignment and Methodology appeared first on Anima Blog.

In the ever-evolving world of IT consultancy and digital transformation, Radiant stands out as a distinguished player.

With offices in the US, Canada, India, and Singapore, Radiant delivers results-driven services to a wide range of clients in various industries, Telecom, Oil & Gas, Sports & Entertainment, Education, Health Care, and Government

Their services range from digital experiences and application development to data engineering, data science, IT infrastructure, and workforce transformation. It has attracted a client base with prominent names like the National Institutes of Health, Verizon, Halliburton, Web.com, Navy Federal Credit Union, and the State of Florida.

Radiant’s mission to reshape industries and revolutionize user experiences has found a like-minded ally in Anima—a dynamic collaboration that has already spanned two impactful years.

I interviewed Jeff, the SVP of Services and Solutions at Radiant, and Lam, the Director of Digital Experience, to investigate why and how Anima has been part of the delivery process. 

The Digital Experience team (30 specialists within their workforce of 300) uses Anima’s Design-to-Code engine for new projects, Proof of Concepts (PoCs), Minimum Viable Products (MVPs), and comprehensive usability testing. The results? Higher product quality, shipped 2x faster.

Jeff also shared Radiant’s thesis around design and development alignment and design-ops maturity. I found it at the cutting edge of the technologies available today, as well as future-ready for what’s around the corner.

Q: Tell us about Radiant

We’re a growing business based in Vienna, Virginia with offices around the US and in Canada, India and Singapore. We support our customers in their digital transformation journey. That includes everything from strategy through digital experience, application development, data science, data engineering, infrastructure, and workforce transformation. Our clients include the Federal government, state governments, and a variety of world-class companies in the commercial sector.

Lam, the director of digital experience here at Radiant, is focused on redefining our digital experience offerings, taking advantage of emerging technologies to help us be more efficient, and ultimately build better products for our clients. 

Q: What kind of products are you building?

We often work in highly technical spaces. For example, we work with a large telecom client, doing things like advanced machine learning for 5G wireless signal propagation modeling, building visualizations of complex telecom networks, or helping them to create a better experience for their workers. 

A little background on one project for this client related to design automation. About five years ago we helped develop an internal domain-driven design system that subsumed numerous disparate user interfaces that company network engineers engaged with daily. This solved a lot of pain points in the organization, alleviating swivel-chairing and creating a more usable, intuitive and guided system.

Five years into this journey, and the entire application network IT portfolio has been standardized to this Design System. We continue to support by providing customer research services, design governance across the application portfolio, and managing the design system. In many cases, we guide the implementation of the design system when an application is being redesigned or developed, and that involves front-end development. So, that’s where Anima comes in—helping us maintain a well-structured tokenized system and going from design to code.

Q: What is Radiant’s workforce size?

We employ about 300 consultants worldwide. Our digital experience team is roughly 30 consultants; that includes people with expertise in areas like business anthropology, service design, user research, user experience design, and interface design.

Q: Tell us about Radiant and Anima

We recently introduced a new role within our organization—CX (Customer Experience) technologists. Their mission is to facilitate the design-to-development bridge—up to and including code generation.

Often our clients want us to quickly build POCs or MVPs for new experiences. They were asking us: “how can you guys get us from design to development faster?”. In the past, we used tools like Invision for basic prototypes, then we moved to Figma prototypes and things got a little better. But really, what we were looking for was a better way to test and a way to get to functioning application prototypes. 

Our journey with Anima and design automation started with one specific project where we really needed much more rich and realistic usability testing. We didn’t have the tools necessary, so we started to explore and understand what was out in the market. We looked at a couple of different vendors and found that Anima was the most holistic tool for our needs. We also use other tools, such as Tokens Studio, to help with design tokens. We started adopting these technologies about two years ago, and we feel like design automation isn’t fully solved yet. 

However, when it comes to code generation, Anima is the only game in town as far as we’re concerned.  A lot of people are very interested in code generation, given that everyone has tight resources, time constraints, and whatnot. Being able to produce a POC quickly, being able to tell clients we can deliver something in a week rather than a couple of months, being able to see something working in a browser so quickly, is incredible.

Q: Could you estimate how much time was saved thanks to Anima? – Compared to manual coding.

I would estimate we’re cutting the time to get from the starting line to a POC or MVP by about half (50%) using code generation. In more mature applications where we’re doing redesign or enhancement, it also cuts down quite a bit on design-to-dev mismatch and the wasted iterations that go along with it. 

Q: So, in addition to cutting 50% of the coding time, you also gain better product quality in fidelity?

Yes, product quality is better. It’s all about iteration time. 

Now we don’t have as much ping-pong between the design and the engineering teams. We used to spend a fair amount of time asking engineering to go back and fix design to code mismatch issues. And often, there were multiple cycles of “go back and fix it because it doesn’t look right”. And now, with Anima’s code generation, it’s virtually gone.

Q: Tell us about your thesis around design automation

We can start with a maturity model. At the lowest level of maturity, an organization might have a brand book. At the highest level of maturity, an organization will have a single source of truth between design and development that is continuously updated. We find most of our client companies sit somewhere around the third or fourth layer from the top of this pyramid.

We highlight the gap. This is something critical for any organization building digital products. We position our UX accelerator solution as a way to address the gap.  Our value proposition here, our solution stack, is a combination of our services and know-how, plus tools like Figma and Anima. We can help our clients adopt a baseline toolset—Figma, Anima, and a variety of other solutions. We can help them migrate into Figma from other tools, migrate, tokenize their design system, and immediately achieve efficiencies just in design processes. And then, ultimately, we can help them better connect their design and development environments. 

As we said before, design automation is still a work in progress for most organizations. Nearly all of our larger clients have a domain-driven design system in place. They use both React and Angular front-end frameworks. They use tools like Storybook to represent the components and so forth. And we have to make a connection between what’s in Figma, the design, the components that the designers are working with, and what’s in that developer code base. The approach we’re taking right now is largely leveraging code generation (Anima) for things like usability tests or for designing new domain components. In those cases Figma and code are synchronized continuously. And we have looked at many different technologies for doing this and settled on this stack and methodology.

Anima’s concepts align very well with our thesis.

Q: Amazing. What does your design-to-code process look like today? 

I’ll continue with the example we talked about earlier, the large telecom client. So in this environment the UX team uses a tokenized core design system, unless we’re working in a new domain and extending the system. Again this is a highly technical area—in nearly every project there’s new domain-specific work being designed in the interface. It gets much deeper than the standard components you find in a typical web design system like accordion control, cards, or whatever. So when we are working in those types of environments where it’s something that hasn’t been imagined in the design system before, then the design team will baseline new components and templates using code generation (Anima), and work with the dev team to extend them with interactive behaviors and get them integrated into the mainline system. 

In some cases, we’ll have executive sponsors give us the freedom to innovate outside the standard system, to really stretch and reimagine how things might work. And in those cases, we don’t have any choice but to use Anima’s code generation because we don’t want to manually code the new interface and custom components needed to solve a problem.

Before Anima, we’d use tools like Zeplin or Invision’s inspector. Developers would need to inspect things, figure out the design, copy and paste styles, and rebuild the design in code manually. Today, we can pull a component library and sync it to the Figma, hit Anima’s code generation button, and the design actually runs as code, getting us as close as possible to our desired end result—a live product. And then the developers are off to the races, integrating APIs and coding up the business logic to get things on the road.

Summary

Over the past two years, the Radiant team has leveraged Anima and other design automation technologies in order to complete a couple of months’ worth of work in a week. It is phenomenal. 

Radiant’s thesis around design and development alignment and design-ops maturity is at the cutting edge of the technologies available today and is future-ready for what’s around the corner. 

Anima will continue working closely with the Radiant team on future releases as we integrate with legacy code bases and existing design systems.

Special thanks to Jeff and Lam for sharing their insights and what goes behind the scenes.

If you did not try Anima yet, it is about time! 

The post Radiant: Delivering Digital Transformation – Twice as Fast With Anima appeared first on Anima Blog.

Developers, we have groundbreaking news to share! For months, we’ve been working closely with the Figma team to improve Figma’s developer experience.

On June 21st, Figma announced its new Dev Mode interface, an integrated suite of the leading third-party developer plugins and we’re excited to announce Anima for Dev Mode as part of this historic rollout!

For the first time, CodeGen 2.0—Anima’s new code generation engine—is available to the public as a Figma native integration. The code quality is unmatched, giving you instant, clean React.js with variant and interaction support inside Figma’s Dev Mode panel. No friction, no external syncing, and no delay.

We’re constantly working to improve the quality of our React and HTML code for developers, and thanks to your input we’ve set the bar for the entire industry.

How to access Dev Mode and use Anima’s CodeGen plugin

How to access Dev Mode and run Anima’s plugin

1. Get Anima for Dev Mode here
2. Switch to Dev Mode using the toggle in the top right corner of the Figma editor
3. Select the “Plugins” tab
4. Click on Anima to run the CodeGen plugin

How to export Figma components to React in Dev Mode

(In August 2023, Anima released HTML code gen in Dev Mode.)

You can now try Anima’s React code for free, right inside Figma:

1. Open the Anima plugin in Dev Mode 
2. Select a Figma component, layer or a Frame
3. In the right panel, select your code framework – you will get runnable code (React, HTML, CSS, Javascript, Typescript and more to come!)
4. Click ‘Download selection’ for a zip file with all of your code, or
5. Click ‘Open in CodeSandbox’ to run it instantly

What’s new in CodeGen

Here’s everything you need to know about Anima’s new code generation engine, including our latest and greatest improvements.

Overview

Anima turns Figma components into reusable React components instantly, right inside Figma, with no friction and no external syncing. You get:

• Clean React, Typescript or Javascript: Fully functional React code that can run instantly, including sub-component support
• Clean HTML, CSS: read more here
• Variant & props support: Stateful and interactive React components based on your Figma variants and props
• Responsive layout: Responsive CSS flexbox derived from Figma Auto Layout parameters

Latest code improvements

Code quality is our main focus at Anima. Your feedback and requests help us focus on what matters the most, and we’re working tirelessly to produce code that’s as clean and close to pixel-perfect as possible.

Here are a few of our most recent code updates

1. Interactive components and variant support

CodeGen now supports Figma variants, plus variant switching for on-click and hover interactions. Support for transitions is coming soon.

2. Variant support gets cleaner conditional CSS

Initially, the way Anima supported Figma variants resulted in lengthy React code with a large number of conditional inline styles.

3. Added support for Figma’s text and boolean properties

A lot of users have requested the ability to automatically convert Figma properties into React props. Following our latest Codegen update, all Text and Boolean properties defined in Figma will now be included in our generated code.

For example, consider the following button in Figma, which defines a “Value” text property and a “Has right icon” boolean property:

Now when we generate this button’s code, it’ll include the appropriate value and hasRightIcon properties:

4. Improved support for SVG icons

Another source of frustration for our users has been a lack of proper icon handling. In the React world, it’s common to represent SVG icons as React components (with tools like SVGR), as that makes using and customizing the icons much simpler.

After the latest code improvements, Anima now turns icons into React components—including all of the relevant props that control color and more!

For example, Anima detect an icon component in Figma.

And generate it as an Icon React component:

Once you convert a Figma icon into a React component, you can use it across your codebase as a regular React component and even customize the color as needed!

Try Dev Mode + CodeGen 2.0 for free and tell us what you think

Anima’s new Code Gen plugin for Dev Mode is free for all users during the rollout period, and even Figma users with read-only access can use our Dev Mode integration without limitations. You can install it here.

After the free access period ends, Anima Pro users will continue to get unlimited code exports for individual components, as well as full flows with multiple responsive screens.

We’re tailoring our code output to users’ wants, needs, and workflows, and your feedback really helps along the way.

Take it for a spin, tell us what you like and don’t like, and request new features.

Together we can accelerate your frontend builds and scale your impact as a developer—without scaling your workload. Try it free today!

The post Announcing Anima’s plugin for Figma Dev Mode, live from Config appeared first on Anima Blog.

I’m the co-founder and CEO of Anima, an AI-powered design-to-code platform. Anima turns design and code into a two-way street with AI. With over 400k installs, Anima is the #1 tool for developers in the Figma store and was recently named a representative vendor of design-to-code tech by Gartner.

In this article, I’ll give you my take on the future of design and development considering recent advances in AI and what’s around the corner.

The AI Genie is Out of the Bottle

Large language models (LLMs), such as OpenAI’s GPT, process and generate code at a human level after learning from every open source across the internet. And OpenAI is not alone.

Google’s Bard reviews and writes great code, Facebook’s LLaMA was open-sourced for noncommercial use, and there are more open-source projects such as Replit’s LLMs.

In other words, the AI genie is out of the bottle.

On the visual front, models like Midjourney can generate incredible images, from photos to art, for user interfaces.

These rapid advancements are transforming entire industries, including design and development, as emerging tools and platforms are being built on these cutting-edge technologies.

Design and development will look very different five years from now. So will content marketing, support, video production, and countless others. AI is here to stay, and it will change everything.

AI Will Help You Run Faster

I envision a future where R&D teams can deliver products 10x faster—and I think it’ll be a reality within a few years. The result will be tiny teams that are able to build and maintain large, complex products. Products that used to require too much work to be commercially viable will suddenly make sense. We will see software solutions for everything, everywhere, all at once.

Take CoPilot, GitHub’s AI coding buddy, as an example. CoPilot writes 40–60% of the code for developers that use it today—which makes them 2x faster. Microsoft — which owns GitHub—recently announced CoPilot for its office suite. It will help you write in Word, create Excel formulas, and design PowerPoint slides in a fraction of the time.

What would a CoPilot for Figma look like, doing 40–80% of the grunt design work? We will soon see dozens of these tools, and the best ones will be widely adopted.

AI-Powered Design to Code

Here at Anima, we’re focused on automating processes between design and code. We are making Design and Code a 2-way street.

The lines between product design and front-end development will blur as design work automatically impacts the code base and vice versa. As a result, team structures and methodologies will look very different five years from now.

R&D and design leaders must prepare their organizations to adapt to this new reality.

Opportunities and Challenges for Designers and Developers

Every designer can now create illustrations, photos, 3D renders, and other labor-intensive visuals in seconds.

Every developer can now code in any popular language, train models, and solve common problems in a fraction of the time it used to take.

Soon, individuals and teams that adopt AI technology will deliver 10x faster than before.

Generative AI can help unlock creativity and approaches that may not have been considered previously, leading to more innovative solutions.

With the rapid rate of AI progress, designers and developers must continuously acquire new skills and methods in order to deliver more value and stay relevant.

We are becoming the architects and leaders for teams of AI agents.

On the flip side, there are concerns about the potentially negative impacts of generative AI. Some creators worry that AI may replace their jobs altogether or make them less valuable to clients and employers. This is why it’s important to understand both the capabilities and limitations of generative AI—and to be able to harness the technology to scale our impact.

Future of Design and Development Work in the Age Of AI

I am very optimistic about the future of design and development jobs.

It will be much cheaper to build software overall, which will mean more and more demand for software. So I expect a big wave of new opportunities for designers and developers coming soon.

Developers can look at this as a new level of abstraction. We’ve had Assembly, then C, then object-oriented, then garbage collection, then Python and JS — and we can consider the Prompt as the next level.

Ride that wave. Embrace AI and grow into harnessing its power.

AI Will Unlock Scaled Experiences

The way I see it, AI will allow us to do things that don’t scale — at scale.

AI can enable large-scale customization for micro-segments, offering tailored design, content, and experiences for different user groups. While there may be some initial hesitation to trust AI with such tasks, this trend will eventually take hold.

Video, voice, and conversational interfaces — the rapid improvement in AI-generated voice and video will lead to more conversational interfaces. You will be able to offer your users a higher level of UX and improve their day-to-day experience.

Where to Go From Here

First, I invite you to follow me & Anima on Twitter. We’ll be announcing our upcoming releases, all of which are centered around AI-powered, automated design-to-code.

If you‘d like early access to our upcoming LLM-based features, join Anima’s Discord. We’ll send out beta invitations on our channel around July-2023. Meanwhile, let us know about your hopes, dreams, and innovative ideas for the world of AI.

The post AI Revolution: The Future of Designers and Developers appeared first on Anima Blog.

Turning Figma components with variants into stateful React components.

• A button with multiple states like ‘disabled’ or ‘loading’ could help the user understand what’s happening. 
• A form input that can show a validation error right after filling it makes filling a form less painful. 
• A responsive card with a different layout on desktop vs. mobile can make your app easy to use on the go. And having a single component for all layouts means cleaner code that is easier to maintain.

• Select either a Main-component or a full screen with nested components.
• Click “Export code” → “React”
• Follow Anima’s web application to export a single component or the whole screen.
  

• Transitions – not yet supported (But are coming)
• HTML code – does not support variants, as React makes more sense for stateful components
• Preview – is HTML-based and does not support variants (projects.animaapp.com, animaapp.io)

The post Convert Figma variants into interactive React components in one click appeared first on Anima Blog.

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 more efficiently using automation. This increases design and development speed and decreases product development lifecycles. Get access here

The future of product design and frontend

Gartner recently featured Anima as an important vendor in the design-to-code space, and a prime example of the modern design-to-development approach. With over 400k installs on the Figma community, Anima is the #1 integration in the ‘development’ category on Figma. We’re on the cusp of the design-to-code movement, and are defining the future of the technology that supports it.

We have seen increasing similarity between product design and frontend development over the past decade, especially in terms of structure and complexity, they still exist in relative silos. This is changing rapidly, and those silos 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.

How Design System Automation works

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.

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 of product development at scale

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

The post Introducing: Design system automation appeared first on Anima Blog.