Figma tutorial: Image Carousel with Pagination

hi guys thank you for being interested in this  tutorial today we are going to create this   beautiful image Carousel or image scroll or name  it as you want uh so we have this gentle hover   effect on this uh arrow and we will see that  by scrolling we will see that the indicator   goes from one Circle to another so when I mean  the first one doesn't show because we are on the   first image so there's no point to show it as  I click I see this going uh forward and we see   the other Arrow as well that we can go back to the  start and as you see that indicator indicates you   where you are on the scrolling so that is pretty  nice and cool uh and with no further Ado let's go   ahead and create it okay then so uh let's create  it from scratch I'll do it pretty quick so let's   do a 19 20 by 9 40 I guess something like that  that's okay you can do by the way any screen   proportion size that you want it doesn't really  matter let's give it a kind of a dark one and I'm   gonna create a quick demo header 1920 by let's 70  something like that let's give it a feel something   like that is good enough and we have a website  header let's call it very surprising website   Heather nice okay so we got that done uh we  can just click and play and see how it looks okay good I'm gonna by the way do uh yeah I'm  gonna hit off the figma UI because it's gonna   bother us good so we got that going nice now let's  go ahead and create something like that we'll   create the arrows let's give it a 40. I'm creating  it in a frame this is our Header by the way   and our frame will give it a white stroke  let's do it like that give it make it round   so this is going to be the left left arrow and  let's create something like that in it good so   so we'll go something like that and by the way I  mean I did bring if you noticed this color just   to take the color sample of it which is yeah I  mean that's pretty cool doesn't matter here we   go that's it bye we don't need you anymore end  of story so we got the arrow which is cool and   now I will create actually a circle let's take a  circle something like that 16 by 16 that worked   out good for me so that is good and uh I'll make  it white I'll give it a stroke okay I'm gonna give   it a stroke a white stroke we will use that in a  minute and I'm gonna select them both and right   click or shift a add Auto layout okay now we can  easily actually what we can do is we can double   click and select this one and do uh control or  command d one two three four five so we have six   of them and that was easy we can select this one  duplicate it you can just drag it and put it here   and we will select this Arrow inside it and  we can either shift H or flip horizontal so   that's it we have it pretty uh easy already built  and that is pretty cool okay so the auto layout   actually lets us work very precise and that is  good and we will constrain it to the center of   that frame and we will align it to the center let  me see where we at okay that's good we'll put it   here we will take care of its uh all its states  in a minute okay that's not important right now   and let's do the images I'm gonna take a rectangle  something like that I guess you can do it bigger   smaller again whatever fits your designs the sizes  that I'm doing here have no meaning at all okay   they're just kind of like I'm just throwing  it on the screen uh 1920 yeah that's good   so let's do something like that and I'm gonna  give it a title let's give it some some title um yeah something like that no maybe  that's too big do something like that   and do it bold and that is pretty good  okay great so I think that we're done   by that and I am selecting them both and  just frame selection let's call it image image one okay good so we have the image one  going on and that is great uh and now I will   duplicate it by the way I can either select it  and just hit the alt or the option in mac and   shift and just drag another one here so let's  put it something like that I guess that's okay   okay so we have image two and then we can  put them both in an auto layout shift a or   right click add Auto layout the auto layout just  lets us duplicate them in very precise distances   between them and this is very comfortable to work  like that you can put by the way more text if you   want down here it's up to you I'm just giving  you in a schematic way how to do it uh quickly   and then you can design it as you want by the  way if I will uncheck the clip content here   this one then I can just uncheck it and I can  duplicate I mean I can leave it on but I just   want you to see that I'm duplicating let's say  uh one two three four five and six so we have   them all like that cool if you want you can  make with the auto layout bigger distances   if you want something like that or smaller let's  say like that of course it's up to you okay let's   put them 130 I guess that is okay cool so now by  the way that I have these ones I'm gonna call them   images not them it because it's a one thing yes  it's an IT and by the way I am gonna select now   both the scroller and the uh and the images and  I'm going to uh frame them yes I'm gonna frame   them frame selection and the frame selection  I am going to call images plus designation Nation this is the pagination this one okay  now this by the way hitting the control I can   just make this bigger because I want it on  the width of a 1920 you will understand why   in a sec and this one by the way I can just  drag and close it all the way here and that's   pretty much it I'm gonna hit the clip content  and I'm gonna drag it outside so we have our   first going to be component okay so this is  uh here now uh the only thing that we need   to do images wise I'm gonna deselect the clip  content and just select all these rectangles   and go ahead and select the unsplash where  is it okay and splash just to give it some   yeah just to hit on some images I can do them  all together or select each one let's go to   presets if you hit on presets let's call let's  say architecture just give it uh give it a try   and see what it brings us so it's gonna fill  them all together each one on a different image   or you can select the one by one yeah that's  fine it's good enough I guess yeah okay let's   leave it with that that's that works for me uh  so this is it now we're gonna take care of what   happens here okay I'm gonna just duplicate it  and take it outside it's not a component yet we   will make it a component and we'll take care  of all that so um we're gonna take this one   to create the hover situation the overall  State more right to say it's gonna be left   yeah let's leave it left and I'm gonna call  it uh default and I'm gonna duplicate it why   did you do like that it throwed it to I don't  know where yes oh let me just put it outside   here yeah that's okay okay and sorry uh yes I'm  gonna put it here and I'm gonna call it hover   okay and the hover I'm gonna give it a feel and  I'm gonna give this one like 20 so this is going   to be our feel if you want to see how it looks by  the way you can just put it in a frame and give it   a dark feel and then you can see how it looks very  easy okay so let's take them both outside put it   here we don't need this Frame right now I'm gonna  select them both after I have the two states done   and I'm gonna create a component set so I got this  one okay creating a component set and now I can   actually prototype them to on Hover while hovering  uh dissolve is good enough for the hover and let's   give it a 200 milliseconds that is enough and  we're gonna do now I'm gonna duplicate it I   can make them all actually variants of the same  one but it doesn't matter let's do it like that   that is okay I'm gonna do right and what happens  here is um no I'm selecting this one and shift H   I'm just flipping it and shift H flipping it and  we have the right end of story okay so we're done   with that and now uh let's do this uh let's do  this here on the side because we're not we're   gonna need the space here today to work with the  uh I'm talking to it like it actually listens to   me but it doesn't yeah anyway it's that's weird  Okay so we're gonna select all these Circles by   the way because this is going to be the first  one I'm going to go back to design and on the   feel of it I'm gonna give it uh zero so we're  gonna have just The Strokes because I did add   a stroke here to each one of them good so we're  gonna call it pad G nation and let's call it one   and uh I'm gonna take actually this one copy Ctrl  or command C double click or click on this one and   paste to replace allow and that's it we have the  component here I'm gonna take this one copy and   put this one page to replace we have them both  now uh here which is good okay now one second we   can actually make it a component and here create  another variant so this is going to be one and   this is going to be 2. okay so now this one is  going to be zero and this one is going to be a   hundred I'm just creating all these situations  really quickly Ctrl D the third one uh that is   going to be zero and that is going to be a hundred  so I keep on creating it uh kind of quickly   uh for you see it's it's really not taking  long I'm just kind of like a repetitive work and this will be five this is going to be  zero and this is going to be a hundred and   the last one that didn't take as long maybe like  I don't know two minutes I guess no big deal uh okay good so we have all the situations we need and  great we're done with that now I'm gonna take this   one so we have actually nested components okay  this one is an interactive component just to get   the hover menu the hover sorry the hover estate  on each one of them the left and the right this   one I'm not going to connect them because we will  connect the states of this component soon to be to   one another we're just gonna use the states that's  why we created them already which makes it easier   for us to work so that is going to be a copy  control or command C I'm copying the first one and   I am actually here page to replace so I have the  component here this one I will make it a component   okay and uh let's create another variant of it  you know what let's take these and put them like   up here okay so this is the other variant by the  way we can give this uh thing this component it's   not the thing I'm giving it a background a dark  background so we can see better actually what   are we doing okay good um okay so now actually I  am going to create the situation with the images   uh what we need here this is the beginning  of it and yeah it's not seen so well because   that is what you know let's make it a bit less  dark then we can see the first images when yeah   that is okay and double clicking and I'm selecting  the images okay I'm reminding you let's collapse   all that will be more easy to see okay the images  okay and I'm just gonna kind of like scroll it   something like that now we'll take it kind  of like to the middle of it okay so this is   our second situation and here we're going to  select the second one okay uh and now we will   create we will duplicate control or command D  we're duplicating this variant and actually it   doesn't matter we don't have the clip content on  We're not gonna see it anyway we can put it on   if you want it doesn't matter honestly I mean  if I'll just put the clip content so you will   see that it cuts whatever is outside of it but  anyway it's gonna be the width of the screen so   it doesn't matter honestly that much anyway double  clicking on this uh on the images again I'm gonna   scroll to the third one uh it doesn't have to be  super precise I mean that's good enough honestly   speaking and I'm gonna select this one on the  third and then I'm gonna go like that and again   doing the same thing I'm doing it really quickly  and this one is going to be the fourth one D   selecting give it to the middle more or less and  selecting the fifth one and again Ctrl or command   D doing this sixth one and double clicking on it  and this one I'm gonna drag until here something   like that this is going to be our end position  something like that and of course this one is   going to be our sixth variant good okay now for  the prototyping actually I want to make this a bit   bigger to give us some more space to work I'm  gonna take this one and selecting all of them   actually and let's give them some yeah more  space okay cool now we can easily work with   them and connect them let's go into prototype I'm  going into prototype and by the way this one I'm   gonna select and just give it opacity sorry I'm  gonna give it opacity zero on the pass through   just not to see it because we don't need to see it  right now and this one actually in Prototype I'm   gonna connect it to here let's give it on click  that's okay let's give it a smart anime give it   a 500 millisecond kind of like a half a second  leave it on ease out I think that's pretty good   and here okay here actually we can double click  that and connect this one back here and this one   goes back here okay so I'm connecting them as they  should go meaning I click on this one it goes to   this one I'm clicking on this one it goes here  and this one takes us back to the first one so   now it's kind of like going to be repeating itself  in all of them I'm going to connect this one to   here and this one to here and the same thing I'm  doing now you see after you build it correctly   so they work actually goes pretty easy at the end  of it yeah let's just select the first one and go   and do this one yep and here actually we're gonna  have just the back because that is the last one   and this one we're gonna give it opacity Zero by  the way hitting on the Zero double zero actually   is gonna do that as well Okay cool so let's see  if it's working hopefully it is I very much hope   so so copy control or command C I'm gonna click on  this one and just paste to replace so here we go   let's give it a play actually close all the ones  that we have here let's oh I opened it already   and never mind so let's open it again and see  what is going on okay let's give it a minute to   load and kind of like bring all the images bring  it on man okay and so we have the hover effect   it works and clicking on it okay works perfect  okay so that was pretty easy and you see all the   images are there this is our last one and boom  we have it going so that's pretty easy if you   want to spice it up kind of a little actually  we can do something which is gonna take us a   few more minutes of working uh but we can actually  uh you know what yeah let's do it on the same one   I guess that we can um let's do something like  that we can actually yeah let's work with this   one because they're already hooked up so I don't  want to mess it up again uh let's see if I can do   that straight from here uh we're gonna give  these ones zero as well I'm gonna duplicate   um yeah I'm just thinking how to do it quickly  that's that's my uh thought yeah let's duplicate   another one and I'm gonna give it I mean you  can actually take off the auto layout if you   don't know how to work with absolute position  and so on you don't really have to okay so we   can make it more you can make it more simple by  just clicking minus on the auto layout and that   is okay I'm gonna take this one and give it an  absolute position meaning that it floats over the   other ones okay so if I'll put it here actually  we have to work kind of like precise yeah I'll do   it here and I'll give it a feel of a hundred okay  that is good and I'm gonna copy and put it here   and it's Gonna Keep yeah it's gonna keep its  absolute position which is cool I'm gonna   yeah so that's copy and I'm gonna put it here  and hopefully yeah hopefully I'm working precise   oh yeah I needed to copy this one and that  is copy and I'm gonna paste it here what   I'm doing now is that on each uh on each  click this uh circle is gonna move from   one to another yeah I think that's  that can be pretty cool let me see   um okay let's see how it works now yeah let's  restart it and refresh it because I know that   on interactive components it doesn't really  refresh that well let's see what goes on now   oh nice yeah that's pretty cool okay so that yeah  you see pretty easy we kind of like spiced it up   a bit yeah that works perfect okay then uh uh  you know what I'm gonna share the file that   you can even download it and use it if you  want why not that's pretty cool uh so yeah   look how beautiful it works that's really  nice let's see that we are on to the last   one yes good okay then thanks a lot and see you  in the next tutorial uh and of course sorry hey   don't forget to put a like and I would be very  very happy if you do subscribe to my channel uh   more cool tutorials are coming up ahead thanks a  lot and see you in the next tutorial bye for now

Channel: Yariv BE

Views: 4,402

Keywords: figma tutorial, image carousel, figma variants, figma interactive components, figma, figma auto layout, absolute position figma, carousel, figma hover effect, figma prototype tutorial, figma animation tutorial, figma scroll animation, smart animate figma

Id: X5fHJqbmxrs

Length: 23min 10sec (1390 seconds)

Published: Sun Dec 25 2022