How to convert design to React code - Anima Blog
Code

How to convert design to React code3 min read

Reading Time: 4 minutes Turn Sketch, Figma, or Adobe XD into developer-friendly React.js code with Anima

How to Convert Design to React Code

How to convert design to React code3 min read

Reading Time: 4 minutesAnima is here to help Front-end engineers deliver faster by automating the grunt work. Teams can convert Sketch, Adobe XD, or Figma into React code and save precious time.

Step 1: Sync your design

To begin, sync your design to Anima, or ask the designer on your team to:

  • Get Anima plugin for your design tool.
  • Click Preview in BrowserSync

GIF showing how to sync a design to Anima to get React code

Bringing your Figma/XD/Sketch design to Anima is a matter of 2 clicks.

Bringing your Figma/XD/Sketch design to Anima is a matter of 2 clicks.

Or, share this 101 tutorial with a designer on your team.
You can try the sample Figma file shown on this article — link.

Step 2: Code mode – Pick any component, get code

At Anima projects, go to Anima’s code mode by clicking the ‘<>’ icon.

For any part of the design you select, you will get code at the bottom code panel. HTML or React.

GIF showing how to get React code for your designs with Anima

More on the code you get:

  • Code quality: The code is built for developers.
  • Layout: We optimize the code to have a CSS Flexbox layout. We merge layers, group, or ungroup them in a way that will get you a clean snippet of code.
  • CSS code reuse: We extract repeating colors, text styles, and other CSS properties into re-usable CSS classes and variables.
  • React code reuse: We detect elements repeating in the DOM structure and extract components automatically.
    You may also mark repeating elements with the “Mark as Component” checkbox.
  • Naming: If you want to change the automatically generated name of a component, you can rename any element in the Code-Mode right panel.
  • No dependencies: There are no external libraries used. (Aside from React in case of React mode)
  • Continuously improving: Developer-friendly code is the core of Anima. Our algorithms engineering team is constantly improving the code on a daily basis.

Feedback is very welcome at code@animaapp.com.
Help us build the future of Front-end.

Getting React code

At the bottom code-panel, pick your framework: Pure HTML or React.
More frameworks are coming soon.

GIF showing how to get HTML or React for designs in Anima
  • Developer Preferences: You can select whether you want your code using Class-based components or function-based components. More preferences will be added soon.
  • Props: To have your code with the same content as in the design, we add const props. We keep it as clean as possible, not mess your code.

Copy or test with CodePen

Your component code is ready. What’s next?
From here, you continue on your IDE (VSCode, WebStorm, etc.)

  • Simply copy the JSX & CSS and paste in your IDE.
  • Or, jump to CodePen to play with it beforehand.

GIF showing how to run Anima code in Codesandbox

Run it on CodePen.io

Compare with the original design

When converting the design to code, it’s almost pixel-perfect, but we might some things wrong. Fonts render differently, and it may affect the layout.

Use the Compare button to get a transparent image of the design on top of Anima generated code. You may also drag it around.

Overrides

In case you wish to change the code, or we’ve got it wrong, you may add CSS properties to any layer. These are called overrides.

GIF showing overrides for generated code for designs in Anima

Why not adding overrides in my IDE?

While you can do both, Anima will store your overrides. We will apply it to design updates as well.

Nested components

When producing React code, Anima may create nested components.
For example, you may see a Card component with a UserImage in it.

There are 3 ways to get a nested component:

  1. The designer used Symbols in the design to mark a reusable component.
  2. Anima has detected a repeating element in the DOM.
  3. The developer has marked a layer using the “Mark as Component” checkbox.

What’s next

Code quality is our top priority. In addition, more code frameworks are coming soon, such as Vue.js, Angular, SwiftUI, and Flutter.

As always, we’re excited to hear your feedback!

Join the discussion or show off your designs on FacebookTwitterSlackInstagram. Or, vote for new features at UserVoice.

Stay creative!
❤️ Anima team

|

Co-founder & CEO

Software engineer. Loves sharing his passion for code and is on a mission to improve developers’ lives. When creating new software is made easier by software, he’s happy². Habitual bookworm, hobby writer, a worldly traveler.

Leave a comment

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