How to Create a Magic Slideshow in Framer

in this video I'm going to show you how to create this amazing Carousel in frma without writing a single line of code and one of the best ways to just improve your design skills is by checking out some amazing designs out there and trying to pick up some ideas trying to recreate yourself and I'm going to show you how to do just that here and today we're going to design this amazing case study flow or Carell cards without writing any code just your frma account you can sign even need to frer you can create an

account in frma for free in the description below and let's get this started my name is Jo and this is frea dive let's get [Music] started shout out to the guys at specify up specify app.com this is one of the websites one of the best designed websites you're going to see and the good thing this website was also designed in frame which just shows us what exactly we can build in framer so what really got me caught my eye in this website is this despite the nice design is this part here where we can see

the cards it's like a nice case study where it just gives an elevated user experience for any foral website so in here I have my framed workspace and um this is my desktop and uh once you enter framea you're going to be given a desktop where you're going to design everything you want to design and then on the right on the left side I've created two stocks which are content that I'm going to place inside my cards so the first thing we're going to do is we're going to create a section [Music] or but as

you can see I already created a section so let me just show you what I did so just come here to desktop and just hold F on your keyboard and then hold F and then just draw a rectangle so now the rectangle snaps as you can see it snaps into this desktop so what we want we want to fill these available spaces so I'm going to click here on the wi and click fill the available space and I'm going to make the height to be 7 100 so this is now the section where I'll be

placing the the cards and as you can see the cards are not just any cards but they are placed inside a carousel meaning that you only see a card one at a time and the and the other cards are actually faded on the left and the right side so I'm going to get rid of the color inside the the frame and then I'm going to click here and add a layout to this stock and then since we are dealing with a a slid show if you want to add a slideshow come on the top left

side and there's an insert insert button then scroll all the way to interactive and then you're going to see slideshow so notice is a difference between slideshow Carousel and TI and uh slight differences but they more or less perform the same action so I'm going to come and drag my slideshow inside adjust a bit of the height and uh you you want to come back to your website and see try and visualize what's the height or what's the the width of this card and you want to design your Carell in a similar sense so for

now we don't have the exact dimensions but we are going to now place our cards inside here and they're going to flow from left to right so now that we have our Carousel as you can see it says connect to connect are layers of components to make infinite out of plane slid shes so we need to come and create a component or a layer so we're going to start by holding F on our keyboard and then we're going to create now our card so notice we have 573 317 so we're going to do that here

and this so we're going to create this as 517 and this one we saw it as of okay 573 317 so it's 573 and then the height is 3 373 just for uh for consistency um so now we have our frame here which we're going to use to create our card so as you can see we going to come and kill the field and then we're going to put the radius to around 20 we cannot see the radius so we're going to come and add the border now we have a border as you can see

then what we're going to do is we're going to place two cards inside so as you can see in our example example here we have this left side and we have this right side so interestingly I had already created a stock here and the stack has the sort of like the logo and but just notice this are just dummies this is not the exact carful logo or the the font this is just for the sake of you know practicing so but it's something very similar so I can just come and take this stock and basically

it involves this top part which is the name and the icon and then we have this other part which is this name and we have a stack of icons here so I'm going to come and take this for stock and I'm going to hold a crl X on my keyboard to cut it and I'm going to place it inside this Frame but now notice we have um this Frame is set to a frame we need to turn this Frame into a stock so that it fits uh well and organized so I'm going to click here

and I'm going to uh click layout here and then I'm going to do the same thing for this stock I'm going to hold crl X on my keyboard to remove it I'm going to paste it inside this card so let's call this stock um our card okay so now we have uh as you can see we have two cards inside uh two two two two columns sorry two rows inside this um card so what we need to do now we need to realize that the left side is a bit smaller than the right side so

we but we want we want it to fill this card so what do we do we come and click the first card first stock let's just call this on the left let's call this the left side and then let's call this the right side so I'm going to come here and call it the left side and I'm going to click here F the space and I'm also going to click here on the right side fill the space so notice now how our design comes to life but still some tricks we need to do so again

remember the left side is a bit smaller than the right side so we can do that by coming to the field and we can say okay we want it to be 6 smaller so we can write here 6 and now as you can see now it takes more space than the than the than the right side but as you can see we have this um uh logo of ours which is now been taken away so we can just see we can uh position it make it a bit smaller and then we can do the same

