We’re excited to introduce Anima’s latest feature: the ability to transform any Figma design into clean, functional code using Material UI (MUI). This powerful capability helps developers quickly convert any Figma file—whether it’s well-structured or not—into high-quality MUI code.

The problem: designers mindset vs. developers approach

In the world of digital product creation, designers and developers often have different priorities. Designers focus on creativity and user experience, often without considering the technical constraints or specific libraries used in implementation. Developers, on the other hand, need to translate these designs into code that is functional, maintainable, adhere to best practices, is reusable, and aligns with existing codebases, libraries, and standards.

Anima bridges this gap by enabling developers to stay within the confines of their chosen libraries, like MUI, while still respecting the designer’s creative vision. This ensures a smooth, efficient development process that saves time and resources.

How Anima’s MUI integration works

When you start using Anima’s MUI support, the process is as seamless as it is powerful. Anima detects design elements— even those not explicitly defined in Figma—and generates MUI code that aligns with your project’s needs:

• Generating New Assets? Start with MUI: Use the Anima plugin in Figma to create new MUI-based components and screens. This gives you a head start with ready-to-use code that adheres to MUI standards. Just copy and paste your code!
• Integrating with an Existing Project? Go Further with Frontier: Take integration to the next level with Anima’s VSCode extension, Frontier. Frontier learns your existing code components, MUI theme provider, and other code conventions. It generates code that reuses these elements and suggests new code when necessary, ensuring seamless integration with your project. With Frontier, you can easily inject new, complex components, customize layouts, and see real-time previews of your changes—all within the VSCode environment.

Whether you’re working with Figma Classic Mode, Dev Mode, or VS Code, Anima reduces development time and eliminates repetitive tasks, making your workflow more efficient and effective.

Anima’s MUI integration: your best starting point

With Anima’s integration with MUI, developers can easily convert Figma designs into functional, readable code. The tool automatically detects design elements—even if they aren’t defined as components in Figma—and generates MUI code that aligns perfectly with your project’s needs.

Simple Example: Button

Consider this  basic button design in Figma that isn’t defined as a component:

Here’s how generic tools might translate it:

Here’s how Anima translates it into MUI code:

In this example, Anima 

• Recognizes the button as a potential component
• Generates the appropriate MUI component with the correct props
• Adds customization—like corner radius—that integrates seamlessly into your project.

Advanced example: Table 

Now, let’s look at a more complex example—a table with multiple subcomponents. This is where Anima’s capabilities really shine, demonstrating its ability to handle advanced MUI components.

This table example shows how Anima automatically handles the structure of a table from Figma, generating the necessary MUI components such as Table, TableHead, TableRow, and TableCell. Anima ensures that each component is used correctly, providing a clean and maintainable codebase.

Best practices: Getting the most out of Anima with MUI

While Anima works well with any Figma design, it performs best when using the official MUI Figma library. Aligning design elements closely with MUI components will result in the highest quality code generation, minimizing manual adjustments and streamlining your workflow.

Future enhancements: Theme generation

Looking ahead, Anima is committed to enhancing its capabilities even further. We plan to introduce support for generating a custom MUI theme provider based on your Figma designs, ensuring consistency across your projects.

Start coding with Anima and MUI today

With Anima’s powerful MUI integration, you can convert any Figma design into high-quality, functional code, no matter how it’s structured. Say goodbye to manual coding and start saving time today. Explore how Anima can transform your development process by trying it with your next project.

The post Unleash the power of Material UI with Anima appeared first on Anima Blog.

In the world of digital marketing, your email isn’t just a message; it’s a first impression, a handshake, a personal invitation to your world. Recognizing the importance of polished and professional email designs, Anima is thrilled to announce a game-changing feature that’s set to revolutionize how designers and marketers alike create email templates.

Get Anima for Figma

What’s the difference between HTML and email HTML

Compatibility with a wide range of email clients

For designers who live and breathe in Figma, creating a responsive complex layout can test your patience. Making it compatible with a wide variety of email clients, that’s even harder. With Anima for Figma plugin, you can convert your flex layouts directly into HTML email templates. We’ll do all the hard work of converting those into table layouts with inline CSS. You design freely in Figma, and we’ll do the heavy lifting of translating your vision into adaptive, pixel-perfect emails.

Responsive layout for every device

Leveraging Figma’s auto-layout with Anima’s breakpoint to ensure your emails adapt to every screen size so your communications look and function as intended, regardless of whether your user viewed it on a desktop or a mobile.

