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.
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.
- Sync to Anima
- Export React code
In Anima, Export code for the whole project
- Running locally
Open terminal on the Anima code folder, and run:
- 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
- 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.
Share this article on:
Array
Figma
Adobe XD
Sketch
Discord
Twitter
GitHub
Blog
in TLV.