Introducing Codegen 2.0: Reusable React Components and TypeScript2 min read
Reading Time: 2 minutes
We started the Codegen 2.0 gradual rollout, if you’d like to be a part of the first group, subscribe here.
TL;DR – New and improved React Codegen!
What is included in our new component generation?
- Reusability – Figma components generated as react components, and used across pages
- Cohesiveness – Figma properties names = code properties names
- Efficiency – Unifying CSS duplications
- Productivity – Enabling overrides
- Interactivity – Translating Figma interactions to code
- State handling – Automatically generating states (hover, clicked, etc)
Detailed version 😊
We are working hard on collecting 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, with simplified 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.