Figma To Real Animated Websites Magically! – No Code Needed | Figma To Framer Sites

today we're magically converting our frigma designs into animated and interactive web pages and designs that you can actually publish and use gonna see the amazing capabilities of figma to framer or and what framer can now do there's so much has changed over the past months and I'm super excited to show you as a first step we want something that we've already designed in figma I'm going to pick up a page from Untitled device free figma UI kit I'll have a link in the description so that you can follow along under Pages I'm going to navigate to the landing pages section I'm going to be exporting this UI right here as it is with all the auto layouts fonts Etc over to framer in just one click and this is how you do it just click on the frame that you have here go to the resources tab on the top left right next to the T or the for or the text sign and under this go to plugins and search for framer you'll get figma to HTML with framer and I want you to run that once it's analyzed this page and it's copied 617 layers I'm now going to go over to framer that you can either install the framer app or just go to your browser once you're inside your browser just type in framer.com and you'll reach framer from here you just want to say open framer or sign up slash login start a new project by clicking on new and I suggest choosing the blank site template it will then ask you to put it in any team so just put it in any dummy team for now now once you're inside framer on your browser just right click paste and select paste it will say uploading figma images now you might have to adjust the size of this just change it from 1200 to 1400 even for the height you can quickly just hold command or control and change the height of this page if you wanted to do this automatically you could have done that just click on desktop once again go to the right and there's a layout option right here click on layout and this will convert it into a stack which is exactly what we want we also want the height right here to change from fixed to fit and this will fit the entire page automatically just like we had in figma now let me shift myself from the right to the left so that everything will be a little more clear and easy to understand on the right now the first animation that comes to mind is an appearance animation so an appearance animation happens whenever the page either loads or you scroll so in this case we want to animate this nice little section one by one so in that case what we'll do is click on all the elements right here that we want to animate the title the subtext here the buttons Etc you can even check out the layers panel just like we had in figma just to confirm that you've selected everything on the right there's something called effects and this is where the magic happens click on the plus icon right next to effects and and click on appear animation peer means whenever the page loads something will happen in this case we want this beautiful text right here to scale in bottom which means it will scale in from the bottom we can even change the animation properties from the right you can reduce the opacity increase or decrease it you can increase or decrease the scale the initial scale of the text I can even change the transition from a spring animation like this that we have to an ease and here we can change it to ease and out ease out back in out whatever you like I prefer setting the animation like this manually on a ease curve and I'm also going to increase the time to 0.5 and no delay that's perfect now if we play this right here it will open up on the same page see how beautifully it animates in wanna see that again ah smooth you can do this with multiple elements all across the page and I've seen that it's very efficient it does not slow down the page at all now what if we want that things should appear while we are scrolling scroll animations are super easy to do in framework just click on the elements you want to animate while you scroll for example I want to and animate this little section as we're scrolling right here I click on this section and on the right I say effects again and here we have a scroll animation which is perfect I'm going to click on scroll animation and whenever the layer is on view which is the perfect setting and it should start when I reach in the middle of this section so that's perfect replay yes no that's up to you preset scale in we'll say faded slide in bottom so it'll slide in from the bottom and for the effects we're gonna set it from Spring to ease just like we did earlier now if we preview this real quick if I start scrolling uh see how it animated in just like that how about copying animations copying animations is super easy in framer for example I have set an effect right here all I have to do is right click while selecting this click on copy and here I can copy the effects right here so no need to repeat the same efforts just right click here paste paste effects so wherever you want the same effect whichever element be it a card icon logo whatever you can just paste in the effects and if I play this once again and I slowly scroll down one two three see how everything smoothly animates in now what if I want to 3D animate inside framer I click on whichever element I want to 3D animate for example this nice little image right here so you can do you can do 3D animations either on click or on scroll for now let's try the scroll 3D animation so if I click on this image right here I go to the right and select effect and I say scroll transform so whenever I am scrolling over this something will happen so trigger on on scroll or layer in view I'll say layer in view from this to this so this will be our initial position on our from position we will change the rotate y-axis this is our y 3D axis see how it's rotating on a 3D axis slowly perfect I will also increase the opacity to a hundred percent and scale it a little bit more perspective also I can increase or decrease the two will be the perfect initial position the that's it if I play this now if I scroll down slowly smoothly as you can see this 3D rotates into place ah see if I slowly move it's 3D rotates into place and it looks beautiful now framer has a lot of animated components and elements built into it and this is how it works so for example I want a nice little animated slideshow of all these icons how do I make this possible now nice little animated element will be added so if I click on insert on the top left and as and I click on interactive right here there are three interactive elements that they've already built in one is the ticker the slideshow and the carousel in this case we want the ticker which keeps on animating as we scroll so I'll just drag this into this position right here so it's right below these icons now adding any element to this animated section is super simple I click on this little section right here and just drag it out of the frame and remove stack stack is similar to a group so I'm going to remove this from the group and now we have two rows created individually I click on this little animated section and I'll drag it into the first one like this perfect and I'll I'll drag this once again into the second section as well so now we have two children item I will also increase the width of this to fill the component completely by clicking on it going to the rights properties section right here and under width I change it from fixed to fill if I play this once again and I scroll down to that particular section as you can see there is this infinite scroll that keeps on moving when we hover over this it slows down as well isn't that a nice little touch you also have gradients on the edges like now I can also quickly edit everything in this set I can change the speed of how fast it is scrolling from left to right I can change the direction of the scroll I can change the alignment to from Top I can even change how fast or smooth this section gets when I hover over word now I want to introduce you to the ultimate framer animation Library it's called framer.supply and it has a bunch of collection of animated elements that are tricky to create on your own but you can quickly copy paste and edit for example I like this motion text this magic motion text I can quickly click on copy here go back to my framer website and here anywhere I want I'll paste that element right here above this section perfect you have all the options so here I can say a brand new app and everything else I'm gonna keep the same but in this case I want the color to be a darker color and I want the font to be something else so enter is fine I can increase the size just like this dynamically and I can also change the alignment perfect now that we have this nice little title I'll play this once again for you and as you can see it animates perfectly like this you can increase or decrease the speed in the section right here but that's up to you I personally like this animated Arc text works similarly I also like this globe this 3D globe that you can edit move around so everything you need has already been created in this lovely page apart from that inside the frame or website there's something called templates under templates you can search for any of these options 3D 2D free paid and here you will get all the animations in build so for example in this framer website I can quickly View and interact with an element like this in 3D if you want something like this on your website you can always use this template as well you will also get all the inbuilt animations and interactions in this website prefer just copy pasting and tweaking it according to my needs and wants but that is it for today's magnificent video I will also have affiliate links which will get you discounts on framers premium plans for you guys in case you or your business wants to shift up that also helps and supports this channel thumbs up if you want me to make more videos like this comment down below anything you want to ask I love interacting with you guys in the comments section I'll see you next week same time same place until next time take care subscribe and God bless

Channel: Punit Chawla

Views: 103,672

Keywords: figma to framer, figma to code, figma to website, design to code, punit chawla, framer tutorial, framer sites, figma tutorial, figma to html css, figma to web, ui design tutorial, ui design, website design no code, no code, framer vs webflow, framer no code, framer website, figma plugins, figma new, figma update, figma to app, figma to webflow, figma to html, figma course, framer animations, figma animations

Id: qLskX8nkON0

Length: 10min 32sec (632 seconds)

Published: Thu Dec 22 2022