How to convert design to React code – Anima Blog
Design to code

How to convert design to React code3 min read

Reading Time: 3 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: 3 minutes

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 get started, 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.

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

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

Select any element in the design and the code will appear in the bottom of the code panel, you can select HTML, React, or Vue code.

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, so it is of high quality to allow it to be developer-friendly.
  • Layout: We have optimized the code to have a CSS Flexbox layout. We merged layers, grouped, or ungrouped them in a way that gives you a clean snippet of code.
  • Styleguide: We extracted 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: Anima gives meaningful names to layers that are generated automatically, you can rename any element manually 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 at 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, React or Vue.
More frameworks are in the pipeline.

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.
  • 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 with your code.

Copy or test with CodeSandbox

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 CodeSandbox to play with it beforehand.

In the case that you want to change the code, you can add CSS properties to any layer. These are called overrides.

GIF showing overrides for generated code for designs in Anima

Why not add 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 *