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
Пікірлер: 126
I was literally shocked after seeing this. In a positive way
I been waiting this for months thanks alot !!!
What an interesting time to be alive, front-end dev becoming obsolete in real-time
@joelpww
21 күн бұрын
Obsolete*
@lelin4732
21 күн бұрын
@@joelpwwlmaoo
@DeepmindNG
21 күн бұрын
@@joelpww thanks for the heads-up
@braveitor
21 күн бұрын
and backend will be soon, I'm afraid. This AIs are everyday more and more advanced and "clever".
@lelin4732
21 күн бұрын
@@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 for your brilliant tutorial Keep it up. Fantastic job
Thank you Soo much!!
Thanks for the tutorial
Im super curious about simplifying stuff so this is interesting
Thank you very much for New video
please make a dedicated series on vedio editing softwares tutorial and ui ux design tutorial
Ok do we need to learn how to build a design from scratch with css in 2024 or should we focus on learning locofy
SHES REALY BEATIFUL
wow thats brillant
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!
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
@_alan31_34
21 күн бұрын
bro same, i am making project in figma
Nice shirt and mug. I will order.
Any time traveller here from 2029, just wanting to see the beginnings of all that craziness we've got going on now?
Is it possible make this with next.js ?, I mean an app like that should be done using something like next.js
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.
@4m470
21 күн бұрын
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.
@jando3176
20 күн бұрын
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 ;)
@Gemax-hope
20 күн бұрын
@@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.
What a time to be alive
It would be really helpful if you made the repo public
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?
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.
@thegeekviking5427
21 күн бұрын
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.
@braveitor
21 күн бұрын
@@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
@thegeekviking5427
21 күн бұрын
@@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....
Can you please share the video on figma into code using django framework
You would think a channel that talks about coding and math would at least make a full course on discrete math
So front end devs will also be required to learn UI design so they don't get fired
@aerofred2002
21 күн бұрын
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.
@br0ken_107
21 күн бұрын
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.
@stadworks
21 күн бұрын
@@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
@BeepBoop2221
21 күн бұрын
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?
@jando3176
20 күн бұрын
@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.
can it be done for python based application ?
Please provide mobile devolopment video with signing logics with kotlin or any language.....
Hi, I followed till 35.13 Can't it be done in windows ? kindly advise how to proceed next.
She is so smart 😂🎉❤
@jw200
21 күн бұрын
copy paste coding makes everyone smart
@4m470
21 күн бұрын
"Smart"😂 But srsly, she knows her stuff. She's been giving the community tons of great tutorials before AI tools went mainstream.
@4m470
21 күн бұрын
@@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.
Amazing
I was eagerly waiting for the deployment stuff 😐.
please video for figma with flutter
Please make the video on Asynchronous Javascript!
@Marc-hn4eg
13 күн бұрын
why???????
Holy sheesh this sounds so damn interesting
🤩👏
Well, here goes our jobs
estou fazendo um curso na Udemy de html, css e JavaScript, estudar html e css hoje em dia seria perca de tempo ou nao ?
@abwebmaster3
9 күн бұрын
It is not. Keep going man. I’m also currently learning HTML CSS and JS
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 ?
Is it good for beginners?
@prismatic1910
21 күн бұрын
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
🇳🇬🇳🇬🇳🇬💯
Look forward to seeing more AI-generated girls in videos. You heard it here first.
Hi
What about responsiveness?
@jando3176
20 күн бұрын
Starting at 12:50 Ania is showing the responsiveness
Is this the end of front end development ?
@RiskyCapital
21 күн бұрын
I believe so
@12crenshaw
21 күн бұрын
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
@udaramanula915
21 күн бұрын
@@12crenshaw thanks
@deniswastaken
21 күн бұрын
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. ).
@BeepBoop2221
21 күн бұрын
No.
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.
I thought this page was for learning how to program and make good code, not for the AI to make almost everything for you, I didn't want to make WordPress pages because I didn't see the point that almost everything was already done and we didn't know how it was built and configured, now even the persons who supposed to teach you how to do things right, got on the train of "better not do anything and pay for services that will solve it for you"
@hellokevin_133
21 күн бұрын
She ain't a developer man, if you want real code go buy a proper course or use real developers here on youtube.
@jonathana.grajedacardiel4867
21 күн бұрын
@@hellokevin_133 She is...or use to be,She have her own channel, even in my begining I lear alote in a few of her videos, but... you know... capitalism.... It's not personal with her... but I use to see very interesting things in this channel, code stuff, now everything is AI or his boring podcast. Yes, outthere are a few more channels, but saddly everyone it's jumping in the AI train, even if they know how many jobs it's going to takeout in the future, looks like they wering a blindfold
@thegeekviking5427
21 күн бұрын
I'm not trying to be overly optimistic here, but Wordpress was supposed to remove the need of developers for any small business and instead it became a niche (Wordpress Development) so now AI is supposed to remove the need of any devs and..... you know where I'm going with this... Just be curious about the possibilities of AI. Back in 1995, it took 3 years for Jeff Bezos to code the first E-com business.... Now you create an e-com business in a week with tools like Shopify..... So just be excited of what's going to be possible in the near future! 😄 Personally I think that in 5-10 years it will be a lot cheaper to start your own SaaS with those AI tools and you won't need to borrow a shitload of $$$ to hire expensive software developers. Anyway I could be wrong.... everything I say is debatable
@Turnpost2552
20 күн бұрын
@@jonathana.grajedacardiel4867 Double check your spelling so many typos lol
@jonathana.grajedacardiel4867
20 күн бұрын
@@Turnpost2552 sorry, ¿hablas español?, asi seria más facil para mi...
She knew she wasn't good with real coding and became a prompt engineer, haha gotta give it to her.
@tutohowto5345
21 күн бұрын
Bruh ain't no way, she codes games in JS. She's fine!
@deniskhakimov
21 күн бұрын
@@tutohowto5345 i think he's trolling :D
So, why would anyone need to hire a web developer if AI can do that job?
@Turnpost2552
20 күн бұрын
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.
Hlw everyone
@mustafamokhtar403
21 күн бұрын
Hello 😊
🌹🌹🌹🌹🌹🌹🌹🌟🌟🌟🌟🌟🌟🌟
shame of learning react for 6+ months #help for job
God Help us all. So much abstraction.
Anyone watching this video in 2019?
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.....
@joelpww
21 күн бұрын
If all it needs to go is a js script or some media queries then its still extremely good
@honestlylogical
21 күн бұрын
@@joelpww yeah that's the case...
Fking ai destroyed my bright future 🥴☠️🥴
Clickbait title. I click once on this video. I guess every video is a one click video lo.
@AkashPadmanabhanL
20 күн бұрын
one-click is the name of Locofy's new feature. Don't take it in a literal sense.
The whole thing could have been explained in 10 to 15 minutes. So much faff for monetisation’s sake
second.
11 April 2024
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.
Boooo
I hate Ai 😢😢
@humanbeing8681
21 күн бұрын
shut up 🙏
@luluw9699
21 күн бұрын
Then embrace it learn to use it to code faster
@deniskhakimov
21 күн бұрын
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 👍
@Snackloose
21 күн бұрын
@@deniskhakimov you're right i guess
I hope I knew this hack before 😂