One-Click AI Web Development Tutorial - Learn how to Turn Figma Designs into Working Code using AI
Learn how to turn Figma designs into code using AI. In this course, you will learn how to easily create and deploy frontend code starting with just a design.
✏️ Course developed by @aniakubow
Sample Figma design to follow along: www.figma.com/community/file/...
Get started with Locofy: www.locofy.ai/
🏗️ Locofy provided a grant to make this course possible.
⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:54) What is Figma?
⌨️ (0:02:22) The design
⌨️ (0:06:28) Locofy Lightning and LocoAI
⌨️ (0:25:18) Let’s build out our app!
⌨️ (0:40:45) Sync to GitHub
⌨️ (0:49:40) Create a Database
⌨️ (0:54:49) Create Authentication
⌨️ (1:28:20) Let’s deploy our app!
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
I been waiting this for months thanks alot !!!
I was literally shocked after seeing this. In a positive way
Thank you for your brilliant tutorial Keep it up. Fantastic job
What an interesting time to be alive, front-end dev becoming obsolete in real-time
Obsolete*
@@joelpwwlmaoo
@@joelpww thanks for the heads-up
and backend will be soon, I'm afraid. This AIs are everyday more and more advanced and "clever".
@@braveitor Who said you to do the software development anyway. Go do some physical job but then you'd excuse that AI or robots will get there as well eventually
Thank you Soo much!!
Thanks for the tutorial
The timing on this video being dropped was PERFECT. I was JUST complaining there wasn't a good video on this 😂 She's brilliant can't wait to finish this. 1:30
bro same, i am making project in figma
SHES REALY BEATIFUL
Thank you very much for New video
Ok do we need to learn how to build a design from scratch with css in 2024 or should we focus on learning locofy
please make a dedicated series on vedio editing softwares tutorial and ui ux design tutorial
Im super curious about simplifying stuff so this is interesting
Any time traveller here from 2029, just wanting to see the beginnings of all that craziness we've got going on now?
wow thats brillant
I'm just start learning front end dev with FCC. FCC also: 1-Click AI Web Development Tutorial - Turn Figma Designs into Working Code using AI.
You gotta start with fundamentals. This is great, but start with HTML-CSS and get familiar with some JavaScript. Also, learn some SQL database concepts, Computer Science concepts, and some basics of networking. This stuff just makes work easier, but you still have to know how all this stuff works in general. Its a lot to learn, but it's (mostly) fun 😂. Happy coding.
Don't let this discourage you in your effort to learn the stuff you want or need to learn. As this tutorial shows and Ania mentions. These tools are far from perfect and still require the users to know what they are doing, what they want to achieve and also to have an understanding how it can be achieved. Users still need the knowledge to double and triple check the output of such a tool. And let me tell you from experience. To work with a codebase that you didn't write/setup yourself in most cases will require more than basic knowledge. So, keep learning and keep having fun with your new skills. By the way to write such a tool also requires web dev skills ;)
@@jando3176 I understand u 100% and u right at some point, but my point of view is this field be so f*n competitive, and AI will reshape it so its hard for beginners to enter unstable field like this, its become harder and harder for beginners, and more productive and efficient for seniors and mid-level. so i decided yester day to rethink and decided to enter another fields, like cyber security its so hard to think that u can relay on ai on filed like this, second option to fk my fear and ride it, Entering AI field and study it. AI & Cyber security are promising fields and need hard work to get it, and its not competitive if u r really good. for someone like me I'm 3rd-year cs student its ok to try those fields.
Nice shirt and mug. I will order.
Is it possible make this with next.js ?, I mean an app like that should be done using something like next.js
I'm happy to see that all my work have become so easy and I'm also scared that all my have become too easy!
What a time to be alive
Everything is agreed, but could you please create a duplicate layer version with responsive design completed in the Lightning version? is it coming with a responsive version (duplicated layer version), or do need to create it again with responsiveness in the Lightning version?
can it be done for python based application ?
It would be really helpful if you made the repo public
Hi, I followed till 35.13 Can't it be done in windows ? kindly advise how to proceed next.
Can you please share the video on figma into code using django framework
Really good tutorial. I think that if you only compare password and confirmPassword to sign up, a user could use an empty password in both input fields, and they'd be equal. :? Anyway, I feel more and more obsolete every day, because all the manual coding you've made soon will be automatically implemented by an IA, I suppose.
It's not going to make any dev obsolete. To me, it's a mind-blowing tool for freelancing and it's going to decimate the wannabe devs that use Elementor and other builders. The only devs that are going to go obsolete are the "You gotta code everything from scratch" developers.
@@thegeekviking5427 I hope you're right, but it seems otherwise. These AIs are evolving at an incredible fast pace. But for now, they are just tools for us devs that makes our lives easier. :D
@@braveitor Well, back in 2006, Wordpress was supposed to give the possibility for small businesses to build their own website and not needing to pay for an expensive dev, and now Wordpress is a niche for freelancers (Very lucrative niche).... To me, Wordpress did not deliver what it was supposed to and it created A LOT of work for freelancers..... same with AI..... But everything I say is debatable....
She is so smart 😂🎉❤
copy paste coding makes everyone smart
"Smart"😂 But srsly, she knows her stuff. She's been giving the community tons of great tutorials before AI tools went mainstream.
@@jw200people still need to learn how this stuff is put together. A lot of the AI code is just boiler plate work. The video still has her coding out JS functions and the overall function of the site.
Please provide mobile devolopment video with signing logics with kotlin or any language.....
So front end devs will also be required to learn UI design so they don't get fired
AI can already generate UI designs. But after watching a few of these, it's evident that you need prior knowledge before you can even begin to mess around with tools like these.
maintaining systems is a more focussed role for a dev rather than building a new one. People in the industry rarely make new websites or designs, they focus on improving, updating and maintaining them hence this is good up until you are making personal projects + we don't know how much can you scale this, does this work for very very big projects or just small ones. Anyway things like v0 have existed for a decent amount of time still frontend devs are in high demand. And v0 is a really strong and useful tool.
@@br0ken_107 thanks mate for clearing things up for me. I'm a new dev so i still didnt get my first job in the industry
What happens when an "AI developer" loses access to this tool and they can't make a front end? What happens if the ai bubble bursts and all you learned was prompts?
@stadworks As a frontend dev you need at least base knowledge in UI/UX design anyways. That's at least my personal experience. Though it might be fair to say that this might only count for jobs at smaller companies rather than at large corporates.
Amazing
I was eagerly waiting for the deployment stuff 😐.
You would think a channel that talks about coding and math would at least make a full course on discrete math
Holy sheesh this sounds so damn interesting
please video for figma with flutter
Please make the video on Asynchronous Javascript!
why???????
Ania is very beautiful....!! It was hard to concentrate in the beginning. Not gonna lie.
does this mean there is no use of web development ?
🤩👏
estou fazendo um curso na Udemy de html, css e JavaScript, estudar html e css hoje em dia seria perca de tempo ou nao ?
It is not. Keep going man. I’m also currently learning HTML CSS and JS
Is it good for beginners?
It's better to learn HTML, CSS and JS first, the issue with using a tool like this without understanding it's building blocks is that youre entirely dependant on the ai to handle issues that **will** come up
Well, here goes our jobs
Look forward to seeing more AI-generated girls in videos. You heard it here first.
🇳🇬🇳🇬🇳🇬💯
What about responsiveness?
Starting at 12:50 Ania is showing the responsiveness
Is this the end of front end development ?
I believe so
Not really. This only means the development time goes down, so people will do some other crazy stuff ai still can't. As always new technology is occasion but you have to adapt to new reality
@@12crenshaw thanks
nope, this means we are getting over the basic/intermediate stuff, so that we can work on the actual/complex stuff, something like custom animations etc and eventually backend is there too. ( although figma can manage alot of frontend work, but not 100% of it. ).
No.
Hi
i was laughing at the 'kebab case' i googled it and it made me laugh
isnt the voice of the intro an AI voice?
There will be a time that we don't need programmers anymore. Coding will only be a hobby not a job because everyone can create apps and website through AI. I still code because I love coding but let us be honest AI is much more faster than humans.
Hlw everyone
Hello 😊
So, why would anyone need to hire a web developer if AI can do that job?
Do you not realize this video is an hour and 30 minutes long. There alot of adjustments needed to be made inorder to get the full product.
She knew she wasn't good with real coding and became a prompt engineer, haha gotta give it to her.
Bruh ain't no way, she codes games in JS. She's fine!
@@tutohowto5345 i think he's trolling :D
shame of learning react for 6+ months #help for job
🌹🌹🌹🌹🌹🌹🌹🌟🌟🌟🌟🌟🌟🌟
God Help us all. So much abstraction.
second.
This is not useful for all Figma designs, I have tried it lot of times ...the code is not responsive at some extent, still it can improve... efforts appreciated.....
If all it needs to go is a js script or some media queries then its still extremely good
@@joelpww yeah that's the case...
Anyone watching this video in 2019?
Fking ai destroyed my bright future 🥴☠️🥴
The whole thing could have been explained in 10 to 15 minutes. So much faff for monetisation’s sake
11 April 2024
Clickbait title. I click once on this video. I guess every video is a one click video lo.
one-click is the name of Locofy's new feature. Don't take it in a literal sense.
Boooo
React developers click dislikes 😢
Honestly this was a terrible experience. Had so much trouble following you step by step. If you have no background on React and how it works, then you are going to get lost once the AI does not give you the eaxct same code she has.
I hate Ai 😢😢
shut up 🙏
Then embrace it learn to use it to code faster
But why? Such work is tedious and requires no advanced skills, so why not delegate it to AI? p.s.: and remember, this is just the beginning. There will be much more AI in any job involving computers 👍
@@deniskhakimov you're right i guess