This AI Tool Converts Figma to Code in ONE Click🤯

  Рет қаралды 37,155

Tech With Tim

Tech With Tim

Күн бұрын

This video showcases an incredible AI tool that can convert Figma designs into readable, reusable and scalable frontend code with a single click. It’s seriously impressive. This tool is Locofy Lightning and I’ll show you exactly how to get started with it in a matter of minutes. It’s also available in Figma’s Dev Mode and Figma for VS Code extension.
Try Locofy Lightning in free beta: www.locofy.ai/?...
Learn more about Figma’s Dev Mode: www.figma.com/dev-mode/?...
⏳ Timestamps ⏳
00:00 | This AI Tool is INSANE
01:16 | How it Works
01:50 | Locofy Lightning Setup
02:51 | Converting Figma → Code
05:53 | Locofy Builder
09:28 | Exporting/Syncing to GitHub
11:08 | Locofy Lightning in Figma for VS Code Extension

Пікірлер: 73
@Big_chicken-ok8gc
@Big_chicken-ok8gc 4 ай бұрын
Wow..AI is amazing. It actually awe's me how far AI has come. Thanks for the video as always.
@warezit
@warezit 4 ай бұрын
🎯 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
@good_bunny
@good_bunny 4 ай бұрын
Thanks Tim. You always got our back
@jesuschrist2029
@jesuschrist2029 4 ай бұрын
I needed this video so bad lol it's like you read my mind I was just finding this type of video yesterday
@Codecrafters_hub-
@Codecrafters_hub- 4 ай бұрын
thank you this will help me a lot!!
@guizaoacc
@guizaoacc 4 ай бұрын
This is awesome! It will save so much time!
@growingisgood
@growingisgood 4 ай бұрын
Great video btw ❤
@tolotrarabefaly1333
@tolotrarabefaly1333 4 ай бұрын
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.
@lastspoil5547
@lastspoil5547 4 ай бұрын
You must of forgot that we still need to write JavaScript code and the figma code interactive.
@kentjohansson6937
@kentjohansson6937 4 ай бұрын
That was a lot of work for one click
@theprimecoder4981
@theprimecoder4981 4 ай бұрын
Will this create a design system for the tailwind css such as all the color codes, spacing, widths etc?
@_boraprogramar
@_boraprogramar 4 ай бұрын
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
@winningtech5
@winningtech5 4 ай бұрын
i want a video on you genuine thought on locofy, not just a sponsored video
@katechaparro5924
@katechaparro5924 3 ай бұрын
should we be preparing our figma frames any particular way? Does it handle more complex elements like tabs?
@aymenbachiri-yh2hd
@aymenbachiri-yh2hd 2 ай бұрын
Thank You
@IdokodotTech-km8ne
@IdokodotTech-km8ne 4 ай бұрын
This is amazing
@asdasdaa7063
@asdasdaa7063 4 ай бұрын
I signed up from your previous video! Tim do you know of a good screenshot to figma design tool?
@mydogsbutler
@mydogsbutler 4 ай бұрын
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.
@user-sp3ew1rs5m
@user-sp3ew1rs5m 4 ай бұрын
goodbye developers
@mydogsbutler
@mydogsbutler 4 ай бұрын
@@user-sp3ew1rs5m 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.
@omaralhajali3915
@omaralhajali3915 Ай бұрын
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.
@JulianoGheller
@JulianoGheller 4 ай бұрын
Is there anything like this but for existing web pages instead of Figma?
@zee2839
@zee2839 4 ай бұрын
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?
@boltbet7436
@boltbet7436 4 ай бұрын
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
@growingisgood
@growingisgood 4 ай бұрын
Does Locofy recognise Carousels and make them interactive ?
@MFDOOM64
@MFDOOM64 4 ай бұрын
This is crazy.
@visheshpandey2001
@visheshpandey2001 4 ай бұрын
Hey what about state management????????????
@JustJacob-nt8eu
@JustJacob-nt8eu 4 ай бұрын
Waiting for the AI Tool that converts Ligma in one click
@_Lumiere_
@_Lumiere_ 4 ай бұрын
in one lick
@Blacksun88marco
@Blacksun88marco 4 ай бұрын
What's Ligma?
@rbpk13
@rbpk13 4 ай бұрын
​@@Blacksun88marco 🌚
@Gabrielrezcp
@Gabrielrezcp 4 ай бұрын
Waiting for the AI tool that converts one click in Figma
@Yesterday_i_ate_rat
@Yesterday_i_ate_rat 4 ай бұрын
Waiting for the AI tool that converts code into figma design
@MrVajcakaty
@MrVajcakaty 4 ай бұрын
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?
@Yusuf-ps4ov
@Yusuf-ps4ov Ай бұрын
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
@umarutahiru
@umarutahiru 4 ай бұрын
how do i make my figma file ready for this
@m7mo0o
@m7mo0o 4 ай бұрын
so there will be less demand for front-end developers soon?
@boltbet7436
@boltbet7436 4 ай бұрын
Lol better find a niche
@dontreadmyusername6787
@dontreadmyusername6787 4 ай бұрын
Short answer: no Long answer: actually still no
@lastspoil5547
@lastspoil5547 4 ай бұрын
Great video! Where can we get free figma files to convert into code for practice?
@kayodedesign
@kayodedesign 4 ай бұрын
Figma Community
@mohsinalshammari9776
@mohsinalshammari9776 4 ай бұрын
This is a game changer, rip frontend development
@just4eternity
@just4eternity Ай бұрын
Can we have access to the github repo you have sync'ed ?
@lastspoil5547
@lastspoil5547 2 ай бұрын
So do we need to know how to build designs from scratch anymore
@laibaebrarsiyal2137
@laibaebrarsiyal2137 Ай бұрын
to enable dev mode paid team is required
@lenkavitkova9143
@lenkavitkova9143 4 ай бұрын
Figma is free, Locofy is free but Figma Dev Mode is paid. So you have to pay 15 EUR/month. Am I right?
@darashchablani1877
@darashchablani1877 4 ай бұрын
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.
@DagHolmen
@DagHolmen Ай бұрын
plugins are free for me?
@chikkii1601
@chikkii1601 7 сағат бұрын
I can't install it Help me if you can
@breakoutgaffe4027
@breakoutgaffe4027 4 ай бұрын
free trial damn son they did you dirty
@dennisdegraphicsdynamo_999
@dennisdegraphicsdynamo_999 3 ай бұрын
Is it free?
@MystifulHD
@MystifulHD 3 ай бұрын
We need UBI. Jobs are going.
@KaramAlayan
@KaramAlayan 4 ай бұрын
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
@bossgd100
@bossgd100 4 ай бұрын
an AI watched it for me !
@KaramAlayan
@KaramAlayan 4 ай бұрын
​@@bossgd100 lol
@ezrasamson-ez2mv
@ezrasamson-ez2mv 4 ай бұрын
i think big campony replace programmers with this tool (coming soon)
@da372
@da372 4 ай бұрын
After watching this I think I wasted my 50k to learn web development I won't get a job now?
@abhishekgupta6371
@abhishekgupta6371 4 ай бұрын
As always it's going to destroy the web development industry
@MazineZ
@MazineZ 4 ай бұрын
First
@MazineZ
@MazineZ 4 ай бұрын
Being the first to comment on a popular channel like yours feel special
@Luke_SpyWalker
@Luke_SpyWalker 4 ай бұрын
Figma spheres
@Luke_SpyWalker
@Luke_SpyWalker 4 ай бұрын
Not as special as figma nuts
@jimmyboyd817
@jimmyboyd817 4 ай бұрын
Zero
@dendecode
@dendecode 3 ай бұрын
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.
@panwar2001
@panwar2001 4 ай бұрын
so no need to learn to code right? :)
@darashchablani1877
@darashchablani1877 4 ай бұрын
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.
@Esphi_N
@Esphi_N Ай бұрын
this is a scam, it will just waste your time
Figma VSCode Extension!! Convert Design to Code!
12:29
CoderOne
Рет қаралды 185 М.
How to use Figma's new Dev Mode
19:14
DesignCourse
Рет қаралды 98 М.
Как быстро замутить ЭлектроСамокат
00:59
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 13 МЛН
ДЕНЬ РОЖДЕНИЯ БАБУШКИ #shorts
00:19
Паша Осадчий
Рет қаралды 7 МЛН
Китайка и Пчелка 10 серия😂😆
00:19
KITAYKA
Рет қаралды 1,6 МЛН
AI tools for UI Designers 🛠
8:57
Jesse Showalter
Рет қаралды 86 М.
Coding Is Changing...Here Is What You NEED To Know
8:12
Tech With Tim
Рет қаралды 252 М.
5 Coding Projects That Give You An UNFAIR Advantage
9:40
Tech With Tim
Рет қаралды 181 М.
Figma Starts Charging Dev Mode? Here is FREE Alternative!
11:13
Antonija Pek
Рет қаралды 9 М.
Intro to Figma for Developers
10:12
Scrimba
Рет қаралды 121 М.
Transform Figma to code with Visual Copilot
56:57
Builder
Рет қаралды 13 М.
Unbelievable AI Tool Converts Figma to Code🔥
17:46
Tech With Tim
Рет қаралды 280 М.
Visual Copilot Converts Figma Mocks to React Fast and Accurately
15:44
Jack Herrington
Рет қаралды 76 М.
Figma Dev Mode 🤯
14:26
Jesse Showalter
Рет қаралды 39 М.
Как быстро замутить ЭлектроСамокат
00:59
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 13 МЛН