Unbelievable AI Tool Converts Figma to Code🔥
ฝัง
- เผยแพร่เมื่อ 13 มิ.ย. 2024
- Locofy.ai is a low-code developer tool that lets you turn your Figma or Adobe XD designs into frontend code for web & mobile. Currently supports React, React Native, HTML/CSS, Gatsby, Next.js, and Vue.js. Now you can build full apps, screens, components & design systems 10x faster with your existing design tools, libraries, tech stack, and CI/CD workflows.
Check out Locofy.ai. (in Free Beta): www.locofy.ai/?...
🎬 Timestamps ⏱️
00:00 | This AI Tool is Insane
01:13 | Introducing Locofy
01:49 | Locofy Setup
02:45 | Locofy Plugin Walkthrough
08:52 | Converting Figma To Code
12:42 | Exporting Your Code
14:07 | Conflict Resolution
16:46 | Final Thoughts
💻 Master Blockchain and Web 3.0 development today by using BlockchainExpert: 🔗 algoexpert.io/blockchain (Use code "tim" for a discount!)
💻 Accelerate your software engineering career with ProgrammingExpert: 🔗 programmingexpert.io/tim (Use code "tim" for a discount!)
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
👕 Merchandise: 🔗 teespring.com/stores/tech-wit...
📸 Instagram: 🔗 / tech_with_tim
📱 Twitter: 🔗 / techwithtimm
🔊 Discord: 🔗 / discord
📝 LinkedIn: 🔗 / tim-ruscica-82631b179
🌎 Website: 🔗 techwithtim.net
📂 GitHub: 🔗 github.com/techwithtim
One-Time Donations: 💲 www.paypal.com/donate?hosted_...
Patreon: 💲 / techwithtim
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
⭐️ Tags ⭐️
-Tech With Tim
-Locofy
-AI Tools
⭐️ Hashtags ⭐️
#techwithtim #programming #ai
![บุกร้านไอศกรีม VJ วุ้นเส้น !!!! [ดูคลิปเต็มหน้าช่อง] #Short | PANG ORNHIRA](http://i.ytimg.com/vi/g549nEhKZdc/mqdefault.jpg)
What do you guys think of this tool? Pretty crazy how far AI has come 😮
It's a really fantastic tool. Thanks, Tim!
@@thaivu551 It's ok, but it really needs an option to not use absolute positioning - and use the closest row and column classes - I do this with ChatGPT so I know it's possible.
@@74Gee its possible but this tool not doing it properly so it worth nothing I guess
@@advancedprogramming62 Well some use absolute positioned elements, it's just a bit of a nightmare transitioning between various resolutions.
Hi Tim, please reply my question. at duration 16:40 , that's where we've resolved the conflict. But, the changes are not made in Locofy Builder tho, the color is still not black where we changed locally on GitHub. That's quite confusing.
You see, if we make changes on Figma with Locofy plugin, then we sync to Locofy Builder, then we sync & push to our GitHub repo, then the changes also apply to our codes, all we need to do is only run "git pull" on our local IDE. But if we make changes on our local IDE, it does apply to our GitHub repo but not in the design of our Locofy Builder and Figma. Please tell me the solution for this, thanks Tim 🙌🏻
Nothing is Game Changer yet. Dear new developers, don't get panicked by youtube content creators creating doubts in the name of AI. A programmer is not a person who knows class, loop , array stuffs, a programmer is a person who programs a machine to solve problems. Also, don't get caught up in language wars. Any language is fine, as long as you understand its usage.
Nice, to the point.
Needed to hear this.
Be sure to truly understand the fundamentals, don't rush it and don't be lazy.... Ai tools is a tool that will help advance civilization faster...
@@Kauroseta To expand on that, now more than ever makes understanding the fundamentals important. AI writes a lot of unsafe code, and knowing how to identify that and fundamentally understanding what the AI generates will make you worth keeping around when AI finally does start taking jobs.
❤
A lot of “fix my shitty generated code” jobs are coming
What a time to be a programmer
As a product designer who works with frontend guys. This statement speaks to my soul 😂😂😂
Dude I went all on programming for the past few months and yh ai code is really buggy and I spend way to long debugging it. Sometimes I start afresh
i honestly can't imagine a worse career 😂
Job security to fix the AI-coded projects that will arise.
LOL awesome way to look at it
I remember similar conversations around Fireworks, Dreamweaver, JQuery etc.
But if you don’t have a solid understanding of the basics, you’re gonna have problems when things go wrong.
Absolutely use tools to lighten the load, but don’t get greedy/lazy and lay off your dev teams just jet.
I'd been trying this plug-in for a while and is not that simple for everyone. Maybe you will have problems with responsive designs, you have to spend some time with layouts and really know how to design each component on Figma to later convert it to code. I mean, it will not replace anyone, you still have to know ux/ui and frontend concepts to make it really works.
Nevertheless, is an incredible tool, it works really well.
Great video!
100% correct, I was the same problem when tried it, need to design it first properly then it will convert it in addition it make couple of bugs but that fine I guess. Its pretty good to collect assets.
have u tried anima?
Always when I use AI to generate some code it’s a nightmare to debug that usually takes more time than building it p
Good for Locify to sponsor this video. My expectations are high will update once I have completed watching
To use this feature you definitely would still have to know code because you have to know what you're looking at, what suggestions you're agreeing to, and how to change them.
or just ask something like chatGTp using real language and screenshot to describe your problem :) all PROGRAMMING will be done very soon, with real language. just like all art will be done the same way,
@@DisentDesign If you were truly a coder or developer you would know that what you're saying makes no sense. When an application is not working are you going to just copy and paste thousands and thousands of lines of code to see what's wrong? That's very unrealistic.
As a developer you know how to pinpoint bugs because you wrote the code. So based on what the bug is or how the application is performing you already know ahead of time what the potential causes are.
lol true@@ideaplusagency
the best video ever and is working is the most acurate plugin for figma, the ather is just giving u more code
This is cool. I'm still sticking to my programmers even if they choose to use these tools. Good video mate
They probably are lol.
This tool is unbelievably cool, and this is definitely the future for creating frontend MVPs. I do question the performance of the generated code, are there any benchmarks on this?
Thanks mate, helpful run through.
I keep hearing the words "Completely free" but couldn't help but notice you're using a Free Trial account not shitting on the hustle of sponsorships but respect your viewers a little more and give them a bit more transparency... There's obviously some free features and some features locked behind a paywall or their free trial which I assume requires you to sign up with a payment method and if it doesn't then that means we will pay in other ways but needless to say this will most likely not be free for that long.
The language is important. you "CAN" use it completely free.
This is the only tutor that really help me out!
Very well presented ! Thank you
so great. The thing I wannted the most for now. thanks for your sharing
just as everything, it is not an panacea when building front end, but it is a great tool nonetheless, thanks Tim for the info !
Dude, this is basically the end of transpilers! Just need to mine that kenel!
Pretty cool, especially for designers or freelancers
Thank you very much. Amazing
I would actually code faster rather than making figma designs, then making all interactive elements interactive, then aligning, then modiying
That is true. This is probably more useful when you already have a figma file from a graphic designer or someone so you don't have to replicate the whole thing
@@maryllcastelino yeah, but if this really works, we are not even required to make it interactive, pretty funny
Templates... templates...
Me when hiring UX developers: -"Im a graphic designer" -Do you know CSS and HTML? -"No, I use Figma"... -There is the door, goodbye.
@@MotionInMotion1975 Perhaps the issue is in hiring for a nonexistent job - "UX developer". Graphic design has more in common with print, posters and illustrations than frontend.
Just like UX design has more in common with user research, rather than UI coding.
Are you HR by any chance ? Not knowing anything about design and the process ?
Awesome tool, but has some learning curve, i wish i could just export the code for single element like a card not hole application that would be awesome to have
Anima App
Thanks Tim .Will it can be integrated with Visual Studio 2022 ?
awesome tutorial!
I need one more live video for sure...I really need to learn programming from you especially python
So resolving conflict means just overriding your team edits and applying designer choice, okay got it 😂
Also you said it does not spewing boiler plates but from the demo you have shown it does add sheed of stuff into the codes and from what you shown so far I believe it will spell a lot of troubles at later stages where revisions will always certainly happens.
Imagine if the design are totally changes and yet you need to keep the logic of the apps. This kind of flow requires you to stick with what the tools provided you with and trust me it might be working for your simple Hello World like project but on the complex projects with quite a lot of stuff happens within pages it basically will just add hours of tasks just to keep up with the changes.
For beginners! mastering first any language, then you can move to use Ai for faster works!
John from Africa Kenya....love your videos..I have like four downloaded videos right now
Free and Trial is 2 different things my friend but its worth it as saves tons of time
Game changer, yes. However, it has its hangups. This will teach every designer to start naming every element (as they should anyway).
Doing front end stuffs are really hectic and need to much patience... I love doing back-end stuffs more than frontend... Nice tool which might help.. I will try this..
Using locofy, Excellent tool, willing to PAY
Thanks for introducing the tool. I've tried it out for a while. Doesn't seem to improve my speed... But good video
How can I reach out to them to demand support for Flutter??
This is Fire 🔥
best ai tool for me
Thank You
Is there any new upgrade? used Locofy about 3 months ago and where very good allready then.
Good evening, I wanted to ask you if it is possible to convert figma animations, components, component sets in locofy. If so, do you know of a video that explains it?
I agree with some comments below. These are just normal parsers, not AI. Anyway it's a great tool.
Any chance you will support Ionic/Angular?
I guess I'm losing my job
Be best at what you do.
This is just a tool to support you in programming faster, it cannot replace you.
@@technicaltheb034 smart work
website builders has been around for years, and clients still look for a designer to build their 2-3 section landing page
@@thaivu551 cope
This tool is wild.
i wish it comes for webflow
When the beta is over, I hope they will not make the product over priced. Like for example 5-10 dollars a month is reasonable
is this work also for creating a wordpress plugin?
Lol now UI/UX desginer who don't know how to code can make webpages.
Now, coders will learn UI/UX if they want to keep their jobs.
This has the potential to confuse many people hoping or thinking that this is some quick fix. Bottom line is, just do the work. might not be as fast but for complex projects care is very crucial.
My vs code says that no module named flask I have tried everything to fix it
My Locify just gives me a list of videos to watch. How do I get the components to appear?
IntraWeb is kind of similar, was available for tens of years and yet it is like no one uses it. Can you understand, why? Because for me it seems like whole world gone the wrong way with how to make SPAs. Why not make it this way? In one tool for both front and back and for design.
it only word for designing, i was shock too at first my friends were literally making design in figma and then converting it in code generated by ai.🤣
What happens to conflicts once I add backend logic? How does it know what code is irrelevant to the design? What happens when I eslint?
I tried a competitor in the past pre gpt and it was annoying to use.
Do you think it's the best tool for Figma → React?
You can't use percentages in Figma. Is therefore Locofy also not using percentages?
This video force me to stop improving my frontend skill and rather focus on backend 😭
😭😭😭😭🤣🤣Broo, but that will only make us better software engineers i guess🤡
Yup!! This made me realize how valuable back end skills are
We have serverless backends now. Firebase, Supabase. Better be a full stack and know how to put everything together to a complete product
I tried setting up python in vs code I tried everything please help !!!
Dope
The tool is not entirely free so stop misleading people. Also your demo doesnt prove much ....
As anew coder such things just make me anxious , seems im studying for something that will be redundant soon!
Most likely yes
You kinda arrived late to the party bro, sorry... but for now, the music is still playing.
Tried that in the past. It only comverts basic pages. It cannot also export images and videos from figma.
I don't even know what is a figma file lol.
same
how do i use ready made design in figma
As a frontend or email developer, will we ever write HTML and CSS code from scratch, or will we just use AI tools, including Anima App and Locofy?
Who the fuck writes Code from Scratch. Before AI I copied from Stack Overflow, now im copying from ChatGPT. That the difference
i like this guy lol@@HQKerim
This is really cool, but I have some concerns about the code’s accessibility. I’m not seeing a lot of semantic elements and aria attributes for the custom elements
Finally
This is the same "WYSIWYG" type of development found in old IDEs such as FrontPage or Dreamweaver of over 20 years ago. This eventually becomes an overly complicated GUI that is trying to do everything for the user with visual components which would normally be lines of code written by a developer. Still inaccessible by layman.
Nothing will ever simplify the complexity of intent by the creator. This may work as a cookie cutter for heavily reused aspects of development (which composing components already does) but something new will still be developed by those on the right side of the bell curve in the law of the diffusion of innovation. In other words, innovation is a humans job in the foreseeable future despite the massive leaps in AI models.
I will no doubt get some "ya but this model can create new XXX" replies but I can assure you as a senior level software engineer of over 25 years experience specializing in solutions (applications big & small) without precedent, my response is "no, it can't". Currently, AI is statistics obfuscated behind a wrapper.
The thing is. People also have their own styles of writing code. Ive seen a ton of tools and used many. And from my conclusion. I prefer my own code to others. It also makes finding things much easier because you instantly know where to find it. Plus front end/ ui is the “easy” part anyway. No offense to front end designers. Designing and building are two different parts and designs also need experience and expertise
Front end is more hard and borung than back side.
Calling Frontend easy is such a stereotype! It's like saying crafting slick UIs and user flows is a piece of cake compared to sorting out CRUD features.
And if you reckon Frontend is a breeze, how about giving a shot at duplicating Figma's UI with all its smoothness, just as a web interface?
Real talk, complexity depends on the project, not just the job title. Keep that in mind!
on a small scale front end is fun and easy peasy but on a large scale its a bigger headache. But if your a visual person you will enjoy even under pressure and fighting deadlines
@@Baldurgate123 Only if you make it more complex than it needs to be through bad technology choices.
So you think front end/UI is the 'easy' part? Well, I'm currently collaborating with a backend developer who says without my help as a frontend developer, it's impossible for him to finish the project. He's not a creative person and always struggles with copying designs and converting them to code. Whenever he tries, it ends up broken and frustrates him. By the way, the project has been ongoing for more than 7 months before he finally completed it.
what is the difference between this and the new dev mode in figma ?
This is much more advanced.
anima does this and has been doing this for a while
That's great and all, but can we convert Ligma to code?
But me as a developers not always have the permission to edit stuff on the figma. So i still need to do the design on my own
figma does have a feature where the owner of the figma file can allow another contributor to make changes, and they also maintain version control.
I'm under no illusion that these tools are not advanced yet to be solely relied upon to create advanced applications & manage the resulting errors that happen, however, id like a tool good enough to build an MVP for a web/mobile application?
i want 10000x development
I have worked with this ai code you have lots of restrictions and they mainly used old practices so better to code with developers directly
i search for locofy in plugins but it doesnt exist
ngl just writing the code seems easier lol, just a humble opinion
AI is not replacing all programmers or copywriters, just most of them and enough to screw up the lives of people and their families who loose their job
we are done
Will ui ux design or product design be destroyed by AI in the near future?
1. Do clients know what they want ?
2. Are the clients capable of describing what the want ?
If the answer to both is "Yes", then yes, AI will destroy UI, UX and product design
not ui ux but coding
People are struggling to design Locofy-ready Figma Layouts!
Tim do you listen to Blues Traveler?
Is it this "completely" free or there's 20 day-trial period...am I missing something?🤔🤔🤔🤔
is there a Figma to Roblox converter?
16:52 "figma design to a fully functional project" can you show me how you upload your profile picture ?
What is the point of changing figma to code?
it is using "position:absolute" for everything
Got excited but it doesn't do SwiftUI yet(?)
you aren't getting far in life 💀
Hahaha TH-cam comments, never a disappointment
Did not adequately explain what figma is
wow
no tailwind
I'd prefer to convert the figma design to ReactJS manually instead of getting into this headache.
edit this ai generate code must be a fucking hells XD
Microsoft FrontPage? (2003)
still faster to just skip the mockup phase and go straight to building in HTML5.
no comments yet ?
Meeeh
I have tried it in the past. Not that good. There are other figma plugins that are better than this. Also, my main problem with these tools are that I mostly work in mui and I haven't been able to find any figma to mui tool.
Tell me the names of those plugins.
naah i prefer something i wrote, sometimes it's not that code runs, it's also fun doing, so i ain't gonna let AI take that away from me.
Thanks to this tool, my boss has become an even bigger of a pr*ck than he usually is, thinking AI will magically create our project 100x faster and is angry at why it isn't finished yet.
Why do you need ai for this ? Is is called a scene editor, game engines have had it for years, in the game dev industry you would never have a programmer making UI, the artists make UIs, the programmers just add code to the buttons and stufd