– Auto-Layout Translation: Anima converts Figma’s auto-layout settings into responsive HTML tables, maintaining layout integrity across email clients.
– Breakpoint Integration: While many email clients don’t support responsive design, Anima includes inline CSS media queries for those that do, ensuring your emails look great on every device screen.

Prioritizing Accessibility in Design

Our plugin utilizes Figma’s text styles to implement a clear and coherent heading structure, ensuring that your emails are not only visually appealing but also navigable and readable for all users. Additionally, we prioritize alt text for images, enhancing accessibility for visually impaired individuals and improving the SEO of your emails.

Your Code Playground

Experience what your users see firsthand using Anima’s Playground. Edit your HTML and watch your designs transform in real-time. Once ready, just copy the final HTML code directly from the playground into your mail service of choice (e.g., Mailgun or Mailchimp).

Code sample here
Figma email design template

Forward-Thinking Email Design

We understand that in the fast-paced world of digital marketing, efficiency is just as important as aesthetics. Now, you no longer have to sacrifice one for the other. Our commitment to innovation continues, and this new feature is just another step in our journey to streamline the design process without compromising quality.

From Figma to Inbox – Step-by-step guide

1. Install Anima’s plugin and open it in Figma
2. Add auto layout while designing.
3. You can also add Links, breakpoints, GIFs, Headings, and Alt text.
4. Select the framework & styling ‘HTML’ + ‘Email compatible’.
5. Get code! Click ‘Open in Playground’ to preview and edit your HTML and CSS in Anima’s Playground environment.
6. Copy the HTML code from the playground – The HTML contains your CSS, and Anima will host your images, so you are ready to send your emails!

Stay tuned as we continue to update and upgrade your Anima experience. Not part of the Anima family yet? Join us today and transform the way you create email templates forever.

Get Anima for Figma

*Some features might not work with some email clients.

The post Figma to HTML email: Converting designs to HTML email templates with inline CSS appeared first on Anima Blog.

Introducing Anima’s latest game-changing feature: Generate clean and functional code from any Figma file, no matter how it’s structured or which components it uses. Whether your design is well organized or a bit chaotic, if it uses standard components or none at all, Anima takes it all and translates it into high-quality MUI or Ant Design code.

Bridging the gap between designer & Developers Designers & Developers: One Goal, Two Mindsets

Designers and developers often have different priorities.

• Designers – focus on creativity, aesthetics, and user experience, designing freely without considering the technical constraints of development
• Developers are tasked with implementing these designs into code, prioritizing clean, maintainable, and reusable code. They need to adhere to project standards and leverage existing libraries to ensure consistency and efficiency.

This difference in focus can create a disconnect, leading to frustration on both sides. Designers might feel that their vision is compromised. Developers may struggle with translating designs that aren’t optimized for coding. Anima’s new feature bridges this gap by providing a starting point that respects both the designer’s creative vision and the developer’s need for structured, maintainable code.

The solution

Anima’s UI library code generation 

Anima’s codegen performs Component Identification through Visual Analysis and intelligently analyzes any Figma design—regardless of its structure, naming conventions, or use of components— and converts it into clean, functional code using MUI or Ant Design. This not only saves time but also ensures that the code is aligned with the best practices of your chosen library. 

Anima’s New Capabilities

A Game-Changer for MUI and AntD Users

1. Auto-Component Detection: Anima automatically identifies potential components within a Figma design, even if they aren’t defined as components. This visual analysis enables the reuse of existing code components without needing to adjust the design file.
2. Intelligent Naming and Code Clean-Up: Anima ensures the generated code is clean and free of unnecessary wrappers, such as <div> tags. Even if your Figma file has layers named “frame 4198” or contains random components, Anima generates semantic, readable code without reflecting those naming inconsistencies.
3. UI Library Compatibility: Anima translates your Figma design into code that is compatible with popular UI libraries like MUI and AntD. Whether your design includes elements that match MUI’s or AntD’s component structures or uses custom styles, Anima generates code that respects your project’s existing library and coding standards.

Before and After: A Real-World Example

To showcase Anima’s capabilities, let’s look at a menu design implemented with both MUI and Ant Design.

Until today, a typical Figma design might include nested <div> elements and arbitrary naming conventions, resulting in unoptimized code.

But now, as you can see – Anima’s code transforms the design into clean, structured, and functional MUI & AntD code.

How to use it? 

Just open the frameworks drop-down and select your desired UI library

Try it yourself 

Anima’s Smart Code Optimizer is here to accelerate your development process. Whether you’re working with MUI, Ant Design, your homegrown design system, or soon-to-be-supported libraries like ShadCN, Anima got you covered. Say goodbye to the tedious task of cleaning up code from poorly structured Figma files and hello to a streamlined, efficient workflow that empowers both designers and developers.

