Anima’s VSCode extension: Figma to React is now in your favorite IDE3 min read

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 🙏