How to Convert Design to React Code

Turn Sketch, Figma, or Adobe XD into developer-friendly React.js code with Anima

Anima 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 the Anima plugin for your design tool.
• Click Preview in Browser → Sync

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.

Turn Sketch, Figma, or XD into React or HTML code

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.

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.

Turn Sketch, Figma, or XD into React or HTML code

Getting React code

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

• 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.

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.

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.

Turn Sketch, Figma, or XD into React or HTML code

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

Join the discussion or show off your designs on Facebook, Twitter, Slack, Instagram. Or, vote for new features at UserVoice.

Stay creative!
❤️ Anima team