Figma Smart Animate Carousel + Free Design File

hey everyone it's will from world brat design and welcome back to another video tutorial as always these video tutorials are free and this one will be based on around creating an animated carousel using smart interactions within figma so we're going to be using um everything inside figma we're not going to be using any external plugins however you could do for example i've been getting these images from the unsplash plugin which we can see down here and this text i just pulled from just a random website on google chrome everything else is just based on default figma so let's have a look at what we're going to be creating today so we've got this prototype here and this is this screen here so this is the entire prototype in this single frame here and if we have a look we can swipe between and we can see our pagination updates along the bottom and we can also see that it goes from a light mode to a dark mode too based on the image behind so that's not something smart we're not coding that we're just saying on this frame we're going to be using a dark mode um because i don't think we can detect the pixels the colors behind to be able to automatically update that but you could do if you were to actually build this in ios or perhaps on android so let's get started and learn how to build this so we're going to be building it using components and then we're going to be adding some interactions so if i press shift e we can see we've got these interactions between these different frames here and in fact i'm actually going to stack this vertically and you'll see why later so if i just add a quick auto layout to this stack it vertically and then i'm going to remove that water out just because we don't actually need it and we're going to have a look at how these are actually built excuse me so at the top here we've got our different dots so these are the dots there it's inside our pagination and these are very easy to build so these are just an oval at 12 pixels by 12 pixels the light versions are white you can choose whatever colors you like and the active state is a fill and the uh default state so not the active state is a stroke and we can see that by actually selecting the dot here and we can see it's a stroke of one pixel inside so i've chosen white for my um light mode so for dark mode i've gone for this uh green and again we can see the active is a fill and the uh not that one sorry the default is a stroke we then used these dots to create our pagination so if we look in our pagination we can see we have a frame and that frame has an auto layout so we have eight pixels of padding top and bottom we are aligning it to the top left although it's not really that relevant the alignment in this case and we are doing the direction from left to right so it's horizontal direction and we're having eight pixels between inside our frame so let's click on this light one here inside we can see we've got the four dots from above so these are uh already components so let me just show you how quickly how to create one of those so so then we've got a dot let's call that dot forward slash active and then we're going to create our second one and we're going to add a stroke this time and remove the fill so and then we're gonna make these the same color in a minute um and then we're going to create a component set so on the set because we added that um forward slash we can see that we it was a dot and then forward slash what it was uh i didn't actually rename this one so this one is going to be default there we go so we've we've got our active and default so if we then bring one of these out oops create a copy so i'm holding that alt create it and copy and we can see we can now switch between because they are a component so that's how these dots are built we can then drag one of those dots in duplicate it and then select which one we want and we've created the light mode here and the dark mode here to create the background which if we have a look down here we can see what it looks like that's quite easy it is you just grab the frame select a fill color so i've used the same green or in this case i've used white i've set it to 10 and then i've added this background blur and the exact background blur here is blur of four so when you overlay that on top actually blurs the image behind but also has that color over the top as well so again these were created with um a name so in this case it was pagination and then i did a forward slash light and then i did a forward slash and a number so the number corresponds to which uh dot is currently active so this is light one light two light three light dark one dark 2.3.4 and then when you create that component it then create it like so so just to give you a real quick uh overview of how i made that we can drag one of these dots in add an auto layout so i'm pressing shift a here so adding an auto layout i'm going to set eight apart and then add eight pixels of padding top and bottom and then i'm going to press command d to duplicate it four times or three times sorry and then i'm going to select this one set it to default this one to default this one to default and this is going to be our pagination light one then to create the other versions because we've used a numerical and it will automatically update to the next one which is quite handy and then we just need to go through and make sure these are changed like so and again last one and i'm only going to do the light mode in this example because it will be pretty obvious how to do the dark mode and then you select all of these you can see all the names here and then as soon as we create that component set we can see that it actually changes um so the top level is called pagination so the component set is called pagination and then those kind of parameters we uh gave it before such as light dark and then a number will be the version so then if we bring one of these out we can then because we've only got light at the moment you can only select that and then we can choose which one we want here so that's how we create our pagination so i'll just delete that next one is onto the carousel and this is a little bit more complicated um so if i select this version one or the component one inside the carousel um component group component set and i expand it we've got a pagination on top so number one is a frame with no auto layout we don't have any auto layout we don't need it i've then added the pagination and behind it i've added something called frames and these frames are made up of a frame with an image on top and we have four of them and they are in an auto out so they're inside a frame with an auto out and there's zero padding and zero space between so if i go to the top level and remove clip content we can see that's what it actually looks like and if i do the same with the one below we've clicked content we can see i've moved over one same for this one and for this one so you can see it's the same component the pagination is being updated to which frame it is and then we are moving it over based on how wide the image is so in the first example we can see the width is 428 so we can see we are at x0 on the frames if we go down to the number two click frames we can see it's minus four two eight now that's the width of the frame for the third one if we click the frames we can see it's minus eight five six so that's minus four to eight minus four to eight and then add sorry then add uh then minus another four to eight for the last one and we get minus one two eight four so make sure each one of these frames at the top level has clip content so it's actually hiding the rest and that's how we create that so i'll show you really quickly and then we'll build one ourselves just so you get the full explanation so for the animation to work press shift d to go into the prototype mode and you can see we are creating a interaction from this one to this one and then this one back to that one to the next one and we can see that interaction is a on drag so that's when the mouse is down and you move it and we've got an ease out over 100 milliseconds so that is when you let go of the drag it will take 100 milliseconds to complete um i think now where people tend to go wrong with the on drag interaction is they'll put it on the top layer and that just won't work here so if we did that we would just end up clicking between the two and the animation wouldn't be this nice drag one here it would be like clicking and it would just move to the next frame which is not what we want instead we add this to the actual frame itself so uh sorry not to the frame itself the media which is a frame but it's called frames so that's a little confusing so under our first um carousel item if we go under frames and we go to the media that's actually visible in this case it's this top one here this is where we add the drag animation so we don't add it anywhere above it we add it to the actual part that's visible so you're dragging this the actual item inside the auto layout okay so let's quickly build that so um know what we're talking about here and we're going to use these components up here so i'm going to have a look at my uh frame here so my frame is 428 wide 926 in height but i want uh should we just for this example do a square even though this one isn't we're going to do a square in this example so we want a rectangle of 428 by 428 like so whoops we've got this uh locked here so it keeps the aspect ratio so we've got our square uh we want to put that inside a frame and we want to make that frame an auto load so we can press shift a to do that so here we've got our auto layout frame we do want it horizontal but we want all of these to be set to zero like so and then we're going to call this media item so then we're going to duplicate that three times so we've got four of them like so and then we're going to put all of that inside another frame and go frame that selection and call that carousel and we want this top level frame to have clip content on it and we want the width to be 428 so now we can only see the first one but i'm going to leave that as click content for now while i put one of these on it so i'm just going to hold down alt and drag this out into my frame here just make sure it's under the top level and i'm going to center it put it at the bottom and then i'm going to put it 16 from the bottom like so and if you want to see these uh helpful rulers you can just press alt on your keyboard to see those okay so now we've got our pagination in there we've got our frame let's just rename that to frame and we've got our media items so i'm just going to grab our carousel and do unclip it now even though i said i wouldn't be using any plugins you don't have to you can just add an image here so you can go to fill on the media item click here fill add an image and then upload your image here but to save time i'm going to use a plugin called unsplash which is here and these are just free images that you can use from the splash website and let's go with animals so i'm just going to click that and hopefully oops i was on the top level so i just need to make sure i'm clicking on the correct item and there we go so we've got a nice deer in the woods there select the next meteor item and then over animal we've got a pug jumping here we've got a nice tiger and last one we've got a buck okay so we can close that now so now we've got some really nice images uh that's just a really helpful plugin that helps us speedily create our designs okay so just to recap we've got four rectangles called media item they are set to 48 by four to eight now you could set this to whatever size you want just make sure each one's identical they are inside a auto layout with a horizontal with zero padding and zero space between and also within this frame above we've got our pagination that we created earlier this component here and then we've got our carousel item here which is set to the width of 408 408 even though the actual full width is much wider and then we're going to apply our clip content here like so so this is our carousel one so i'm just going to add a forward slash and a one okay so we're doing we're getting there i'm just going to move this down here so we've got some space to work with it so we now want to create a frame 2 or carousel 2 even so i'm going to hold down alt and drag this one below like so so now we've got a duplicate but we can see the number has been changed to 2 and inside we're going to grab our frame here and we're going to move it over like so now this has actually dragged it outside of our frame so that's not worked very well so the way i like to do this is just grab that frame and do minus the width so that is minus four whoops minus four to eight like so same again now this is where figma is really cool so we've already got a number in here but we can do a minus again so you can do simple math inside here so we can do another minus four to a and it will instantly do give us our total there which is -856 and finally our last carousel carousel number four and we're going to minus 428 again and there we go we've got our last version so we've got our carousel nearly complete we just need to come in and update our pagination here so let's do that two let's do that three let's do that four there we go so our pagination is now correct as well so you might see on this one accessibility wise this might not stand out very well on this image so this is why you might have a dark mode version but you know how to do that now by just following the pagination up here as always there will be a link to this figma file in the description below so you can download it and have a play around from there if you get stuck just have a look inside the components and you'll be able to reverse engineer it we're now going to select all our carousel items and we are going to create a component set so we've got our component set here so if i was to drag this out using alt to create a duplicate we can then scroll through and see all our different frames which is pretty cool so the last thing we need to do is actually create our prototype so here i've got a frame so if i click the frame tool up here or press a on my keyboard we have some defaults from here so we're going to work with the iphone 13 pro max i'm just going to do inside the components here just so we've got everything together so we can see what's being used and where okay so we've brought in this iphone 13 pro max frame we're going to um add our carousel item here to here so i'm just going to you can grab it from assets here but as we're in the same page i'm just going to hold down alt and drag it across and drag it in like so just make sure it's aligned to the top and left so zero and zero and it's the full width of our frame here so then we just want to add some text and we're going to make that uh 36 and let's make it bold does that actually change it no make it 36 there we go i'm bold that works for me uh probably don't need 140 pixels space uh there and i don't think we need that and then we're going to create our body text below and we could probably use again i know i said i wouldn't use any plugins and i've gone completely against that but we are going to just quickly use a lorem ipsum plugin so here we go generate placeholder text so let's run that and that's created us a load of text there and we want to make that regular i'm gonna make it 16. and i don't think monster has the best spacing so i'm gonna add one pixel uh that didn't work let's try that again 16. and one pixels not sure why that's doing that anyway we can fix that shortly so let's select these two put inside a frame uh apply auto layout to it so i did that by pressing shift a and then we're going to give it 16 pixels of padding top and bottom and we're going to give i think 16 pixel spacing between the title and the body as well and then we can have that fill our frame uh so we'll do a fixed width here let's drag that in actually we know that we know what the width is it's four two eight there we go there we go and then we just need to grab give that a name text and then below it just make sure both of these are set to fill the frame or the container like so and i just want to come back and fix this one because i'm not sure why that's done let's make a size 16 let's give it one pixel spacing there we go and just for readability even though this isn't the actual paragraphs just add some paragraphs in here and this doesn't need to be uh we do fill container that way as well there we go perfect so if we were to actually come and play this it's not going to work and the reason is we haven't actually set up our interactions yet but we can at least see what it looks like so here we go we've got a nice image which takes a little bit to load because it's quite a big image we've got a nice pagination there with some really nice uh background blur on it and then we've got our text so our title and our body but we can see there's no interactions so we just need to come in and do that i'm going to purposely do it wrong now so that we can learn how not to do it because this is what i see lots of people do so we're going to grab this and we're going to grab the top layer we're going to press shift e or click prototype up here and we're going to drag it down onto this one and i'm only going to show you how to do it wrong between these two frames so that we don't have to spend loads of time doing it between each one let's set it to on drag and we're going to set it to smart animate and we're going to have it ease out over 100 milliseconds and then we're going to do that one back the same way so that we can get back and forth there we go so now if we play this we will have uh some animation but we can see it's not actually following my drag on the mouse it just knows i'm dragging and then it's switching to the next frame over 100 milliseconds and that's not what we want we want this nice smooth animation where it actually follows the mouse so while the mouse is down and i'm pulling it follows the exact position that i'm moving and back here you can see that's not the reaction we're getting here so let's fix that so let's delete these interactions and instead of starting on the top layer we're going to go inside our frame and find the actual frame that's visible so on this first one we know it's the top one so we've selected that item we're then going to add the interaction from there so on drag we're going to change to that one and these are all the settings i want the second one do the same thing this time it's not this frame it's the next media item that we want to select and you can tell because we can see this these edit handles here so we know we're on the right one bear in mind you will also see that on the top level frame and this frame or not this frame just the top one but you want to make sure you're on the media item itself and we're gonna do it back so on drag gonna change to property one and we're gonna do an easel so let's let's have a look at that one now so now we can see that's working perfectly so we just need to go and do it for the rest of our um our media items so if we grab this one again make sure we're selecting media item do on drag i wish figma would remember your previous settings because quite often when you're doing this um you're adding the same interaction between lots of different things and having to come through and check on drag every time it's a bit frustrating but perhaps that's just a niche user case that i'm experiencing so on this one we're going the third one we'll do on drag and we'll drag it to that one as well do one drag last one just back to the tiger on drag and if you wanted it to be able to go between these two as well you can do that so we can do on drag to the last one and we can do it back that way as well i'll drag no i haven't actually tested that so we better test that before i can say we can definitely do that let's have a look so let's reload this just so we know it's definitely got our changes there we go just wait for that to snap in there we go that's nice yeah so actually uh i tell a lie i've you can't do that not nicely anyway so i'm just going to remove those last two interactions that i added and we'll just ignore that bit and chalk that up to a learning experience so now we've got our animations here so last thing we need to do is just reload again just make sure we've got our latest updates now it usually does hot upload uh hot reload sorry but not always so i like to just reload the tab and then we can see we've got our nice interactions uh what is interesting is in this example we have just got a frame and in this one we've got a nice iphone so i think what we need to do here is just say it's a flow starting point perhaps let's see what that looks like nope i've still not got the iphone around it so could be just the title here that's the issue not sure but i'm going to move that out of our components page and into our design page now so we've got it here and let's just close our prototypes and load it again and see if it works if not we might have to fix it for another video oh no there we go so it's working now so perhaps it was because it was in the same page as the components that was the issue or perhaps it had because it had a hyphen one after it i'm not sure but either way it seems to be working now and that is our interactive um carousel using figma smart animate uh completed so i really hope you enjoyed this um there's loads of ways you can expand this we can make this scrollable as well um in fact shall we just do that now just so we've got it so let's just grab this text make it much bigger and let's just duplicate it a few more times whoops not like that and just going to remove that click content real quick there we go this we're going to go to prototype and say vertical scrolling and then we're going to grab our text here uh not that sorry we're going to then grab our frame again and do click content i think this is all we need to do yeah so there we go now we've got a nice scrollable vertical article so this could make a nice blog post and then we've got our carousel at the top that works as well so hopefully that is a useful tutorial for you um i've enjoyed making it we've covered lots of stuff here from creating the design and all the components themselves and how we can use a few different plugins even though i said we wouldn't be using plugins how we can use a nice few plugins just to quickly iterate our prototypes um so unsplash that was for the images and then lorem ipsum exact name was generate placeholder text and unsplash with the plugins i used in this episode so let me know in the comments below what you thought and if this video has helped you please like and subscribe that really helps the channel grow and let you know your friends and colleagues know about this video hopefully it'll help them too and as always these videos are free and i hope to see you in the next one thanks for watching you

Channel: Will Brett Design

Views: 11,988

Keywords: Carousel, How to make a carousel, how to design a carousel, design a carousel in figma, figma carousel, image carousel, learn figma, figma tutorial, free figma tutorial, will brett design, interactive components, smart animate, figma smart animate, figma carousel animation, figma carousel slider, figma carousel prototype, figma carousel component

Id: ZzhX-vFJ3TI

Length: 29min 14sec (1754 seconds)

Published: Mon Sep 12 2022