One-Click AI Web Development Tutorial - Learn how to Turn Figma Designs into Working Code using AI

Рет қаралды 74,219

Күн бұрын

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

Пікірлер: 113

@Walter-travel Ай бұрын

I been waiting this for months thanks alot !!!

@ajtodream1935 Ай бұрын

I was literally shocked after seeing this. In a positive way

@DeepmindNG Ай бұрын

What an interesting time to be alive, front-end dev becoming obsolete in real-time

@joelpww Ай бұрын

Obsolete*

@lelin4732 Ай бұрын

@@joelpwwlmaoo

@DeepmindNG Ай бұрын

@@joelpww thanks for the heads-up

@braveitor Ай бұрын

and backend will be soon, I'm afraid. This AIs are everyday more and more advanced and "clever".

@lelin4732 Ай бұрын

@@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

@frankzelazko Ай бұрын

Thank you for your brilliant tutorial Keep it up. Fantastic job

@therealsholz Ай бұрын

Thank you Soo much!!

@lastspoil5547 Ай бұрын

Ok do we need to learn how to build a design from scratch with css in 2024 or should we focus on learning locofy

@CarlitoProductions Ай бұрын

Im super curious about simplifying stuff so this is interesting

@ERLakshyaJain Ай бұрын

please make a dedicated series on vedio editing softwares tutorial and ui ux design tutorial

@zhanmaster6733 Ай бұрын

Thank you very much for New video

@ahmedchouihi 26 күн бұрын

Thanks for the tutorial

@stadworks Ай бұрын

So front end devs will also be required to learn UI design so they don't get fired

@aerofred2002 Ай бұрын

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 Ай бұрын

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 Ай бұрын

@@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 Ай бұрын

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 Ай бұрын

@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.

@mallucanuck Ай бұрын

Any time traveller here from 2029, just wanting to see the beginnings of all that craziness we've got going on now?

@3DPTR Ай бұрын

Is it possible make this with next.js ?, I mean an app like that should be done using something like next.js

@beemoore6578 Ай бұрын

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 Ай бұрын

bro same, i am making project in figma

@kuriasjoy 22 күн бұрын

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?

@itsmydreem9554 18 күн бұрын

SHES REALY BEATIFUL

@Gemax-hope Ай бұрын

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 Ай бұрын

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 Ай бұрын

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 Ай бұрын

@@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.

@guc9ugjvobovov526 Ай бұрын

wow thats brillant

@deocon5579 Ай бұрын

Please provide mobile devolopment video with signing logics with kotlin or any language.....

@martin8634 Ай бұрын

It would be really helpful if you made the repo public

@maheejaman1625 24 күн бұрын

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!

@theindianrover2007 27 күн бұрын

can it be done for python based application ?

@braveitor Ай бұрын

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 Ай бұрын

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 Ай бұрын

@@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 Ай бұрын

@@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....

@francispaterno6337 Ай бұрын

Nice shirt and mug. I will order.

@SowjanyaDONIKENA 29 күн бұрын

Can you please share the video on figma into code using django framework

@greentips3313 13 күн бұрын

Hi, I followed till 35.13 Can't it be done in windows ? kindly advise how to proceed next.

@sthefanocarvalho2823 18 күн бұрын

What a time to be alive

@nehap2-6 Ай бұрын

Please make the video on Asynchronous Javascript!

@Marc-hn4eg 26 күн бұрын

why???????

@rec-trick Ай бұрын

please video for figma with flutter

@richardmasters2045 Ай бұрын

She is so smart 😂🎉❤

@jw200 Ай бұрын

copy paste coding makes everyone smart

@4m470 Ай бұрын

"Smart"😂 But srsly, she knows her stuff. She's been giving the community tons of great tutorials before AI tools went mainstream.

@4m470 Ай бұрын

@@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.

@art3mis635 Ай бұрын

Holy sheesh this sounds so damn interesting

@hishamazmy8189 Ай бұрын

Amazing

@mariuszel759 Ай бұрын

Is it good for beginners?