for I think that's okay uh just make it a bit bigger yeah nice and then what we can do is we can make the height of our left and the right to fill the these available spaces so I'm just going to click your height and f that space and then this height again F uh fill that space so now we we have this Al set to fill and then again we need to come here and kill this Gap notice when we create any form of stock that default in framer is that it gives you 10

Gap so we need to come and get rid of it okay so let's now go back to this inside of so remember we had our left card but now as you can see our stock is is Flowing outside so we need this to be set to feel the available space we also need this to feel the available space and then now this is okay and then now we have will to need this to fill the available space again so now we have our card but we still still need to do some work first of all

we need some parting meaning we need some space on the margins and the the left and the right so we can come to the card and inside here let's look for paring which is these and then we can say okay we want a ping of like 30 okay so we are want a ping of of 30 now as you can see the card is much much better but still we see that things are still not really fitting well so perhaps we need to raise the the width just a little bit but I think that's that's

the case so let just Rel with a beat as you can see now our card is like coming to life really well and then we can just stretch it a bit we can just add a few of distance between this create a nice G so now we have a very nice well-designed card here where we have fuy py and even when we go back to our design we can see that things are starting to shape you know things starting to shape up so so now we have this card and then we have this uh card

over here so now I can even perhaps add a field to my card so you can see what I actually what I'm referring to so now we have an ice card um very similar to what we have here in this page however we sorry so however we we just need to make sure that it's slightly a bit a bit a bit lengthy so I can just come here and make it a bit lengthy now as you can see now our card it's trying it's now coming really well and then yeah so so then this part

I think we need to position it not to Center but we need to position it to space around meaning as you can see in our card it's kind of like there's space here but there's space around so I think this looks much better so so now we have a nice card I also think we can re reduce the part into like 22 which makes it much much better so notice we also have a line here and then so what can we do to add a line what we can do is we can we can just

draw a frame inside here just like a line here and then we can just position it absolutely and then I can just drag it all the way here and then we can can pin it to the top and the left and then we can reduce the we to around two or even one you can make it uh one uh let me just drag it to we can just drag it like so we can make it one and then we can you know we can come and take this yeah this this specific uh we can make

it to one and then then we can change the color to sort of like the dark color so and then we're going to use the border which is also dark now as you can see we have a nice card and a nice spacing so now that we have our card we can now proceed and place our card inside this Carousel so I'm going to come and um and just click here and see notice what what's going to happen happen here so when I connect this to my card notice what happens it kind of like eats

up my card so what you need to do is we just need to adjust the the width and the height of this so that we can feed so we can feel in our card nice and nice and well so this is where we can say okay let's go back to our card and SEC and check what's the width and what's the height so our card is 77 2 and 373 let's just say 372 772 so we come to our card and say we want this to be 7 772 and this one we want it to

be 372 so now we have a nice card okay I'm going to go now to my slideshow setting and uh what I'm going to do is I'm going to get rid of these arrows which come here and and you can see this part called Arrow I'm going to say show yes no I'm going to click no so now as as you can see we have a nice card here which is very similar to what we have but still something missing and you know let's just come back to our our our design okay so what we

want we want to have like three cards so what I'm going to do is I'm going to create a component out of this so to create a component you just need to come and click the card right click it and create a component or you can hold Control Alt K and let's call it a card so this component means that we can add another variant here and then we can also add another variant and then what we can do is just we can see we can you know change something small okay so we can maybe

call this um Nal and Peach so let's just change the name here to Nal and let's change this to Peach okay so then we have three variants and then what we also want to do is we want to change the color so first of all I want to get rid of this gray color notice that in our design we we just have this sort of like radial color on the top left part so that's what I'm going to do I'm going to come here to the variant and I'm going to come here to the and

I'm going to come here to and I'm going to draw a frame so the frame now we can put it absolutely and we can position in on the left side so I just need to drag it here and drag it here so this is now the one that I'm going to put in my my radial okay so I'm going to put in here the radio color and then I'm going to drag it to the left side so then I'm going to just drag it like that uh so that you can see notice now we have

the the blue color which is this so I'm going to close it all the way till uh opacity to Z Z and then I'm going to try and see if I can make this circle much bigger now you can start to see that what we are doing it's starting to shape up so we now have like a nice radio color here so let's call this our color our radio color okay so now we have a nice color that we can easily stretch it out and just bring it inside and outside so but we want this

