From Figma to Real Website With Framer | No Code

in this video I will show you how to go from a static design in figma to a production ready landing page in framework without further Ado let's dive right into it as always if you want to follow along this video I put the figma link in the description below to go from static designs in figma to a real website there are three main steps first is to prepare the designs second is to copy your layers using the plugin into framer and then finally if you add the interactions and animations you want before you publish it to prepare the designs I will summarize it in three points one and I believe the most important one is to use Auto layout as much as possible I found that the translation from Auto layout to stacks and framer is almost perfect most of the time try to avoid frames and especially groups because you will have some issues when exporting them into framer second if you have a frame make sure that the constraints are all well set like for example here this image is a frame and then these egg on the corner is linked to the top and right constraint and finally name your instructions correctly because those names are going to be the same in framer as you can see this landing page is already prepared I have the whole landing page to be an auto layout and then each section is an auto layout and it has the correct names something else I want to mention is that if you have a project that where you know that you're going to use framer to publish it I will recommend to only design the desktop version in figma because the way breakpoints behave in framer is a little bit different mobile and tablet breakpoints are all linked to the desktop breakpoint so I'll recommend to only export desktop and start working from there in framer now to export your designs into framer of course we're going to use the plugin but I have three recommendations and the first one is actually coming from framer itself you can read more about it here and that will open this page basically the smaller the better so try not to export all your designs at once because you will find many issues with your layers in this example we're not going to export the whole landing page at once we're gonna do it section by section first navigation bar then the hero section and so on the second recommendation is to create a stack and framer basically make sure that your powering component and framer is a stack and as a reminder Stacks Auto layout are the same thing and finally right after you paste a layer check fix and repeat with the next action so to export the navigation bar all we need to do is to select the section run the plugin and then copy to clipboard now we go to framer we create a new project before pasting the layers I will change the breakpoint size I'm using 15 12 in figma so I'll update it here and now I select the breakpoint and press command B now we're gonna check the layers really quick so I had the main navigation bars tag I have my logo that was imported as a vector and then I have another outer layer that has navigation items and my button good and also if I go to preview I can see that it's also responsive now we're gonna do the same thing for the hero section so we select this section and then a shortcut to run the last plugin is option command B copy to clipboard and then back to framer select the breakpoint and paste it pressing command B now we can make this a stack we select the breakpoint here we're gonna add layout and make a stack change the Gap to zero and here we can make the height feed content and now as soon as we add new sections the height will change and same as with the navigation bar you should quickly check all your layers after pasting the section and now I will export all the other sections really quick thank you I noticed the responsiveness of the frequently Asked question can be improved ideally for smaller screens this will change to only one column instead of two and I think it's also a good chance for me to show you how Min and Max and grabbing work here in framer so we only want to work with one row and then we're gonna duplicate it so I will delete this and this then now I need to make sure that the buying components are all set to fill so here I change this to fill then I need to add a minimum width to these questions and I will make it 500 I'll do the same thing for this one once we have the minimum defined I can select the prime component and make it grab now it will set it correctly I can go to preview may do smaller and there you go by the way to get quick access to preview I press command B now we're going to start the fun part that is adding the interactions and animations in framer first these two links on the navigation bar should take us to those sections so the first step for that is actually adding a scrolling section for that we select the section then we scroll to scroll section and we add a name this will be hero I'll call this details go back to scroll section this is the partner section and then this is the FAQ and finally this is the the footer once we have the sections defined we can select these items at this link here we select the same page and here we have the sections that we just defined so FAQ to take us to FAQ and we can Define it to make it smooth then for the partner section the same thing and now if I preview this I click and the page scroll to the right section I also want to show you how to make this sticky scrolling so in this example I want to make the screen section sticky I select the section and change the position to Sticky and now if I directly go to preview I scroll and nothing happens and that's a very common question in framer and the reason is because all the pine components should be set to visible and right now if I select the the parent component the Overflow is hidden so if I change this to visible and then I preview I scroll and I have this sticky effect if you're liking this video so far I only have one request for you and that's to click the like button below it will take you probably less than a second but it really helps the channel thank you I also want to show you how to work with components and how to create a hover effect I will create a component of this button I will press option command K and leave the name as button it will take me to a separate Manner and here I can go back to home I can also find this component here in the asset tab click again here here we can add a hover effect I'll click and press hover and now I can customize how I want this button to look let's say I just want to make it a little bit darker and if I click on the powering component I can also play around with the transition here I have a spring I can change it to ease or I can also change the settings of the spring and now if I go back to home and preview they have the hover effect I left the best for the end and that scroll transform definitely one of my favorite features in framer so for that I will select this grid section we're going to scroll to effect click here and select scroll transform here you have the trigger and we're going to select layering view basically that means that as soon as this layer is visible the animation will start I want to scale from 0.6 then I want a 3D rotation and this will be 10 and then I will move it outward a little bit again press shift to make it faster and then I will change the opacity to zero you can also add a transition on top of that so here we're going to add a spring and now I preview and when I scroll I have this cool animation and the bezel wall is that you can also Nest transforms so if I select this element I can add here in effect again go to scroll transform and this time I will make section in View and I will select the detail section from I want to start from opacity one and I will make it bigger maybe like this and now I will Center this and I will add a transition now if I go back to preview I scroll I have this amazing animation so to summarize what we did we start from a static design in figma we prepared our designs using Auto layout we set the right constraints and name our sections correctly then we use a plugin to copy and paste each section into framer in framer we add click to scroll we add a sticky scrolling animation we also briefly saw how components work and set a hover effect and finally we end with a scroll transform to create this amazing animation and these are just the basics framework if you want to learn more about it follow me and see you on my next tutorial bye bye

Channel: Product Sensei

Views: 8,554

Keywords: product design, figma, ui/ux, prototyping, user experience, web design, animations, user friendly

Id: QOBd69Jnh8A

Length: 11min 21sec (681 seconds)

Published: Tue Jul 25 2023