Introducing Codegen 2.0: Reusable React Components and TypeScript2 min read
Reading Time: 2minutes This week, Anima released a major code–generation engine. It will enable exporting React components directly from Figma components:
keeping the component’s design, structure, layout & style, and enabling overrides in code that will keep the origin design.
Interactivity – Translating Figma interactions to code
State handling – Automatically generating states(hover, clicked, etc)
Detailed version 😊
We are working hard oncollecting your feedback and improving our generated code quality.
This week, Anima released a major code–generation engine. It will enable exporting React components directly from Figma components:
Keeping the component’s design, structure, layout & style
Enabling overrides in code that will keep the origin design
Designers can create with complete freedom in Figma,
Developers can export it as ReactJS with just a few clicks
But these aren’t the only advantages. One of the key benefits of this new feature is code reusability. One of the most important aspects of ReactJS is its ability to structure code into independent and reusable bits, allowing developers to define once, and reuse as often as they want the same UI element. And this is also one of the best practices for designers creating projects in Figma, defining a main component, with maybe multiple variants, which they can later instantiate across their projects.
With our new Codegen, Anima will bridge the gap between Figma components and ReactJS components.
Let’s take a quick example:
A designer creates a new website.
The designer needs a button in different places across the website – so they create a Figma component – and use it across the website.
When exporting with Anima, this will be translated into a single React component – which be in use in multiple screens.
The result:cleaner, more reusable, and scalable code, withsimplified CSS.
Let’s see this in action. Below you have a screenshot of a Figma component. On the right side, you have the ReactJS component generated by Anima. You can notice that the all the Figma properties Figma were transformed into ReactJS properties, automatically, just like a developer would do it.
We know that when coding in React, using TypeScript can improve development by catching errors early, providing better code documentation, and making it easier to refactor and maintain large codebases. To meet the growing adoption, Anima will also introduce this new feature support for TypeScript.
If you don’t have yet access to this feature but are interested, fill out this form.
Paul is a prolific Product Manager who's been creating digital experiences for over 15 years. What makes him tick? Machine Learning, pugilism, and 80s hair bands.
Reading Time: 4minutes Imagine joining a startup as the sole designer and delivering a new product without a design system. It’s every product designer’s nightmare. I didn’t have the time or resources to create one from scratch, so I adapted someone else’s. 💡
Reading Time: 4minutes In this tutorial, we'll build a completely functional blog by connecting Anima’s generated frontend code to Contentful's headless CMS for dynamic content.
Reading Time: 5minutes We built a live eCommerce app in Figma using Anima's React Component Library. Then we turned it into a Shopify template and deployed it on Netlify using Anima's generated code. Here's how.
Figma
Adobe XD
Sketch
Storybook(Beta)
in TLV. 