Intro · 2:22
Introduction and Figma
Design to code.
- Turn Figma designs into code with AI.
- Taught by Ania Kubow.
- What Figma is.
| Tool | Role |
|---|---|
| Figma | Design |
| Locofy | Design → code |
Do this in your own tools, step by step. Ticks are saved on this device.
Design tool?
Figma.
Converter?
Locofy.
0:00 learn how to turn figma designs into code using AI in this course anbo will teach you how to speed up development using looi she will demonstrate how you can easily create and deploy front-end code starting with just the design locco provided a grant to make this course possible hey everyone and welcome to this course in which I'm going to show you how to not only use an AI tool to convert your designs into production ready front end code but also deploy it as a fully functional application that's right this is what the app is going to look like at the end so a Homestay rental app like Airbnb called Local Host it will map out all of our property data as well as deal with authentication or in other words use the signups and signant my name is Ana Kubo and I'm a software developer as well as course creator on free Camp as well as on my own channel and today I will also be your guide this means that you'll be able to turn designs that you have created in figma into code and make tweaks to the code too if you want if you would like to make some tweaks then naturally some coding knowledge will be required but don't worry I will walk you
1:09 through this step by step and in fact here is an outline of exactly what we will be covering in this course so first off we're going to start with the introduction followed by what exactly is figma then we're going to have a look at the design followed by locy lightning and Loco Ai and that's when we'll start building out our app we're then going to learn how to single app to get Hub as well as create a database and create authentication by building out a backend and finally we're going to deploy our app okay so great I'm excited in this course the app we will be building we'll have react for the front end node.js for the back end mongod DB for our database management and netlify to manually deploy the application so let's go ahead and check out the design first the tool we are going to be using for app design is a tool called figma it has a great reputation as one of the leaders in collaborative web design and allows users to come up with user interface or UI designs as well as user experience or ux designs as a team in real time and as a bonus it has a free tier that we can use so what are we
Get the other 7 chapters, the exam and your certificate for LinkedIn, plus all 700+ AI courses.