This is pretty dope though! I think that for frontends that don't need to interact with a backend, this eliminates the need for a frontend dev to a certain extent. However, it may require some customization if the output still need some tweaks or when we wanna have different data shapes for the props and the surrounding states.
Only matter of time before you can use AI to get figma to create the UI then use AI to create the front end code, then use AI to create the back end code, then use AI to upload and configure the domain, then use AI to pay. In theory this could be done in a minute. Me. Hey Alexa.. design me a interactive e-commerce website for a shoestore based on products listed in my spreadsheet. Find me a catchy domain name and register it. Put it on my credit card but first send me demo so I can review. Alexa: Will this do? Me. Yes.
@@ZyrusAlvez I'm a dev. I have no doubt devs will still be around but all the low hanging fruit work will disappear. The devs that survive will just need to up their game with multi-diciplinary expertise and further specialization.. Devs using AI to tackle physics problems, medical problems, engineering problems, etc... Even human alignment is a safety issue that will require devs especially as the models get more advanced.
Thank you very much for this useful clip. You are great and provide wonderful content. I have a question: how can we convert my design on figma to a mobile application using a Futter Framework? I have tried many sites, but they were not good. I want something that gives clean and free code.
Really interesting, i would use it only to give a fast preview to my clients, its better than just sending the jpg, it will help with iterations aswell
I got the impression that I still see "just" design into code. Back-end logic is not there, custom features are not there. I mean it is impressive no doubt about that, but when I want advanced functionality like scanning QR codes for inventory tracking e.t.c? Does AI know how to do this based on my requirements? Then what about data security? Deployment? Maintainability? Anyone here has the same impression?
🎯 Key Takeaways for quick navigation: 00:00 🤯 *Introduction to AI tools for converting Figma designs to code* - Overview of the process of converting Figma designs to code and the inefficiencies in the traditional manual method. - Introduction of AI tools, specifically Loco AI, that streamline this process. 01:20 🔧 *Introduction to Loco AI's newest product, Locy Lightning, for one-step code conversion* - Explanation of Locy Lightning's capabilities for transforming Figma documents into code with a single click. - Mention of the tool being free and demonstration of its functionality. 02:03 🛠️ *Setting up Locy Lightning and initiating the conversion process* - Guide on how to activate Dev mode in Figma and how to access and use the Locy Lightning plugin. - Detailed steps on selecting settings and converting Figma frames into code. 03:41 🖥️ *Exploring the output of AI code conversion and interactive previews* - Inspection of the generated code's quality and how it adheres to responsive design principles. - Discussion on viewing and interacting with the generated code and its components. 05:06 🏗️ *Introduction to the Builder feature for further customization of the generated code* - Explanation of syncing the generated code with Locy Builder for additional customization. - Detailed description of the process for binding dynamic data and exporting the final code. 07:30 🖥️ *Dynamic Data Binding and Prototype Sharing* - Detailed showcase of how to bind dynamic data to components and configure code. - Exploring the live prototype feature and sharing capabilities for immediate feedback. - Options for exporting, syncing, and deploying code directly to platforms like GitHub. 08:28 🧩 *Component Management and Code Customization* - Insight into managing and editing reusable components within the Locy Builder. - Options for customizing code output, including switching between CSS modules and Tailwind. - Demonstration of how the Locy AI automatically identifies and renames reusable components for better code management. 10:11 🚀 *Syncing Project with GitHub and IDE Integration* - Step-by-step guide on syncing the project with GitHub for version control. - Introduction to IDE integration with Visual Studio Code for an enhanced coding workflow. - Utilizing the Figma plugin in VS Code for directly accessing and converting Figma designs to code. Made with HARPA AI
Hi, Tim. I really appreciate your videos. I have a full project in Figma that I would like to import to FlutterFlow. I have done tons of research and couldn't find any intelligent import/export solution. Any advice? Thank you
I've hired a designer to craft the screen designs for my web app using Figma. Can I use these screens directly to generate the code? Additionally, will the code be responsive considering the various app sizes on Figma? Do I need to take additional steps to ensure responsiveness, or will Locofy handle this aspect automatically?
Correct. This quote from Tim 'The best part? It's absolutely free', is misleading. To use the Locofy plugin, you need to enable 'Dev mode' in Figma....which is a paid option. Furthermore, the plugin isn't exactly 'free' either. Since this is in Beta, they're giving you a 3 week free trial, but after that (and in the near future), you're most likely going to have to pay for this plugin as well.
You can get a "Figma to HTML" that's free and runs in nondev mode. But the code IMO has to be cleaned up and the functionality isn't there and the CSS isn't responsive. In my test anyway. I have a hunch this deal with Locify is going to end up the same way.
Yes i watched the 13 min vid in 7 minutes ×2 speed Edit : note that this is gonna be a paid feature in the near near future so abuse it ASAP not the plugin but the dev mode itself
THE FINAL CODE SUCKS. I'm sorry but as software engineer the code quality is very low. It's ok if you need a static site but for more "enterprise" projects is useless. More time to adapt the code than writing it from zero.
1:11 'The best part? It's completely free' This quote is misleading. To use the Locofy plugin, you need to enable 'Dev mode' in Figma....which is a paid option. Furthermore, the plugin isn't exactly 'free' either. Since this is in Beta, they're giving you a 3 week free trial, but after that (and in the near future), you're most likely going to have to pay for this plugin as well. Not saying the tool is bad (in fact, this particular tool looks a lot better than some other tools with this functionality), but I'm disappointed with the way this has been presented.
wow thank you for easing 2.5 years of learning frontend into thin air 😊😊
Wow..AI is amazing. It actually awe's me how far AI has come. Thanks for the video as always.
This is pretty dope though! I think that for frontends that don't need to interact with a backend, this eliminates the need for a frontend dev to a certain extent. However, it may require some customization if the output still need some tweaks or when we wanna have different data shapes for the props and the surrounding states.
You must of forgot that we still need to write JavaScript code and the figma code interactive.
Thanks Tim. You always got our back
i want a video on you genuine thought on locofy, not just a sponsored video
That was a lot of work for one click
Only matter of time before you can use AI to get figma to create the UI then use AI to create the front end code, then use AI to create the back end code, then use AI to upload and configure the domain, then use AI to pay. In theory this could be done in a minute.
Me. Hey Alexa.. design me a interactive e-commerce website for a shoestore based on products listed in my spreadsheet. Find me a catchy domain name and register it. Put it on my credit card but first send me demo so I can review.
Alexa: Will this do?
Me. Yes.
goodbye developers
@@ZyrusAlvez I'm a dev. I have no doubt devs will still be around but all the low hanging fruit work will disappear. The devs that survive will just need to up their game with multi-diciplinary expertise and further specialization..
Devs using AI to tackle physics problems, medical problems, engineering problems, etc... Even human alignment is a safety issue that will require devs especially as the models get more advanced.
This is a game changer, rip frontend development
should we be preparing our figma frames any particular way? Does it handle more complex elements like tabs?
I needed this video so bad lol it's like you read my mind I was just finding this type of video yesterday
Thank you very much for this useful clip. You are great and provide wonderful content. I have a question: how can we convert my design on figma to a mobile application using a Futter Framework? I have tried many sites, but they were not good. I want something that gives clean and free code.
Great video! Where can we get free figma files to convert into code for practice?
Figma Community
Really interesting, i would use it only to give a fast preview to my clients, its better than just sending the jpg, it will help with iterations aswell
I got the impression that I still see "just" design into code. Back-end logic is not there, custom features are not there. I mean it is impressive no doubt about that, but when I want advanced functionality like scanning QR codes for inventory tracking e.t.c? Does AI know how to do this based on my requirements? Then what about data security? Deployment? Maintainability? Anyone here has the same impression?
adobe muse did even better job than this, but at the end they failed, the back-end logic is everything the design is the easy part
🎯 Key Takeaways for quick navigation:
00:00 🤯 *Introduction to AI tools for converting Figma designs to code*
- Overview of the process of converting Figma designs to code and the inefficiencies in the traditional manual method.
- Introduction of AI tools, specifically Loco AI, that streamline this process.
01:20 🔧 *Introduction to Loco AI's newest product, Locy Lightning, for one-step code conversion*
- Explanation of Locy Lightning's capabilities for transforming Figma documents into code with a single click.
- Mention of the tool being free and demonstration of its functionality.
02:03 🛠️ *Setting up Locy Lightning and initiating the conversion process*
- Guide on how to activate Dev mode in Figma and how to access and use the Locy Lightning plugin.
- Detailed steps on selecting settings and converting Figma frames into code.
03:41 🖥️ *Exploring the output of AI code conversion and interactive previews*
- Inspection of the generated code's quality and how it adheres to responsive design principles.
- Discussion on viewing and interacting with the generated code and its components.
05:06 🏗️ *Introduction to the Builder feature for further customization of the generated code*
- Explanation of syncing the generated code with Locy Builder for additional customization.
- Detailed description of the process for binding dynamic data and exporting the final code.
07:30 🖥️ *Dynamic Data Binding and Prototype Sharing*
- Detailed showcase of how to bind dynamic data to components and configure code.
- Exploring the live prototype feature and sharing capabilities for immediate feedback.
- Options for exporting, syncing, and deploying code directly to platforms like GitHub.
08:28 🧩 *Component Management and Code Customization*
- Insight into managing and editing reusable components within the Locy Builder.
- Options for customizing code output, including switching between CSS modules and Tailwind.
- Demonstration of how the Locy AI automatically identifies and renames reusable components for better code management.
10:11 🚀 *Syncing Project with GitHub and IDE Integration*
- Step-by-step guide on syncing the project with GitHub for version control.
- Introduction to IDE integration with Visual Studio Code for an enhanced coding workflow.
- Utilizing the Figma plugin in VS Code for directly accessing and converting Figma designs to code.
Made with HARPA AI
Can this code be taken into bolt and edit it further
Hi, Tim. I really appreciate your videos.
I have a full project in Figma that I would like to import to FlutterFlow. I have done tons of research and couldn't find any intelligent import/export solution. Any advice? Thank you
Will this create a design system for the tailwind css such as all the color codes, spacing, widths etc?
thank you this will help me a lot!!
I've hired a designer to craft the screen designs for my web app using Figma. Can I use these screens directly to generate the code? Additionally, will the code be responsive considering the various app sizes on Figma? Do I need to take additional steps to ensure responsiveness, or will Locofy handle this aspect automatically?
Great video btw ❤
This is awesome!
It will save so much time!
Figma is free, Locofy is free but Figma Dev Mode is paid. So you have to pay 15 EUR/month. Am I right?
Correct.
This quote from Tim 'The best part? It's absolutely free', is misleading.
To use the Locofy plugin, you need to enable 'Dev mode' in Figma....which is a paid option.
Furthermore, the plugin isn't exactly 'free' either. Since this is in Beta, they're giving you a 3 week free trial, but after that (and in the near future), you're most likely going to have to pay for this plugin as well.
plugins are free for me?
You can get a "Figma to HTML" that's free and runs in nondev mode. But the code IMO has to be cleaned up and the functionality isn't there and the CSS isn't responsive. In my test anyway. I have a hunch this deal with Locify is going to end up the same way.
so there will be less demand for front-end developers soon?
Lol better find a niche
Short answer: no
Long answer: actually still no
Does Locofy recognise Carousels and make them interactive ?
I signed up from your previous video! Tim do you know of a good screenshot to figma design tool?
So do we need to know how to build designs from scratch anymore
Thank You
When there’s a drag and drop full stack backend logic integrated with Ai suggestions click to deploy then we won’t have to listen to them no more lol
to enable dev mode paid team is required
Waiting for the AI Tool that converts Ligma in one click
in one lick
What's Ligma?
@@Blacksun88marco 🌚
Waiting for the AI tool that converts one click in Figma
Waiting for the AI tool that converts code into figma design
This is amazing
Can we have access to the github repo you have sync'ed ?
Is there anything like this but for existing web pages instead of Figma?
how do i make my figma file ready for this
After watching this I think I wasted my 50k to learn web development I won't get a job now?
I can't install it
Help me if you can
We need UBI. Jobs are going.
Yes i watched the 13 min vid in 7 minutes ×2 speed
Edit : note that this is gonna be a paid feature in the near near future so abuse it ASAP not the plugin but the dev mode itself
an AI watched it for me !
@@bossgd100 lol
Is it free?
i think big campony replace programmers with this tool (coming soon)
free trial damn son they did you dirty
As always it's going to destroy the web development industry
THE FINAL CODE SUCKS. I'm sorry but as software engineer the code quality is very low. It's ok if you need a static site but for more "enterprise" projects is useless. More time to adapt the code than writing it from zero.
Stfu and cope more
Hey what about state management????????????
1:11 'The best part? It's completely free'
This quote is misleading.
To use the Locofy plugin, you need to enable 'Dev mode' in Figma....which is a paid option.
Furthermore, the plugin isn't exactly 'free' either. Since this is in Beta, they're giving you a 3 week free trial, but after that (and in the near future), you're most likely going to have to pay for this plugin as well.
Not saying the tool is bad (in fact, this particular tool looks a lot better than some other tools with this functionality), but I'm disappointed with the way this has been presented.
so no need to learn to code right?
:)
its not free
this is a scam, it will just waste your time
First
Being the first to comment on a popular channel like yours feel special
Figma spheres
Not as special as figma nuts
Zero