Start now

The post Transform any Figma design into high-quality MUI or AntD code with Anima appeared first on Anima Blog.

Short answer: Yes!

Long answer:

NextJS is an extremely popular framework for ReactJS that provides quite a few benefits, one of which is the mix between server and client-side components. 

Understanding Next.js Components:

• Server-only Components: These components are rendered exclusively on the server and do not rely on state or any client-side APIs. They can securely fetch data from external APIs without exposing credentials to the client (and without worrying about credentials falling into the wrong hands). Server components cannot contain client-side code, such as event handlers or state management, and are intended to generate static HTML that is sent to the client. These components can include other server components or client components as children.

• Client Components: These components require the "use client" directive at the top of the file. They utilize client-side features such as state, effects, or event handling, which necessitates rendering in the browser. Client components can also include other client or server components as children. However, not all client components need to manage state; the key is that they rely on React features that are only available on the client side.

In Next.js, components are server components. This ensures that fully-formed HTML is sent to the user on page load. It’s up to the developer’s discretion to set the client boundaries. If components are not using state and are not making outward API calls, they can be implemented both as client and server, which is ideal. 

Since it can be quite complex to determine, which type of component a particular React component is (Server only, Client only, agnostic), Frontier will generate client components by default, when it detects NextJS. This is done by adding the ‘use-client’ statement at the beginning of the component declaration. 

This issue arises because it can be challenging to identify if the rendered component tree includes descendants that must be rendered on the client side. Without a ‘use client’ directive for those components, runtime errors may occur.

If you remove the ‘use-client’ and the code still builds with no errors, this means that the client boundaries have been set correctly, and you can let Next.js determine whether the component is rendered on the client or the server. If, on the other hand, removing it causes a build error, it means that one or more of the descendants uses client-only APIs, but hasn’t declared itself as a client component. In this case, you can add the ‘use-client’ statement in the code we’ve created, or add the directive directly inside of the offending descendant.

So, what’s the bottom line?

Short answer: Yes, Frontier supports NextJS!

Start here!

The post Does Frontier support NextJS? appeared first on Anima Blog.

We are excited to announce the release of a powerful new feature in Frontier: Code Injection. This feature enhances your ability to seamlessly integrate generated code from Figma into your existing projects, saving time and reducing the need for manual copy-pasting.

Why Did We Create Code Injection?

1. We noticed that many of our users were exporting only parts of the code from Figma, often leading to broken implementations. A complete component needs all its pieces— index (TSX or JSX), CSS, assets, and the right styleguide references—to work properly.
2. We heard from you that manually copying and pasting each file was quite tedious. Downloading assets from one place and uploading them to another? Yawn!

We knew there had to be a better way. Enter Code Injection. We developed this feature to streamline your workflow, making the process of integrating design into development as seamless as possible.

How Does It Work?

Example Scenario: Implementing a Subscribe Modal Component

The Figma Design:

• A few input fields (that you already have in your code – <Input>)
• A submit button (that you haven’t created in code yet )
• A checkbox (that you haven’t created in code yet )
• Some text and an icon (non-component elements)

1. Provide your design to Frontier in VScode

1. Paste the Figma link
2. Select the Modal component
3. Click “Inject component”

2. The Injection magic:

1. Frontier will detect that you already have an <input> component, but missing the <button> and <checkbox> components.
2. Frontier will generate and inject the <button> and <checkbox> components to your source code, with all the necessary folders and files (e.g., tsx, CSS, assets).
3. Frontier will build a <Modal> component:
   1. Components: imports your existing <input> component and the newly generated <button> and <checkbox> components
   2. Non-Component Elements: Frontier includes inline code for simple elements like text and icons directly within the generated component.

Code example

Here’s how the code for a “Modal” component might look after using Code Injection:

Get Started

Try out the new Code Injection feature today and streamline your design-to-code workflow with Frontier! Your feedback is crucial as we continue to enhance Frontier’s capabilities.

Why Use Code Injection?

• Efficiency: Automatically generate and integrate components directly into your project, reducing manual coding effort.
• All-in-One: Generate your component with all its necessary files and assets in one click, streamlining your workflow.

Feel free to reach out if you have any questions or need assistance. We’re here to support your journey to more efficient and consistent coding!

Happy coding!

Get Frontier

The post Introducing Frontier’s New Feature: Code Injection appeared first on Anima Blog.

