Introducing Codegen 2.0: reusable React components from Figma - Anima Blog
Share this article on:

Blog

Design to code

Introducing Codegen 2.0: reusable React components from Figma2 min read

Reading Time: 2 minutes This week, Anima released a powerful code generation engine that turns Figma components into clean React components. It maintains each component’s design, structure, layout, and style, and enables overrides in the code without altering the original design.

Introducing Codegen 2.0: reusable React components from Figma2 min read

Reading Time: 2 minutes
Updated March 13, 2023
 
Anima just released a powerful code generation engine that exports clean, semantic, reusable React components directly from Figma. 
 
Each generated React component retains the Figma component’s design, structure, layout, and style, and unifies all of its instances into a single React definition.
 
What is included in our new component generation?
  1. Reusability – Anima’s AI generates a single, unified, reusable React component for each unique Figma component
  2. Cohesiveness – Prop names in the generated code are identical to those used in Figma
  3. Efficiency – Anima merges duplicate CSS classes for cleaner code, faster reviews, and simplified maintenance
  4. Productivity – Anima exports the complete definition of each Figma component, including instance overrides
 
What’s next?
  1. Interactivity – Translating Figma interactions into code
  2. State handling – Automatically generating states (hover, clicked, etc)

The benefits of Codegen 2.0 for product teams

1. Code Reusability 

When a designer reuses a single component throughout a design, such as a button, Anima interprets it as one component rather than a series of components with identical properties. Following the reuse principle, Anima’s AI generates a single React component that can be used in multiple screens, resulting in cleaner, more reusable code.

2. Cohesiveness: Bridging the Gap Between Figma and ReactJS

Both designers and developers have a common goal: more reusable components, fewer single-use elements, and more intuitive naming conventions. Thankfully, Anima’s AI ensures they’re always speaking the same language.

That’s because CodeGen 2.0 bridges the gap between Figma components and ReactJS components, making it easier to create cleaner, more reusable, and scalable semantic code with simplified CSS. How, you ask? By keeping props and naming conventions 1:1 between Figma and the generated code.

3. Efficiency: Unifying CSS duplications

Each generated code component retains the same design, structure, layout, and style as the original Figma component, and Anima ensures that the associated CSS classes aren’t duplicated throughout the design. This means the code stays clean from day one, and there’s no need to unify the CSS manually.

How does it look in action? Below, you can see a Figma component and its corresponding React component generated by Anima. The React component was automatically transformed from the Figma component and retains all of the original design, structure, layout, and style of the Figma component.

4. Productivity: Multiple instances under one component definition

Anima’s code generation engine consolidates every instance of a component into a single definition, so developers can easily implement component overrides from Figma with minimal frontend grunt work. This allows them to focus on logic and backend architecture instead of building unique component instances from scratch every time.

5. The Cherry on Top: Support for TypeScript

Anima now supports TypeScript to meet its growing adoption among React developers. This can streamline development by catching errors early, providing better code documentation, and making it easier to refactor and maintain large codebases.

Ready to fast-track your frontend development process? Sign up here for early access.

 

|

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.

Leave a comment

Your email address will not be published. Required fields are marked *

Related Posts

Design to code

How to export Figma to Vue

Reading Time: 2 minutes If you’re trying to convert Figma to Vue without writing the code from scratch,  this article is for you. We’ll show you how to export your Figma designs as Vue in a few easy steps using Anima. Anima will turn each design property into Vue code (Vue2 and Vue3) with Typescript or Javascript.

October 16, 2023 2 min
Design to code

How to export Tailwind CSS from Figma

Reading Time: 2 minutes This article will show you how to seamlessly export Figma designs into Tailwind CSS using Anima. Anima will map your design properties to Tailwind's base styles. Design attributes, such as colors, spacing, and typography, will be translated into concise Tailwind classes.

September 27, 2023 2 min