@prismatic1910 Ай бұрын

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

@RealVoidex 24 күн бұрын

You would think a channel that talks about coding and math would at least make a full course on discrete math

@jonathalopes3141 Ай бұрын

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 23 күн бұрын

It is not. Keep going man. I’m also currently learning HTML CSS and JS

@ojasvisingh786 28 күн бұрын

🤩👏

@udaramanula915 Ай бұрын

Is this the end of front end development ?

@RiskyCapital Ай бұрын

I believe so

@12crenshaw Ай бұрын

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 Ай бұрын

@@12crenshaw thanks

@deniswastaken Ай бұрын

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 Ай бұрын

No.

@28raghavk66 26 күн бұрын

does this mean there is no use of web development ?

@dineshdhoni7470 Ай бұрын

I was eagerly waiting for the deployment stuff 😐.

@ngaiasobi821 Ай бұрын

What about responsiveness?

@jando3176 Ай бұрын

Starting at 12:50 Ania is showing the responsiveness

@BINGUX_BEAT Ай бұрын

🇳🇬🇳🇬🇳🇬💯

@TheAlyZidan Ай бұрын

Well, here goes our jobs

@apaflogodson9137 Ай бұрын

@Marc-hn4eg 26 күн бұрын

i was laughing at the 'kebab case' i googled it and it made me laugh

@syedali5699 22 күн бұрын

Ania is very beautiful....!! It was hard to concentrate in the beginning. Not gonna lie.

@magokeanu Ай бұрын

isnt the voice of the intro an AI voice?

@TheAncientColossus Ай бұрын

Look forward to seeing more AI-generated girls in videos. You heard it here first.

@A.wmusicstudio Ай бұрын

Hlw everyone

@mustafamokhtar403 Ай бұрын

Hello 😊

@hellokevin_133 Ай бұрын

She knew she wasn't good with real coding and became a prompt engineer, haha gotta give it to her.

@tutohowto5345 Ай бұрын

Bruh ain't no way, she codes games in JS. She's fine!

@deniskhakimov Ай бұрын

@@tutohowto5345 i think he's trolling :D

@Khadi-C Ай бұрын

So, why would anyone need to hire a web developer if AI can do that job?

@Turnpost2552 Ай бұрын

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.

@renatoabrigo6965 16 күн бұрын

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.

@elsondasilva8636 Ай бұрын

🌹🌹🌹🌹🌹🌹🌹🌟🌟🌟🌟🌟🌟🌟

@TempidMoto-pk1cs Ай бұрын

Anyone watching this video in 2019?

@honestlylogical Ай бұрын

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 Ай бұрын

If all it needs to go is a js script or some media queries then its still extremely good

@honestlylogical Ай бұрын

@@joelpww yeah that's the case...

@Alex-bc3xe Ай бұрын

second.

@Turnpost2552 Ай бұрын

God Help us all. So much abstraction.

@sarangjadiye9831 16 күн бұрын

shame of learning react for 6+ months #help for job

@arefkr 25 күн бұрын

The whole thing could have been explained in 10 to 15 minutes. So much faff for monetisation’s sake

@IntellectCorner Ай бұрын

React developers click dislikes 😢

@RAUSHANKUMAR-iq4yj Ай бұрын

11 April 2024

@Turnpost2552 Ай бұрын

Clickbait title. I click once on this video. I guess every video is a one click video lo.

@AkashPadmanabhanL Ай бұрын

one-click is the name of Locofy's new feature. Don't take it in a literal sense.

@datadriveAshura Ай бұрын

Fking ai destroyed my bright future 🥴☠️🥴

@BeepBoop2221 Ай бұрын

Boooo

@Snackloose Ай бұрын

I hate Ai 😢😢

@humanbeing8681 Ай бұрын

shut up 🙏

@luluw9699 Ай бұрын

Then embrace it learn to use it to code faster

@deniskhakimov Ай бұрын

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 Ай бұрын

@@deniskhakimov you're right i guess

@jonathangerman2111 27 күн бұрын

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.