We are thrilled to announce the launch of Single Sign-On (SSO) support as part of our Enterprise Plan! This new feature is designed to enhance security, streamline access, and simplify user management for organizations of all sizes. With support for the Security Assertion Markup Language (SAML) protocol, we are taking authentication to the next level.

What is SSO and SAML?

Single Sign-On (SSO) is a powerful authentication process that allows users to access multiple applications with a single set of credentials. By integrating SSO, organizations can improve security and provide a seamless login experience for their teams. Gone are the days of juggling multiple usernames and passwords.

SAML, or Security Assertion Markup Language, is an open standard for exchanging authentication and authorization data between parties, in particular, between an identity provider (IdP) and a service provider (SP). SAML enables SSO by securely transmitting user identities from the IdP to the SP, ensuring that users can access resources without needing to re-enter credentials.

How SSO Works

Integrating SSO is a collaborative effort between us and the client. Here’s how the process works:

1. Exchange of Information:

   To get started, the client provides us with their Identity Provider (IdP) metadata. This metadata includes essential details such as the IdP certificate, attribute mapping, and other necessary information.

2. Configuration and Setup:

   In return, we provide the client with our Service Provider (SP) metadata, which includes our certificate, assertion service URL, and other relevant information. This exchange ensures that both parties have the necessary data to configure their systems securely.

3. Seamless Login Experience:

   Once the setup is complete, users can enjoy a seamless login experience. After selecting the SSO option, users will enter their work email and continue. They will then be redirected to the IdP login page for authentication. Once authenticated, users will be redirected back to the web app to complete the login or signup process with Anima.

Why Choose SSO?

Implementing SSO offers several key benefits:

• Enhanced Security: By centralizing authentication, SSO reduces the risk of password breaches and provides an additional layer of security. Users no longer need to manage multiple passwords, which reduces the likelihood of weak or reused passwords.
• Streamlined Access: SSO simplifies the login process, allowing users to access multiple applications with a single set of credentials. This streamlined approach boosts productivity and eliminates the need to remember numerous passwords.
• Simplified Management: For IT teams, SSO offers a centralized platform to manage user access and permissions. Onboarding and offboarding become more efficient, reducing administrative overhead and ensuring compliance with security policies.

Getting Started with SSO

This new SSO feature is available exclusively as part of our Enterprise Plan. If you’re interested in upgrading or learning more about how SSO can benefit your organization, please contact our sales team.

Stay tuned for more exciting updates!

The post New Feature Alert: Enhance Your Enterprise Security with Single Sign-On (SSO) Now Available in Anima’s Enterprise Plan appeared first on Anima Blog.

Are you a frontend developer who loves using Tailwind CSS for its utility-first approach and flexibility? If so, you understand the challenges of translating Figma designs into Tailwind-enhanced React components. Aligning new components with both design fidelity and your established styling conventions can be time-consuming.

That’s where Frontier comes in—a revolutionary tool that seamlessly transforms Figma files into React code, perfectly integrating with your existing Tailwind configurations. Frontier meets you where you work, in VS Code.

Effortless Figma to React Conversion in VSCode

• Converting Figma designs into React components is more streamlined with Frontier. Here’s how it enhances your workflow:
• Automatic Component Detection: Frontier scans your Figma design and identifies potential direct matches with existing React components in your codebase.
• Component Reuse: Frontier generates code that reuses your existing components, enhancing efficiency and reducing code duplication.
• Tailwind CSS Code Generation: Automatically generates the necessary React code with Tailwind classes applied, preserving the intended design aesthetics while adhering to your predefined styles.
• Reduce Redundancy: This approach not only accelerates development but also helps keep your codebase clean and manageable.

(Not using VSCode? Translate Figma to Tailwind in Figma)

Seamless Integration with Your Tailwind Config

Frontier does more than just convert designs—it ensures the generated code integrates flawlessly with your existing project frameworks:

• Tailwind Config Utilization: Detects and uses your tailwind.config.js file, allowing all generated components to inherit your custom styling rules automatically.
• Intelligent Style Application: Ensures that every component not only matches the design specs but also aligns with your established Tailwind conventions. If needed, Frontier will generate new style configurations that you can then add to your original config file.

For front-end developers using Tailwind CSS, Frontier offers a powerful way to enhance your development workflow. It ensures precise translation of your Figma designs into React components and maintains style consistency through smart integration with your Tailwind setup.

Start using Frontier today and take your Tailwind projects to the next level, where design meets code not just with accuracy, but with style

The post Convert Figma to React & Tailwind Automatically in VSCode 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.

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.

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.