How to Publish Figma Design to Website - Publish Your Figma Designs Now

hey guys it's DS here welcome to my YouTube channel I'm excited to have you join me in this tutorial where I want to talk a little about figma and how I can make figma work for you better what if with a click of a button you can literally migrate your figma designs to a live website so I want to show you exactly how to do that desig your figma website and then with the click of a button you can make it a live website not just any type of web it by a WordPress website and also this website will be a det table with Elementor let's uh design something new I can just title this project D tutorial I think that's fine so I will be showing you a plugin that will literally help you convert your figma designs to a live website this plugin also have template that you can easily use to build your figma website isn't this amazing so let's come to plugins there's this plugin called UI KY it's a fantastic plugin this plugin can literally help you clone any website toor to bricks and also Gutenberg which is still coming let's come to template here they have quite a number of templates that we can use so you can see here a blank template a container two columns you can easily use this to start building your website and that's not even all you can see here that they have quite a number of predesign templates that you can use to build your server website so if you are a uiux designer this tool will coming literally very handy for you to design website right now let's just uh work with anything random here so just clicking this right now I have this design already in my figma project uh so let's Zoom this feet and let's see what we have so you can see this so I think I can just move this here for us to be able to see exactly what we have and I think this is super beautiful so in your case here you can just go all out design an entire website you can add more template here to the page and you can redesign you can change text change images design to suit your style I am not going to waste time trying to design an entire website I just want to show you what's possible so now let's bring in UI K back here and now let's come back to convert so right now what we want to do is to convert this into Elemental and that's what this plugin will do for us so you can see by default here these PL has selected uh this Frame which is the page frame and that's good and we have a preview of our website here so you can do a preview to see that everything is fine the Elementor is selected here so we will just we can drag this a little up so that we can see button here what we have to do to convert this to Elementor is just to hit this button here and then we're going to accept the terms and then we're going to convert this to Elemental and immediately we have a Json file here that we can download into a computer as you can see here this has been downloaded and then we can upload this into our WordPress website and I think this is beautiful so right now I have a WordPress website here so let me come to Pages let's come to add new let's just create a random page and let's see how we can bring this into a page I'll give this a random name called DBS I just want to make this template uh Elemental caners and then I would publish this page and then I would edit this page with Elementor now inside Elementor what we want to do is to use a template button here and then we can hit this upload button here as well and then we can bring in our Json file here and that's everything we need to do and you can see we now have this Json file here as page so we can insert this into the page you want to use just as you can see here we have a figma design already published into Elemental website and I think this is fantastic however if you scroll down here we can see that we have some alignment issues like this should be on the straight line if you come back to our figma design here let's close this so you can see this is on the straight line here and then this and then the title but we have something entirely uh a little bit different here we now have two here and one here but these are just alignment issues so you can also see uh this button here you can see that this arrow is not centralized so if you come down here it should be in the center just like this so I'm even excited that I have an example like this where I have some alignment issues because once in while you get to have issues like this so all you have to do is to do some reworking inside of Elemental right now if I play around with the width of the containers here and there I should be able to align all of this to be on a straight line and I think that's super simple and easy to do inside of Elemental so that's it with this I believe this would come in very handy for you you can go experiment with this with your design using this tool and you can let me know your experience I would love to hear back from you if you can make any sense of this tool yeah I need to also mention that UI Ki is a premium plugin so if you try to launch that plugin like I did you just go to the plugins and then you you uh come to your plugins here you come to manage plugins and you search for UI ke before you were able to use it it will ask you for a serial key and it will give you a link to go to their website uh their website is just uy.com that's this their website here so you can see here you can convert figma designs to 100% editable WordPress website right now you can see supported plugins here I can attest for Elemental and for bricks Builder working perfectly so you can come to the pricing so if you come down here you would see that they have a free plan that you can use it works with Elementor and then you can do 10 export per month one user and then you can choose to go their paid plan and pay $19 for you to have access to using this and then you can keep paying per month and you can have an all access uh per month and then you can use this for either Elemental bricks or Gutenberg that is still coming soon for the free plan you can see here that no credit card is required for you to experiment using this tool go give this a try if you also want to invest in their PID plans I have their Link in the video description and also a coupon code for you to get something better out of this so you check that out that's my time for this tutorial uh if you find value for your time give me a thumbs up if you have any issues to let me know in the comment section I'll look out for them I'll see you in another tutorial subscribe so that you don't miss out on that that and until then stay safe

Channel: Daps

Views: 855

Keywords: how to publish figma design to website, how to publish figma website design, how to create ui design for website in figma and publish, figma to website, how to publish figma website, how to publish a website from figma, how to publish a website on figma, how to publish a figma website, how to publish website in figma, convert figma into website, how to publish website from figma, how to publish my figma website, how to publish website on figma, how to publish your figma website

Id: hbaRhghoN3E

Length: 7min 2sec (422 seconds)

Published: Wed Apr 24 2024