Share this article on: Array

Blog

design to code

Figma to React: building and publishing an app to Netlify3 min read

Reading Time: 3 minutesFollow these steps to build a React app with Figma + Anima, then launch it on Netlify using Anima's generated code. Give it a try, and go live in a fraction of the time.

Figma to React: building and publishing an app to Netlify3 min read

Reading Time: 3 minutes
At Anima, we’re changing the way teams build software by breaking down barriers between design and development. This brings entire product teams into the software development process like never before.
 
Using Anima, Designers can export developer-friendly React code for engineers. Developers can skip the grunt work of coding UI from scratch. Teams can deliver better apps and websites with a fraction of the time and resources.
 
In this tutorial, I will cover the technical side of how to build a React app using Anima, starting from a design in Figma, Adobe XD, or Sketch. 
 
 

Clean design brings cleaner code

Behind the scenes, we do A LOT of heavy lifting to give you super clean code.
 
Anima will remove redundant layers, automatically name elements, restructure the DOM in a way that mimics a human engineer as closely as possible, find patterns to extract components and styles, and much more.
 
Our code quality improves all the time, but we’re not perfect yet. 
So if your design reuses Figma components and layers that have meaningful names and hierarchy, we will produce cleaner code.
 
Now let’s dive in.

Going from Figma to a live app using Anima

Start with your design file. 
This Figma sample file is available to duplicate here.
 
  1. Sync to Anima
  1. Export React code
In Anima, Export code for the whole project
  1. Running locally
Open terminal on the Anima code folder, and run:
  • npm install
  • npm start
 
  1. Adding logic
On this simple app, most of the logic is loading questions, and running them randomly.
 
Adding links
 
Loading the questions
  • The State hook is used to store the questions array and the current question.
  • The Fetch method allows us to pull the questions on getData(),
    • I’ve added the questions.json file to the static files folder.
  • The Effect hook is used to trigger the 
  • I’ve added a simple function called next() to randomize a question from the array
  • In the render function, I’ve added the value of the current question
 
 
  1. Publishing to Netlify
Netlify is a great cloud to host React apps. Here’s how
If you don’t have netlify, install it with npm using the following command:
 
  • npm install netlify-cli -g 
 
If you do have netlify use these commands:
  • npm run build
  • netlify deploy
 
Choose the dist folder when asked, and you’ll get a link on netlify to your React app. 
Use netlify deploy –prod when you have the final result, and get a sharable link.
 

Live version

Reference links

 
 
I can’t wait to see what you are going to build with Anima!
Join the discussion on Facebook and Twitter, and let us know what you’d like to see next.

|

Co-founder & CEO

A seasoned software engineer on a mission to improve developers’ lives and evangelize the power of code. When creating new software is made easier by software, he’s happy². In his leisure time you’ll find him trotting the globe, book in hand, in search of new perspectives.

Leave a comment

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

Related Posts

Anima and Ant Design integration
design systems design to code product updates

Figma to Ant Design components – Get the most of Ant Design with Anima

Reading Time: 4 minutesWe’re excited to introduce our latest feature: seamless support for Ant Design (AntD)! Now you can transform any Figma design—whether it’s tidy or a little chaotic—into clean, production-ready Ant Design code. With Anima’s AntD integration, developers can quickly bridge the gap between design and code, turning creative visions into structured, reusable components.

September 22, 2024 4 min