Turn Figma designs into full stack apps with AI

0:00 you can now turn figma designs into 0:02 Pixel Perfect working full stack 0:04 applications with interactivity 0:07 authentication custom postgress ql 0:09 backends with just a couple clicks and 0:11 prompts look my data is right there in 0:13 the database it works this is with the 0:15 brand new just launching today builder. 0:17 and lovable integration let me show you 0:19 how it works first you need the Builder 0:21 doio figma plugin then select any figma 0:23 design and launched plugin hit the 0:25 export to code button then when you're 0:27 done you can either grab the CLI to 0:28 integrate with an existing code 0:30 or now click this new open and lovable 0:32 button to create a lovable project off 0:34 of this design when done you'll be 0:36 launched into lovable and it'll spin up 0:38 your application and now lovable you can 0:40 type in anything you want to make this 0:41 functional interactive etc for instance 0:44 I'll say add validation to this form 0:46 lovable will go to work adding the 0:47 interactivity it's using Zod here for 0:49 the schema I can now test it out and 0:51 refine it however I like but to make 0:53 things way better let's give it a real 0:55 backend I'll connect to a superbase 0:57 project it's simple to create a free 0:58 account and now I can say send Form 1:00 results to a postgress table and levelb 1:02 will generate the SQL for me to create 1:04 the table and the security policies I 1:07 can click to apply the changes we can 1:08 now try it out submit our form and look 1:11 at our beautiful data showing up in real 1:13 time you can use this to make full-on 1:14 sites authenticate stas dashboards 1:17 really anything you could think of it's 1:18 a fantastic tool for building net new 1:20 projects rapidly prototyping and a whole 1:23 lot more this integration is live and 1:24 you could try it out today and make it 1:26 so that your AI applications actually 1:28 look Pixel Perfect to your beautiful 1:30 designs speaking of there's been a lot 1:32 of conversation lately about using AI to 1:34 build UI as opposed to using a Precision 1:36 design tool like figma people are 1:38 debating should you use AI or design 1:40 tools and in my opinion you don't have 1:42 to pick you can have both because I'm 1:44 excited to show you a preview of what we 1:46 have coming soon where you could have 1:47 development design and AI working 1:50 seamlessly together let me show you what 1:52 I mean so we've made our beautiful app 1:53 but let's say we want to change the 1:55 design this monochrome color scheme is a 1:56 little boring so let's make some changes 1:58 let's have a blue c a a single full name 2:01 form field full name couple less options 2:04 some nice blue icons lovely now instead 2:07 of having to throw away all that work we 2:08 just did we're instead going to sync 2:10 these changes back to lovable I'll 2:11 launch the Builder plugin again and this 2:13 time when I hit export to code you'll 2:15 see it's going to do something different 2:17 when it's done analyzing it pops me back 2:19 to lovable now with my design changes 2:21 implemented this I think is the ideal 2:23 workflow developers work in code 2:25 designers work in figma and anyone can 2:27 work in between connecting both with AI 2:30 to bring their dreams and ideas to life 2:32 I think this is what the future of AI 2:33 driven development looks like and if 2:35 you're wondering hey I already have a 2:36 code base and I want to continuously be 2:38 able to change the design and update the 2:39 code accordingly let me show you how you 2:41 could do that too by revealing how this 2:43 works under the hood behind the scenes 2:45 this is using our new CLI which soon 2:47 you'll be able to use for any design to 2:49 connect to any codebase for example 2:50 here's my stunning nextjs blog and when 2:52 I paste this command I can type any 2:54 prompt like add this contact page and 2:56 the AI will automatically do the 2:58 integration of the design for you 2:59 figuring out what Tex stack you're using 3:01 what packages you use reusing your 3:04 components and matching your coding 3:05 style automatically it uses the same 3:07 Tech on to the hood that tools like 3:09 cursor use to be smart about how to 3:11 apply updates to your code in our case 3:13 we can see it understood we're using the 3:14 nextjs app router it added this new 3:16 contact page it's using Zod for 3:18 validation as well as react hook form 3:21 just like we do in other parts of the 3:22 repo and there's our beautiful new page 3:24 and now when the design changes we just 3:26 export again grab the CLI command run 3:28 the CLI like you saw for but this time 3:30 it's going to make the minimal changes 3:32 to bring the design updates into the 3:33 code without rewriting all the code and 3:36 there's our beautiful UI change with the 3:39 minimal diff of updates to bring in the 3:41 design change like removing the last 3:43 name input and swapping out the button 3:45 colors I'm really excited about this 3:47 upcoming workflow to change how you 3:49 bring ideas to life and ship better 3:51 products faster whether you're turning 3:52 designs to code iterating on designs and 3:55 updating code or turning designs into 3:57 working full stock apps with no coding 3:59 rep at all with lovable I can't wait to 4:01 see what yall create check out the full 4:03 release details over on the builder. 4:05 blog converting figma designs to lovable 4:07 apps is live today and being able to 4:10 change designs and update your 4:12 applications in lovable or your code 4:14 with a CLI we hope to start beta testing 4:17 here in the next few weeks you can sign 4:18 up for the wait list for these features 4:20 from the link on the screen but what 4:21 really matters is what do you think how 4:23 do you imagine the future and how you 4:25 want to work with design code and AI to 4:28 build applications for for yourself or 4:30 with teams let me know in the comments 4:32 we'll catch you next time