color to match this icon color so I just come here and pick this blue and I can pick with my picker here and I can just uh take that color which creates a very nice sort of feel and so I also want these to be sort of like grayish the the boundaries so I'm going to change that and I'm going toate uh create a color let's call it gray and also this line here I'm going to CL click it and I'm going to call it uh I'm going to call it the gray and then I

also want to lock this so that it cannot be tampered with because it's it's just a boundary so now as you can see we have a very nice color but what you see is that the color is is above the word so we need to bring it down a little bit we need to take it behind so we come here to Z index and click the minus and then as you can see it now goes behind the word okay so now this is for kafu and then what you want to also realize is I had

created a component for this button which means is when I hover going to change from black to white so as you can see is is nicely hovering inside so so let's go back to our card so now we have uh three cards so then I want to change the radio color here to let's see let's say perhaps we can use a different color let's say green and then I'm going to create now the green color here I'm going to call it green and then I'm going to go to the icons and I'm going to click

green and then I'm going to do the same for all the icons just for us do much what we're trying to build here see we have three variants with different colors which we can use to add to our Carousel so let's go back now to our card we can I can hold um I can click my card and hold alt on my keyboard and then I'll just drag down for the sake of duplicating and I'm going to do the same with this other card I'm going to go I'm going to drag it down so this

card I'm going to change it to variant to variant 2 and then this other card I'm going to change it to variant three so as you can see now we have three three cards different cards that we're going to add into this um Carousel V okay so now let's connect them I can just click here on my right Carousel and just click and connect click and connect this one and then click and connect this one so now if we view what we have we can see we have nice cards you know and we can also

see our our dots we can put it full screen now we have some nice you know look at the colors look at the flow but we still haven't really got into our design much so let's go back to you know on the we just need to tweak some settings on the slideshow so let's go to the slideshow and see first of all um if you can see our dots uh just below the card so we need to come here to our dots and we need to drag it below the card so as you can see

this goes up then this goes down so we need to just drag the to like negative you know 65 that's good and then we need to you see it has a backdrop so we can get rid of the backdrop completely so we just have the three dots just like in our design here okay so and then uh another thing I want you to change is as you can see in our design we have now this uh faded faded uh faded cards so we we also want to see the Overflow of this card we we we

don't just want it to be like one card we want to see other cards around the left and the right so we can do that by coming to first of all come to the effect pil and then we want to make sure that the opacity is set to you know we can see we can set it to like point 3 so we want to you know try to get rid of you know try to get rid of the opacity and then we also want to scale it just down a bit okay we can scale it

like 6 and then we want this to be dragable yes and then we also want it to be uh clipping when we go to clipping we we want it to you know so like show overflow we want it to show overflow meaning we want to see the other cards so we can click here show now as you can see the other cards are popping out but now again we can see that the Gap is too small so we can come here and maybe put a gap of like 40 this is good and then we want

to show not the current one but you know the fast the fast uh the first card so then now if we view it we can see that we're now really getting closer to what we wanted but we need to change something small small which is uh the speed of the card and also of course you can see that it's too small we've really scaled this too small so I'll go back to my effects so I'm going to click again my Carousel come to my effect and then I'm going to scale it just a little bit

bigger I'm going to give it like point eight okay and then now we can you know try and make it a bit like goes a bit slower going to give it a 3 seconds and now when I view it you're going to see that now we have a bigger you know we have something you know something it takes time like 3 seconds and then it goes so kind of give the viewer a chance to view it and you know yeah yeah so that's basically it you know um perhaps we made a slight error which we

can revisit right now as you can see the distance between this part and this part is not the same so we need to push the line just a little bit on the left side which isn't an issue we just need to come to our component here and you know try and see if we can have you know a consistent gaping remember we had um remember here we we just had you know we had a pting of you know 22 so we might have also a gap of 22 here just for the sake of consistency you

know um 22 yeah yes so now as you can see our design is well and it's good pops some slight tweaks but you can see how it started now we have very nice designs and uh yeah pretty good so if you want to you know follow along and recreate this in frma I'll link the remix file in the description and you can you know play along with it and hopefully you learn something this is frame a dive and see you in the next video [Music]