Go from Figma → No-Code App in WeWeb with AI

Now to get started, the first thing we need to do 0:00 is install the WeWeb plugin on Figma. 0:03 To do so, 0:06 we can right click onto the canvas and go to the plugins menu, 0:06 or we can click on the Figma icon in the top left and then go to plugins. 0:10 From here, we can go to manage plugins and then we can search for WeWeb. 0:15 And the plugin we will want is this one, WeWeb Figma to no code. 0:19 So we can click onto it, we can press run to install it, install it 0:23 and then it's installed onto our Figma workspace. 0:27 Now with the Figma plugin 0:30 comes three core options and we'll go through all three in detail. 0:31 The first is the export tab 0:35 and this allows you to bring your designs from Figma into WeWeb. 0:36 Now before we dive into an example of exporting a design from Figma 0:40 into WeWeb it's crucial that you have some kind of understanding of auto layout. 0:44 Now in Figma when you have a frame selected 0:48 you can apply auto layout by pressing this button. 0:51 Basically what Auto Layout does is it makes elements inside of a frame 0:53 aware of the position of other elements inside of that frame. 0:58 Now in the context of web development this is extremely useful 1:01 because we'll want elements 1:05 to be aware of each other's positioning 1:06 so we can have naturally responsive designs. 1:08 Here since I don't have Auto Layout applied yet I can position 1:10 this square wherever I inside of this main outer frame. 1:14 However if I click onto the outer frame so this frame 1:17 that these two squares are inside of. 1:21 If I was to apply auto layout to this outer frame 1:23 you can see that these two squares inside of it 1:26 now position themselves relative to one another 1:28 meaning if I was to try and drag this green square around you can see 1:30 the blue square is relative to it when I try and position it. 1:34 And the reason having this base understanding of auto layout is so crucial 1:37 is because the more so you correctly use auto layout in your designs 1:41 the more accurate they'll be when you try and import them into WeWeb. 1:44 So let's now go through an example. Here I want to import this design into WeWeb 1:48 and so what I can do is I can just click on the outer frame right click 1:52 go to plugins WeWeb to Figma press Export to WeWeb 1:57 And then once it's ready, you simply press Copy to Clipboard. 2:08 Now, back in WeWeb, I can open the Figma Import Wizard, 2:11 press Paste from Clipboard, and I'll then get taken through the import process. 2:14 So first, in the Design Tokens tab, you'll see all of the colors, spacings, 2:18 and any typographies that were detected inside of your Figma designs. 2:22 and from here you can configure exactly what you want to do with each token. 2:26 Then, once ready, you can press next. 2:30 Here will be all the images detected in your designs, 2:33 and like the design tokens, you can choose what to do with them. 2:36 And then you'll see any fonts that were detected in your designs. 2:41 As a note, right now this will only detect any Google fonts and import them. 2:43 Then, at the end, you'll have a summary, 2:49 and once happy, you can simply press finish. 2:50 The design will then be imported onto your WeWear page 2:56 along with your design system, meaning take this navigation pill as an example. 2:59 It's used all of the spacings that came from the design system 3:03 and imported them into the project's design system 3:07 and it's also imported any colors it detected and used them accordingly. 3:09 Now the second core feature of the plugin is the ability to import 3:13 specifically the design system. 3:17 So just now we imported this design into our WeWear project 3:18 and in doing so any design tokens that were detected were also imported. 3:22 However, maybe in one go we want to import every single design 3:26 token from this Figma project into our WeWeb project. 3:30 So what we can do is we can right click on the page, 3:33 go to plugins once again, and then the WeWeb to Figma plugin. 3:36 We can click onto the design tab 3:40 and from here we have two options, fast mode or deep scan mode. 3:42 The core difference between these two is that fast mode will only look 3:46 for design tokens inside of the specific Figma project, and deep scan 3:49 mode will look for not only the design tokens of this project, 3:53 but any dependencies it may have. 3:57 For this example I use the deep scan mode and I press extract all variables 3:59 Then once it ready 4:06 I have a summary of everything that was detected 4:07 and I can press copy JSON data and like the design import 4:09 I can take this into the WeWeb Figma import wizard. 4:13 And then like the design import 4:19 I'm taken through the process of importing all of the design tokens. 4:20 I won't go through this process again since it's the exact same 4:24 as before however this time just for design tokens. 4:27 Now the last core and crucial feature of the new Figma plugin is components. 4:30 Now one of the core things you'll likely want to do when importing from Figma 4:35 is to map components from Figma into your WeWeb components. 4:38 For example in these Figma designs 4:42 there is this button component with its own set of properties 4:44 and in my WeWeb project I have this recreated button component. 4:48 So for example when I click onto the component, 4:52 you can see we have a variant property, a label property, sizing property, etc. 4:54 So since the properties of this component in Figma 4:58 map exactly to my component in WeWeb's properties, 5:01 I can map this component in Figma to my WeWeb component. 5:05 And so whenever we import any designs that use this component, 5:09 my WeWeb component will be used with the respective properties 5:12 instead of just a standard element with divs. 5:15 So to set this up with the component in Figma selected, 5:18 I can right click, open the WeWeb plugin, 5:21 go to the components tab, 5:26 and before we can do anything, I need to add an API key. 5:27 Now to get the API key, you just need to go into the dashboard of your workspace, 5:30 go to settings, and generate a private key if you haven't already. 5:34 In my case, I have, so I can just copy it. 5:38 On Figma, add the API key, 5:41 test the connection to make sure it works, which it does and then save it 5:44 and now i can see all of the components of my workspace 5:49 both coded components and no code components 5:52 so in my case the component i want to map is a no code component 5:55 and it called button and i can see it this component here 5:58 so i can click onto this and here we can now map the properties 6:01 so as you can see on the left hand side we have the of the WeWeb component 6:05 and on the right side we have the properties to map from Figma 6:09 And just to show you how this works again you can see for the WeWeb properties, we 6:12 have variant, 6:15 label, size, has icon, start, and icon. 6:16 And inside of WeWeb, you can see for this component, 6:19 we have exactly those properties. 6:21 So variant, label, size, has icon, start, and the icon. 6:23 So the properties we see in Figma 6:26 are exactly that of the WeWeb component that I've selected. 6:28 So now I can map these properties. 6:31 So I want to map this to the variant property of the Figma component. 6:32 Label, likewise, the label property. 6:37 Size, again, the size property. 6:41 Has icon start, the has icon start property. 6:44 And then finally, the icon property will be this one, icon start. 6:47 Now, it's important to note that for this to work correctly, the property values 6:50 in Figma must align one to one with that in WeWeb. 6:54 So here, for example, you can see in Figma, the variant value right 6:58 now is neutral and it has a capital at the start. 7:01 And so in WeWeb, for the possible values of this variant property, 7:04 I have one of them as neutral and it's a case match. 7:08 So it's neutral with a capital N. 7:11 So now in Figma, with all of those properties mapped, 7:13 I can press create mapping. 7:16 And so now whenever we import any Figma designs that use this button component, 7:18 instead of it just using a standard div, it will actually use 7:22 our WeWeb button component and map the properties respectively. 7:26 So if I now again export this design we originally did, 7:30 if I go to where the 7:40 buttons were, you can see it's actually used a button component. 7:41 And not only has it used the button component, it's mapped exactly 7:44 the properties that were used in Figma to the properties of this WeWeb component. 7:48 So, that's all the core features of our brand 7:52 new Figma plugin for importing to WeWeb. 7:55 If you're unsure how to get the most out of the new plugin, 7:58 please feel free to get in touch 8:00 with us on any of our socials, or create a topic on the community forum. 8:02 As with everything WeWeb, we can't wait to see what you build. 8:05

You need to sign up for Treehouse in order to set up Workspace

Sign up