Figma To HTML Website Automatically

hey everyone this is nagish babathi with quest ai today i'm going to show you how to convert your figma design into a fully functioning live website using quest ai plug-in automatically without writing any code so here's an example of a figma design with a couple of frames or art boards for desktop and mobile and using quest ai you can convert that into a live website uh something like this automatically so this was done without writing any code you see some animations um that brings elements into place and animations as you scroll and so on before i get started just to give you a little bit of background about quest in case you're not familiar quest helps you convert your designs into live experiences this could be websites or business applications or anything that you want to build you can design with figma sketch or xt and they get converted automatically you can add interactions um animations you can add video connect to data etc and build a fully functioning responsive website okay um to get started with figma uh go to quest.rti forward slash sigma and download the plugin or you can also find it from the figma plug-in community just search for quest ai once you have your figma plug-in installed start with the design and here i have the design document with the two frames for desktop and mobile with quest you can have any number of frames for any number of screen sizes depending on your audience you can start with just one mobile or you can start with multiple there's no limit once you have your designs ready and you're fully happy with the design you open the quest plugin and you log into your account so you can start a new project or update an existing one with an updated design you can do a single web page building towards multi-page website or you can start components those are reusable modules that you can use across all of your accounts so in this case i want to start a new web page so i'll select that option then i select both the artboards so if you have more than two then you select all of them by simply doing a shift click i give this a name and hit export now the design is being exported to quest where it will automatically be converted into live production ready code great the design has been exported let's go view this in quest okay now we are in the quest editor um where what you're seeing actually in the center is uh live html um so your design instantly got converted into pixel perfect uh html page so you see exactly what the users will see you can look at various frames the desktop and mobile everything brought in exactly the way you had designed it on the left side you also see the various elements of your design brought in exactly the way you had set up as well as the properties on the right if you want to make any quick edits to the properties so in this case it this looks good to me so the first thing i'll do is just try to preview this so i hit the preview button great so there's a preview of the page this functioning html i can drag the screen around to see how it looks across various screen sizes there's a qr code that pops up as well so you can look at it in your own mobile device you can also toggle across various preset screen sizes to see how it looks across various screen sizes so this looks good to me so i'll go ahead and publish this to publish there's a default url that you get with a sub domain you can set up your own custom domain as well in this case i'll just use the default subdomain now let me go view the page there you go so you now have an html page that is pixel perfect your design and that works across multiple screen sizes okay so literally in just a couple of clicks you went from design to having a live page this is this has analytics built in it's on edge caching and cdn turned on um so you literally can have a million people go to this page and it'll work okay but so far this is just a static page right so there's no interaction built yet so let's go back and and build some interactions so in quest you can build any type of interactions that you do normally hand coded but just for the purpose of this demo i'll show you a couple of quick examples you can watch other videos in this channel to to get into more detail but let's try a few things first so the first thing is let's say if you want to make the nav bar fixed all i have to do is select the group that contains the nav bar and pin the position of it so it just gets pinned to the top so you have a fixed nav bar in the example the fully built page that i showed you there are some animations that happen when the page loads so text animating into place and the box animating i'll show you a quick example of how to build something like that so let's say we want this text to animate into place i can on the bottom here i have a timeline manager so i can add a new timeline i can name it whatever i want on load i select this to play page on load and i can add an action so to add an action simply go to the element that you want to animate and create tween in the current timeline so i want this to animate from the left so i go from absolute value i want this x to be 0 and i want the opacity to be 0 and animate it to 100 so i can do a preview right here it animates into place great that was easy um so i want to do the same for the second text box text element so i just go do the same create tween in the current timeline i want this to come from zero and with an opacity of zero right preview both animate into place so it's as simple as that right so you can keep going keep animating as many as you want you can change the timelines around if you move them around change the type of ease so you can do a whole bunch of things here that are covered in other videos other quick example is let's say you want to set this up as a url or a click action i just go to the right select my text element and say i want this to be a click or tap action and my action is i can set various types of actions when a user clicks on it but in this case i want to go to a url and i can i want to make this a relative url within the within this particular website so i select that option and type in the name of the page that i want to go to right so it's as simple as that so we pinned the position of the nav bar we added some timeline animations and we set up a url so now let's build the page and see how it works great let's go view the page okay let's reload this again so when the page loads you saw the text animate into place i can adjust the timing and tweak it so it looks exactly as i want when i scroll i have the nav bar pinned at the top and i have this as a url uh that navigates to a different page in this website so um as simple as that so in just a few actions we were able to set up a functioning page uh you can continue to do more um for example you can go and set up your your page settings your seo you can add some external data sets so you can create dynamic content there's even a code module so if you want to write any specific special code you can do that so you can watch other videos to go through some of these details to build a fully functioning page just one more thing i want to show you um is once i build this i can go and create some components here so i can use this across all of my pages i can set up a site in this particular case i'm just using the default domain i can go back update my sub domain as well or i can set up my own custom domain and as soon as i validate my custom domain i can start publishing my pages to this easily great so that was a quick overview about quest one other very cool thing about quest is let's say you after you built the page you you make any changes to the design um so you can easily update your page without having to redo everything so it's as simple as you go back to your design select your frames and then select the project that you want to update and hit export so all of your changes get carried over and it preserves all the functionality that you had set up in quest so you can continue to iterate between design and building the page uh you can create multiple variations and so on wonderful so uh there was a quick uh uh overview of uh converting your figma designs into a live page if you have any questions reach out to us at our slack channel or at community.quest.ei let us know what you think give us your feedback and and looking forward to seeing what you built thank you

Channel: Quest

Views: 89,435

Keywords: figma, html, figma to html, design, web design, Quest AI, design to html

Id: Yx6rlpT5YuA

Length: 11min 20sec (680 seconds)

Published: Fri Sep 18 2020