Figma to Elementor Converter (Step-By-Step Tutorial)

Key Takeaways

After this tutorial, you can export your Figma designs straight into Elementor. In three steps, I'm going to walk you through the entire process with this beautiful design of this handyman website. Step one, we're going to prepare your Figma design file. Step two, we're going to install the export plug-in. And step three, we're going to finalize the export. The first thing we have to realize is the way Elementor works. On every page, we have different containers who also can contain containers. In these containers are widgets. Now, if your Figma design does not have the right layering inside of your design, things are going to get a little bit messy. Now, this is a perfect example on how you should do this. And yes, this design is actually called like and subscribe, please. Now you can see over here that I have different kind of layers for all the different kind of pages and inside the page we can see also different kind of sections. Yeah, let me show you this up more close. You can see we have the header, the homepage banner is another section. What we do over here, the pricing, the FAQ, the blog, the call to action and finally the footer. Every section has its own layer and inside those layers are again different kind of layers just with a lamementor containers. If your Figma design does not look like this, you need to fix it with different kind of layers or else it will get messy and you will blame uh the tool we're going to use. But it's not that it's just your design which just should be better, you know, get better. With this tool we are using, you get five exports completely free. But if you ever decide to buy a plan, I get a small commission. So please support me and go to wp.disount/uici. This link is also in the description of this video and of course in the comment section. And if you use this, I will be forever grateful. And we can see the different kind of pricing plans. The main difference is how many exports can you do per month? 50 100 of 500 and how many users can you use with these systems? Excellent. We just scroll down and we go with the free version. And of course, you can also export it to bricks or if you want to make your life just unnecessary, complicated, just export it to Gutenberg. Yeah, I've never been a fan of Gutenberg. Sorry. Makes you wonder why. So select over here Elementor and we click on start free. No credit card required. Then fill in your email address, your first and last name and press over here on free download. We click over here on download. Then we scroll down and copy your license key. Very important. We're going to need that on the next steps. Then go back to Vigma. And over here, click on this little icons over there. Go to plugins and widgets. And we're going to search for UI Cami. the over there. Here you can find in the Gutenberg the bricks one and also the elementor. So we click on elementor and click over here on run. Now we paste in the license key that we've just got from UI cami and we press on activate. Now we can choose to use the step-by-step method or the express conversion which is of course if you've done it before. We're going to use the step-by-step method. So click on start. Click over here on select pages. And then we're going to select the pages or the frames that you want to export. I want them all. So I'm just going to select them all. There we are. And press over here on next. So we're just going to press on next. Now we can optimize multi-layer media. We can make a smoother design export process by locking multilayer groups, frames, and masked elements in Figma. With this plug-in, any like layers, groups, or frames, if you're masked, made of images, or small vector elements, will be automatically converted into an image upon export. This feature is perfect for groups of images, vector-based components, complex frames, ensuring a clean, efficient export without unnecessary layers. When we don't use this locking, designs can take too long to upload, and sometimes they fail to upload all together. Now how to use this the right way? You can see over here different kind of layers. Now if we click on this icon you go immediately to this layer and as you can see we have created this button with different kind of groups an arrow and eclipse and it's created this button. Now we want to lock this specific element. If we don't do that we get an arrow and an eclipse which just will be combined into one container in elementor. That's not what we want. So we click over here on lock. Then we go to the social icons. How are these social icons created? That's very important. So you open them up and you can see different kind of layers. We have colors and we have this Tik Tok icon in WhatsApp. We have this layer and we have also a vector and another vector. If we're not locking this, it will be a mess. So all these socials also looking good. Let's lock them in. Email, the same thing. Well, you kind of get the point. Let's lock these all in. Then we go to the next page, services. If you're positive that they're combining the right elements, you just click over here on lock all of them. And you can go to the next page and do it simply with every single page you have. Once you made sure that all your shapes, elements, vectors, masks, all these things are locked in. We click over here on next. Then we are at the widget teching mode because we have to tell UI Cami what kind of widget we are using. Now the outer widget selection uses containers, heading, text and images to convert the entire design. Great. But we can also use manual widget tagging. Now in most cases if you have created a beautiful design just like this, you will need manual widget tagging. So you can select this one. Press on next. Then the next step is to choose convert to auto layout. Press on convert. And it's converting our homepage to auto layout. And this takes some time. So just let UI Cami D do its thing. Your two frames have been duplicated and converted to auto layout. That's exactly what we want. But if we then look on the left side, we can see different icons. Over here we have the home. This is our actual Figma design. And we have a new one home with all different kind of frames and banners and all these things. It's already out layered right now. So I go to next. If I want to change this FAQ section to a specific widget like for example the accordion, I just select over here which do I want to use elementor and element pro and I go to accordion. There we go. Select the one you want to make an accordion to and press on accordion. I can just select question two is the title frame. The icon in this case just a plus. This is a frequently asked question and you can press on this add new button. And if you check the icon and you see the eclipse 3 and a plus one, those are two different things. I need to lock them first and then there are just one icon and I can use them inside of my design. But you can do this with all kind of things. Then we press on save and we press on back. And here you can see more frames and tag them accordingly as your design in Figma wants to have it. If you tag your entire design correctly, it will save you hours and hours of designing your Element Pro final website. But if you have a very simple design, we can also choose the auto widget selection and press on next. Then we are at the responsive UI Cami manager. Do you want UI Cami to do it for you, make everything responsive, or do you want to set it up manually? Let me show you how that works. Here you can see the font, the font sizes. You can do it to clamp. You can change it to tablet mobile and just change all the fonts you have used in your Figma design. Now, I'm really happy with this responsive design export feature because as you see in my Figma design, I haven't created any mobile designs whatsoever. I don't know why lazy I think. I'm going to choose the smart autoresponsive and click on next. Then we need to connect Figma to our WordPress website. So we can sync our global styles. I love that. Click over here on select website and choose add another site. Then we need the URL and security token which we will get from our WordPress plugin we've just downloaded from UI Cami. Log in to your WordPress website. And if you are still using WP admin to log in, no, that's not a very safe way. So, please watch my tutorial over there and I'll show you exactly how to secure your WordPress website from hackers. Then I have a completely empty WordPress website. Nothing installed so far, but only the hello theme from Elementor and also the plugins Elementor and Elementor Pro. Click over here on add plugin and we're going to upload the plugin we've just downloaded from UI Cami. Press on install now and then we press on activate plugin. Then we go over here to UI cami. We click on it. We press on skip. Then copy the site URL and the security token both in Figma. Then we press over here on connect. Here we can set up our global container width. Select the site if you want to have 1140 or maybe you want to have 1200 pixels. I like that a little bit better. Then you can also change your break points. But then we are at the global colors and also the global typography. Now this is very nice. I'm happy they've built that in. These are the global colors that UI Cami chosen for us to use inside of Elementor. But as you can see in our design, we have a lot more colors, especially the orange color which has been used quite a lot in my design. So we press over here on add new and then we can see all our colors and I have 16 colors in total being used in this design. You can add them one by one as a global color. Just click on them. Or if you want to add them all, you can press this button, pick all colors as global colors. You can do that. If you think it's a little bit too much, you can just delete them from here with the same ease. There we go. Or you can say, well, I'm going to do that later on inside of my Elementor website, and then I'm going to manage the global colors. It's completely up to you. Also, the same applies to the global typography. You can change over here your primary, secondary, text, and accent typography. Just click on it. Now, don't get it wrong. It's 48 variations. So, if you just use a little bit smaller or a little bit bigger, it's all counted as a new typography. Now, you definitely don't need to add in 48 different kind of global typography. So, this could be a little bit too much for you. So, what I'm going to do, I'm just going to close it. I'm just going to use these four as primary, secondary text, and accent. And we can always create new ones or better ones if we want to inside of Elementor. All right. Then we click over here on this sync button. There we go. Really fast. The sync process has done successfully. Then we click over here on next. Now the final step is to choose our conversion settings. Do you want to export it without images? Maybe you're using placeholder images inside of your design. Then you can enable this one. And here we can also choose if you want to use the Figma exported images. And what kind of scale do you want to give it? Well, just keep it on one. That's great. We want to change the width to percentage. If you've created everything pixel perfect, then you just want to disable this and use pixels or RAM or whatever you've created it in. And this setting makes sure that if you have more than 10 words inside of an element, it will be converted to a text editor. You can, of course, change this to whatever you want, but I'm going to keep it on 10. And then the auto detect SVGs is not yet there but it's coming soon. And then we click over here on convert. And then we can choose if you want to have a direct import or copy to clipboard which is not possible right now because I have multiple pages. I want a direct import. And I press on import. There we go. Let UI Cammy does its thing. Once the conversion has been completed, we can now choose our expert method. Be aware of the credits being used. In a free plan, we only have five credits and this entire design has already cost me 2.99 credits. Just keep that in mind. We can download JSON files per page. So, we can download them all. Let's do that just for now just to be sure. I'm going to save it on my PC so I just have it. But I actually want to do the direct import. And then we can change over here the import settings. These are all dropdowns from all the pages that we want to export. And if you click over here, you can change if you want to export it to a page or maybe to an element template or maybe to an existing page, if you're uploading it to an existing WordPress website. Just choose the one you want. For every single page, I want to create a new page. Then we click on next. And then we click over here on import all. There we go. Pretty easy walk in the park. Just like that, it has been uploaded to my WordPress website. Now, you can click over here to open all the different pages inside of your browser. But let's get back to our WordPress website. On our pages, we see every single page added here as a draft. Excellent. Now, let's see if this design is 100% copied from the original Figma design. To make it easier for you, I have put those designs side by side. Over here, you can see the Figma original design and over here the exported Elementor Pro design. Let me show you a couple of pages right now. Oh, just a very big disclaimer here. I did not took the time to tag everything properly the way it should. Also, I did not lock all the shapes correctly on forehand. So, this is the result. With this in mind, it's actually not a bad job at all. With some fine tuning from my end, tacking them correctly, changing the widgets in Vikma and then export it, I can make it 100% accurate. This is now, I would say, 90% accurate. I still have to edit it and change it around, but this will save me all with all hours of work on this specific project. Thanks for watching, and if you have any questions, just let me know in the comments, and I'll always reply. If you like this video, hit that like button and subscribe to my channel if you want to see more videos about Element Pro or Vikma or everything WordPress related. And I'd love to see you in the next video.