From Figma to a 3D Web Page with Dora Plugin - No code Tutorial

hey what's up everyone so in this video today I'm going to show you how to turn a figma design into a really cool 3D web page like this using the new Dora plugin so let's get into it alright so here we are in my figma design so as you can see I have a very simple landing page here and before we move everything to the Dora platforms we need to clean up the design to make sure that these layers are essential and there's no hidden layers or things that you don't need so things like these lies so I would prefer to create this line in Dora platform so I'm going to remove this and once you're done we can go to the plugin tab so you can see that I already have the plugin here but if this is your first time you can click on the find more plugin and search for figma to Doras and you can see that it's showing up here so with the artboard selected I'm going to click run and then it started to copy all of the layer in this artboard and all you have to do next is go to the dollar platform and paste everything to it so here I am in the Dora platform so I'm going to create a new project and let's name it Watts for those of you who are not familiar with Dara is a platform that can give you the power to be a website with no coding alright so here we are in a new Dora project so first thing let me double check the canvas so that stops good and the next thing I want to make sure that we have the same artboard height so let's copy this and go back to Dora and then move it a little bit and here you can place or put in the exact height at the figma artboard so now we have a long canvas like this so previously we have copied all the layer from figma and now all you have to do is just to paste everything to this canvas so let's hit command or control V and now you can see that the uploading progress is going on down here so just give it a couple of seconds and then bam all of your design from figma has been transferred to the dollar platform and I can tell that it remained the exact position of the figma layout and also remain all of these layers separated and editable like these texts alright so next step I'm going to go through each of these layers to make sure that they are set up properly for responsiveness okay so let's select these headers and let's ungroup it and I'm going to select all of these elements and move it back to the original position and for this element on the right I needed to be constrained to the right viewport so let's select this hamburger menu and then connect it to the right edge of the viewport and connect the top dot to the top of the viewport and same for the profile icon so let's connect to the viewport top and connect this part to the hamburger menu and do the same for the elements on the left but we're going to connect it to the viewport left and same here connected to the vehicle top and for the big text here the by default is already constrained to the viewport top and the two sides but I don't want this to play at the Viper top so I'm going to click here and then just release it to remove the constraint so the next thing I want to do is to create the free vertical light that run across the whole page so let's click here to create a container at any size so you can go here to set the width as one pixel and for the Heights I'm going to switch it to viewport height and set this as 100 so that means it's going to be 100 of the viewport height and now let's select light and then align it to the top like this and then let's connect it to the viewport top and next I'm going to duplicate it into two more lines and I'm going to select the Middle Light and then constrain it to the two sides of the viewport so now this line will always be at the center of the page and then let's select this line and connect this to this and this to the viewport right and now it's being distributed here and do the same for the other light so here is connected to the Middle Light and this one connected to the viewport left so now all of the three light is being distributed evenly so let's publish this to see how it works so here is the preview so you can scale the browser to see if it's working or not so as you can see that is working perfectly so you may notice there's a gap here in the background so no problem just go back and then click on the canvas and go to the Wiz settings and switch it to field space so let's go back to the preview and then refresh and boom the Gap will disappear and now it's working really nice all right so in the next thing I want to do is to tie this text to the like next to it so let's just move it to the right position and then let's select the first text and then just link it to this light right here and also for this one I'm going to link it to the upper text so now uh let's refresh and now it's being a lie and when you scale the browsers it will always align to the line so it's looking pretty cool and then I'm going to move all of this light down to the bottom of the list to make sure that it's not overlapping any of the front element and now let's apply the same process for the rest of the page to make sure everything is aligned properly [Music] alright so after all of that we have a really tight layout and fully responsive and next step I wanted to add a layer underneath the navigation bar because sometimes it's overlapping so let's go back here and create a container and let's set the width to 100 viewport width and move it to the right position and change the color to match the background colors [Music] and make it much shorter and let's move it down to the list to make sure that it is underneath the other element and then let's click on this icon here to open the timeline panel so if you move this pointer around you can see that the viewport is moving up and down to indicate the scrolling animation so I need the panel to always stay at the top of the viewport so let's connect it to the viewport top so now you can see that it's staying sticky to the people top and another thing I want to do is to create some fading in animation for these big numbers uh so really simple all you have to do is just to drag the timeline pointer to the position where the numbers shows up in the viewport and then create a keyframe here and then move it back a little bit and set the opacity to zero and then it will automatically create keyframe and also create this animation so let's refresh to see how it's work here so you can see that there's a fading effect here to make it feels more natural and then you can apply it to the rest of the page alright so let's move into the next step so I'm going to import a 3D model to the page so here I am at getfab.com this is a Marketplace for you to find a lot of preview models that is compatible with Dora so I purchased this really cool animated webs models so let's click here to download it so we have a lot of options here so glb format which works best with Dora so let's download the 1K versions because it's much lighter so now let's get back to Dora and then I'm going to click here to create a 3D witches and then set up the constraint to make sure that it's filled up the whole screen all right so now let's click on this button here to import the glb that we just downloaded and give it a few seconds and then boom we have these 3D models right here so you can use the mouse scroller to zoom in or else and using the right Mouse to paint the camera and you can select the 3D models and turn on this toggle to enable the animation so this is what it looked like in the previews and now I wanted to add some keyframe to the 3D watch so it can you know flying around instead of just staying in the same position so let's select the camera and go to the timeline panel down here and create a keyframe at the frame zero and then move it to the point where you want it to adjust the camera angle so maybe this point and let's select the camera and click the left Mouse to drag the camera to this position so you can see that it automatically create keyframes so now when you move the timeline you can see that the web is moving from the right to the left as we scroll and now you can even click here to add some easing to it all right so now all we need to do is to apply the same thing for the rest of the scrolling foreign [Music] so from the process of doing that I just realized that I have accidentally removed this blurry background so no problem let's just go back to figma and using the plugin to copy this image to the Dora platform now let's put it in the frame and then run the plugin and just go back to Dora and hit command 3 or Ctrl V for PC and as you can see that the image is being pasted up here so let's just move it back to the section down here all right so now we have something like this so it still feel a little bit um like static so I wanted to rotate the weaps a little bit as we scroll uh so let's select the 3D scene on the left panel and then create a keyframe at the frame zero and then move the pointer to the exact keyframe of the camera at this point and then let's change the rotation value to 60 degree and then add the same easing to this animation and apply the same process for the rest of the animation alright so this is how to find the result look like so I know this is a very simple web page but because we don't have a lot of time but I think this is enough to demonstrate how handy this trigma chadara plugin can be so I think it's really gonna help boost the whole process of bringing design into dollars and make everything faster and more flexible so for those of you who want to learn more about Dora you can just go to the description and then follow the official dollar YouTube channels where you can find a lot of in-depth tutorials to create awesome websites with no coding so this is the nmi tutorial today so I hope you find this helpful and I'll see you in the next one alright

Channel: Minh Pham

Views: 340,059

Keywords:

Id: slentvTk3gY

Length: 12min 15sec (735 seconds)

Published: Tue Jun 06 2023