To follow along, you need to make a free account here:

In this tutorial I will be showing you how to take an existing Figma design, covert it into code using Anima, and hook it up to a database. We are doing this to show you what it’s like to work with existing designs as a developer, quickly.

We will be working from the pre-made design here:

00:00 Introduction
01:44 Exporting our Figma Design
02:59 Working with Anima
05:27 Creating our Database
21:41 Creating our React App
23:49 Creating a Backend
53:56 Putting our generated code from Anima into our Project
56:55 Hooking up our database
1:28:30 Moving Components to separate files
1:46:54 Getting Account Data
2:11:11 Where to go next

Final code available here: coming soon

? Use promo code ANIAKUBOW for 3 months free of WebStorm IDE here (I get no commission from this link, but am in a partnership):

? New to code and none of this is making sense? Watch my ’12hr+ YouTube Coding Bootcamp’ in which you will learn HTML, CSS and JavaScript Fundamentals completely from scratch. It’s on my channel and its 100% free.

? In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here (I get no commission from this link, but am in a partnership):

? You can get a blockchain domain with my affiliate link here:

? If you would like to buy me a coffee, well thank you very much that is mega kind! :

? Sign up for weekly coding tips from my newsletter partnership:

You can also find me on:

#codingbootcamp? #coding