Unbelievable AI Tool Converts Figma to Code🔥
Вставка
- Опубліковано 29 чер 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
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.
Good for Locify to sponsor this video. My expectations are high will update once I have completed watching
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
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?
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
Thanks mate, helpful run through.
Very well presented ! Thank you
the best video ever and is working is the most acurate plugin for figma, the ather is just giving u more code
so great. The thing I wannted the most for now. thanks for your sharing
Dude, this is basically the end of transpilers! Just need to mine that kenel!
just as everything, it is not an panacea when building front end, but it is a great tool nonetheless, thanks Tim for the info !
This is the only tutor that really help me out!
Thank you very much. Amazing
awesome tutorial!
I need one more live video for sure...I really need to learn programming from you especially python
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.
Pretty cool, especially for designers or freelancers
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
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 ?
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.
This is Fire 🔥
John from Africa Kenya....love your videos..I have like four downloaded videos right now
Game changer, yes. However, it has its hangups. This will teach every designer to start naming every element (as they should anyway).
Thanks Tim .Will it can be integrated with Visual Studio 2022 ?
For beginners! mastering first any language, then you can move to use Ai for faster works!
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..
Free and Trial is 2 different things my friend but its worth it as saves tons of time
Thanks for introducing the tool. I've tried it out for a while. Doesn't seem to improve my speed... But good video
best ai tool for me
Using locofy, Excellent tool, willing to PAY
Thank You
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
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
How can I reach out to them to demand support for Flutter??
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.
Is there any new upgrade? used Locofy about 3 months ago and where very good allready then.
I agree with some comments below. These are just normal parsers, not AI. Anyway it's a great tool.
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.
Any chance you will support Ionic/Angular?
This tool is wild.
Dope
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.
My Locify just gives me a list of videos to watch. How do I get the components to appear?
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?
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.🤣
i wish it comes for webflow
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
That's great and all, but can we convert Ligma to code?
is this work also for creating a wordpress plugin?
Finally
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.
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.
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.
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
My vs code says that no module named flask I have tried everything to fix it
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
You can't use percentages in Figma. Is therefore Locofy also not using percentages?
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
Do you think it's the best tool for Figma → React?
People are struggling to design Locofy-ready Figma Layouts!
I don't even know what is a figma file lol.
same
Hello thansk for your video , i have some issues with locofy, when i try to select my pages he no detect nothing, so i can't use it
Do you have some solutions for me please ?
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?
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.
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.
we are done
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
I tried setting up python in vs code I tried everything please help !!!
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
Tried that in the past. It only comverts basic pages. It cannot also export images and videos from figma.
The tool is not entirely free so stop misleading people. Also your demo doesnt prove much ....
how do i use ready made design in figma
i search for locofy in plugins but it doesnt exist
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
ngl just writing the code seems easier lol, just a humble opinion
Tim do you listen to Blues Traveler?
i want 10000x development
Is it this "completely" free or there's 20 day-trial period...am I missing something?🤔🤔🤔🤔
Got excited but it doesn't do SwiftUI yet(?)
you aren't getting far in life 💀
Hahaha UA-cam comments, never a disappointment
is there a Figma to Roblox converter?
What is the point of changing figma to code?
16:52 "figma design to a fully functional project" can you show me how you upload your profile picture ?
wow
it is using "position:absolute" for everything
still faster to just skip the mockup phase and go straight to building in HTML5.
I'd prefer to convert the figma design to ReactJS manually instead of getting into this headache.
Microsoft FrontPage? (2003)
Can anyone tell me what a "budd'n" is?
Did not adequately explain what figma is
no comments yet ?
edit this ai generate code must be a fucking hells XD
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.
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.
I hope it doesn't become paid within a few months.
Meeeh