Brand NEW Lovable x Figma Integration (Build Amazing UI)

0:00 lovable a platform that allows you to 0:01 build software with AI in minutes this 0:04 brand new feature helps you build 0:07 amazing looking apps that actually look 0:09 and feel professional using figma if you 0:11 saw my last video I discussed a hack 0:14 that helps you copy user interface 0:16 components into your projects well this 0:18 new feature helps you build entire apps 0:20 using figma and import them directly 0:22 into your lovable projects in this video 0:24 I'm going to show you how to do that 0:26 this should make your app building 0:28 process much simpler Imagine This you 0:30 have an amazing looking design youve 0:32 created in figma and you can directly 0:34 import it into lovable now you can edit 0:36 your app using AI with lovable already 0:39 having a full template that was made for 0:41 you okay let's get into it all right so 0:43 first things first I'm inside of figma 0:45 here if you do not know what figma is 0:46 figma is a platform that allows you to 0:48 build amazing looking like user 0:50 interfaces or websites and allows you to 0:53 customize however you would like you 0:54 could use a lot of you could find 0:55 different templates on here and 0:57 essentially just like paste those into 0:59 your applications to use that as kind of 1:00 the infrastructure for your either web 1:02 application or your website so I found 1:04 this one I like so this is for a 1:06 furniture company and as you can see we 1:08 have these different pages so this is an 1:10 entire website right with checkout we 1:11 have a contact form a Blog Page all this 1:14 stuff what I'm going to do is I'm going 1:15 to copy over this homepage and convert 1:17 this into code and then import it into a 1:19 lovable project and I'm going to do that 1:21 now so first of all what you need to do 1:23 is you need to come over to builder. 1:25 that the link for this will be in the 1:27 description essentially sign up with 1:28 this and you need to download download a 1:30 plugin so go to the app and then what 1:32 you're going to do is you're going to 1:33 come over and click get the figma plugin 1:36 basically once you have this connected 1:37 to your figma all you need to do is come 1:40 back over to your figma click on the 1:42 exact like components or page that you 1:44 want to copy over into lovable for this 1:46 I want it to just to be the homepage so 1:48 essentially it's really important that 1:50 you come over and click Auto layout so 1:51 that way it will be laid out correctly 1:54 and then next thing that we want to do 1:55 is come down here and click on this 1:57 plugin builder. so click on on our 2:00 plug-in here that we just downloaded and 2:01 then what we are going to do is we're 2:03 going to leave this on easy mode for 2:05 export make sure that you have the 2:07 correct page that you want to copy over 2:09 to lovable and we're going to export 2:11 this to code so essentially this is 2:12 converting this design on figma into 2:14 code and then after this I'll show you 2:16 how you could easily import this into 2:18 your lovable application natively 2:20 through figma here all right and so what 2:22 what you'll see now is you will see the 2:24 layouts you'll get two options here and 2:26 we need to make select the layout option 2:29 that looks 2:30 better and we think would be better to 2:31 import The Lovable so let me look 2:33 through these real 2:36 quick so as I'm taking look through 2:38 these this one looks good however it 2:40 looks like up here there's some error 2:41 where it's like it's like the logo is 2:44 not showing properly and so on this one 2:47 this one looks 2:49 good looks great okay so I'm going to go 2:51 ahead and move forward with this one so 2:53 click on this one and then next up what 2:55 we need to do is Click open in lovable 2:57 it'll begin now exporting this over to 2:59 our lovable project and then we could 3:01 then begin editing this just like we 3:03 would with any lovable project let me 3:04 give it a second while it loads here 3:06 while this is loading actually sorry I 3:08 want to make one uh I want to mention 3:11 one thing so you may have seen my 3:12 previous video that I go over 24. Dev in 3:16 order to copy and paste different user 3:18 interface components into your lovable 3:20 applications I love that web app it's 3:22 just such a cool use case that video has 3:24 gotten a lot of a lot of people have 3:26 been loving that and getting a ton of 3:28 value from it so you may be thinking 3:30 well does this replace that kind of Hack 3:32 That I Found and the answer is no 3:33 because figma is really good at building 3:35 full kind of frames for your websites or 3:38 for your apps but if you still want to 3:40 get inspiration via user interface 3:41 components you could easily import these 3:43 into your apps that you built on figma 3:46 and then load it into lovable so these 3:48 tools all work really good together and 3:51 that's why I'm so excited for this new 3:52 figma integration along with these other 3:54 kind of Integrations that are coming out 3:55 for lovable so next up let me click 3:58 inside of lovable let's launch this 4:00 project and just like any lovable 4:01 project you can see it's going to begin 4:03 writing the code because builder. I 4:05 converted this into code that could 4:07 easily be imported into lovable so let's 4:10 give it a second and then take a look at 4:11 the output here okay here we go looks 4:13 like we have our site up and running 4:15 this looks great this looks just like 4:17 how it looked inside of figma you can 4:19 see we have all of these products here 4:21 we have these different categories that 4:23 we can search through obviously this app 4:25 or this website these buttons and stuff 4:27 are not functional so we need to 4:29 actually go go ahead and go inside 4:30 lovable and make this functional but so 4:33 far this looks great all right guys 4:35 there we have it that is the new figma 4:37 integration inside of lovable and one 4:39 thing I want to mention is this at the 4:41 time of this recording this feature 4:42 actually hasn't gone live I actually got 4:44 Early Access via The Lovable team to 4:46 test this out and actually showcase this 4:48 to you guys since you guys have been 4:49 really loving my videos on this platform 4:51 so one thing I want to mention is there 4:53 are some errors with this it's not 4:54 perfect every time based on my 4:56 understanding they're working to 4:57 actually make this integration work a 4:59 lot more smooth so that way every time 5:01 you you know have some figma template or 5:04 something that you want to import into 5:05 your app it's just basically Flawless 5:06 every time however we're not at that 5:08 case yet so you might run into few 5:10 issues when you're testing this out but 5:11 yeah guys thank you guys for tuning in 5:13 make sure to leave a like comment 5:14 subscribe hope you guys enjoy this hack 5:16 hope it brings to you some value and I 5:18 hope this kind of changes the way you 5:19 can build web apps using AI so that 5:21 being said thank you so much and I'll 5:23 see you guys in the next video