Figma animation tutorial: Add to shopping bag | Figma Smart Animate | Website design in Figma

hi guys today in this tutorial we are  going to show a how you can create a short   demo of an e-commerce website when you add a  product to a shopping bag and another product   a after it so we're going to do the demo for  two products and see how this shopping bag   has the number one and two when you add them  and by the way this tutorial was requested by   Maryam one of the subscribers uh yeah it took me  some time to get to it and i apologize for that   yeah i had a rough week but anyway that's okay so  uh the important thing is we got to it at the end   and uh so this is what we're going to do so uh i'm  clicking add to bag and then i see this shopper   shopping cart sorry uh shopping bag more right  to say card bag anyway same thing opens and   then i can close it okay and i can open it again  and i can remove it i can add the product again   i can add another one clicking here adds another  product i can remove this product i can close it   i can add another one here close it so you see  we're kind of like giving all the combinations   and you see that the numbers here change if  i remove this product it changes to one if i   remove this product it empties the shopping bag  so basically this is what we're going to create   and the way i did it is i made this whole thing  sticky so if i am scrolling the website again   of course that's a demo website that i just  made from illustrations i mean my illustrations   uh i will give the materials as  well as well so you can download   the materials of this website so you will have  it so even when we scroll still we have the same   actions happening here and we can still use uh  what we did here and again as i i'm always saying   we are demoing a behavior we don't have to do it  from uh for like uh i don't know five or six or   ten products we do it for one or two we show the  behavior and that's what's important and that's it   by the way of course the designs i mean you will  do it according to your designs and your needs and   each one of course will take it to where he needs  to take it with his designs okay so basically   that's it so let's get to it um okay so i'm gonna  go here i just did the the um page a bit longer   and i added kind of like a demo footer uh kind  of like more to give it of a let's say a website   feeling and i i'm not going to focus on all  the items and paginations and the filters   and stuff like that i'm just going to focus  today on the shopping cart i mean how to do   all this interaction what i showed a minute ago  okay so the only thing that i brought here is   as i said this page of course with all the  items uh inside it and uh i have this icon   kind of like this part uh which will sit actually  instead of this one okay and actually i can remove   this anyway so it will sit instead of it and i  already i didn't want to waste time of kind of   building this but you will you can download it and  you will have it and it's a very simple structure   i did use auto layout by the way new features in  auto layout i mean mostly it just looks different   but the behavior the basic behavior of auto layout  didn't really change except a few improvements   which were which are great by the way but  i will cover it i guess in another tutorial   anyway the structure is i have this shape here  and there's this one item and the x and um   anyway this is this is a frame just that holds  this illustration with product name price etc   uh we have a divider which i need to call it  basically let's call it a separator and uh   you have the total price here buttons and  etcetera that's it basically it's quite a basic   uh structure and let's see how to start creating  uh our wanted situation okay so i'm gonna take   this icon i'm gonna work by the way also with  component components and variants and if you are   not familiar with that so please i have other  tutorials i definitely suggest you check them   out components and variants i will put links also  in the description uh or there will be links more   right to say in the descriptions of this tutorial  okay so you definitely should go ahead and check   them so shopping bag icon i'm gonna give it a  slash default and here i'm gonna duplicate it   i'm just gonna call it one i think  it's just simple and straightforward yeah that's one and uh what i will do now oh the  number one is here already i see i put it there   okay good by the way so this is kind of like a  white number one so you don't actually see it   uh and now i will give this one a black  background and this is already one so that's   just a shape there's a number here you see that's  a number one it's there um and this uh is a bag   white uh background and black background okay  so that's good i'm gonna duplicate it it already   increases the number to two and i'm going to hit  here number two and that is enough and fine for us   for now um and i will create a component set  which looks already like that so we have the   shopping bag icon and we have number two  one and the default or we can call it zero   basically same thing okay now this one  this icon i will put here okay i will paste   to replace and i will just replace it and put the  component here because then i can change it easily   and use that with this shopping bag and this  one's actually i'm gonna put it together   okay now the reason that i am putting it together  and not separate and not having just interaction   between the variants but i prefer to do it  between screens because i want this behavior   that when i keep on scrolling and this is on  fixed position it's still going to function   properly and i already tried an experience  and know that uh that with just interaction   between variants it doesn't work very well it  flickers with the fixed position and anyway i'm   giving you just according to my experience the  best way to do it of course there are always   different ways and more than one way to create  something i'm just giving you my version of it   okay good so let's uh auto layout these two okay  so i have here this is called uh five plus cart   so these are these two icons and um the structure  is that these are both in an auto layout and i   just uh as you see it's aligned to the right  and i just made it uh i made it longer that   when this one actually um goes up it covers it  properly but actually it doesn't matter that much   just keeping the right structure because this  is going uh into their own frame i guess yeah   so you know what i'll do something like that  let me see this is wait okay this is the   bag with items so that is all that and i'm gonna  auto layout them and that's okay um it already um   it already understands that it's aligned to the  right which is good that's a new thing by the way   because before the default was that so uh here i'm  gonna give it a padding i'm gonna open this one   and this is the right side padding and i'm gonna  put them like that because i want this pointer to   point to the shopping bag that's the reason for  it and here i will give it a zero okay so now we   have it structured like that this is good and  i will call this one let's call it a shopping bag uh yeah that would be a shopping bag and  that's it uh shopping bag plus sorry plus icons   i always give it names that i understand exactly  what's there and this is a good way to do it   um okay so this is one i will duplicate that  and now i'm going to give it the um actually   okay so you know this is gonna be the zero items um this is going to be no this  is going to be actually yeah   zero items okay zero items  and the zero items anyway is yeah so you see by the way look um i  want to explain something now this uh   bag actually is aligned constrained to the  bottom of this auto layout okay so uh when   it's like that i can if it would be like that  okay aligned or strained to the top so when i   uh make this frame smaller see it happens  something like that i mean it doesn't really   take it up you just i can just close that frame  and hide them okay but while i want to do i want   to create this animation of going up and down  so i'm aligning it to the bottom and when i um   actually make this frame smaller you see you  get something like that so that's the idea   and i want to make this frame let me see uh  back with items i want to make it opacity zero   okay so this is actually collapsed here in this  situation we already have we i'm going to use   these variants now and we will have one because  this is already one item okay so this is the base   and the start of our variance so this is going  to be actually this is zero items and this is one item okay you can give name to variants after  you create the component as well and the component   itself sometimes i just design the frames before  i make them a component set and already give them   the name this will be the name of the component  itself before the slash and the name here will   be the name of each variant the name after  the slash so component set and we are getting   now this one okay now let's make it bigger one  second let me click this one and this one uh okay and now uh i will actually i will  take this one and i will duplicate it okay and i will uh but what i did is  actually i have this this one already   collapsed to the top you see it's here so i'm  just uh selecting now the one and what i do i   want to do in this variant by the way let me just  put the shadow look here i have a shadow which is   12 percent and 20 bluer and the y position is  like that meaning the y position of the shadow   itself and here not to get kind of like  flickers in the animation i want to give this   um this shadow opacity zero already from  experience i do know that that's what happens   yes so anyway let's do like that this  one is going to be one item expanded and this one is going to be one item collapsed okay one item collapsed one  item expanded great and now uh   the second thing that i will do  is connect this x when i close it i will create an interaction to this part now to  this one uh on click change to let's give it a   smart animate uh 300 milliseconds i guess it's  okay we will see how it goes in the animation   and decide exactly if that's what we want to do  and when i click this icon i want it to open back   this okay so let's give it a test drive and start  uh see how it goes so i'm going to copy this one   i just made it bigger because i'm going to add the  second one here as well and uh okay so now i will   place it actually here i will put it in the where  it needs to be and you know what i'm thinking now   yeah you know what i'll do it like that i will  make this one by the way i do want to make it   at the height of that header so let's see the  height is 84 okay um now these are in auto layout   okay so no problem to do that i will make it  84 so that will be like that yeah that's okay   and this will be as well um let me see now that is okay and this will be 84 and it's here okay  that's fine and this one will be also 8 4.   okay good i think it's gonna  work better by the way um let's see if it's too far i will i will  let's see exactly how it goes okay so great oh but by the way i don't  want to have it inside the header   um let me see this is the header  no i want it on top of the header one second oh sorry this one yeah i wanted outside  the header so i'm gonna have in the fixed section   i'm gonna have this situation um this is  going to be on top and it's going to be here   um yeah i think that's okay  i will duplicate the screen i just ctrl d which duplicates the screen with  everything it has in it and in this screen by   the way i will use the one item expanded so  we're gonna have this one it's already here   so that's fine but yeah but now i see that that  bothers me i mean i don't like this situation   it doesn't look very well and that's not what i  wanted anyway no problem we will go back to this   component and we will fix it let's give it a minus  we can now give it a minus that's by the way part   of the improvements of the new auto layout i mean  i could do it before only on space between and   only when last one was on top which was making me  actually really crazy sometimes but now they fix   it that you can change the direction and you can  also do it not only when you're in a space between   um space between mode on the auto layout anyway  i'm not going to get into it too much right now   but that's the way it is okay so uh let's see how  the animation happens now i mean what i'm doing   here by the way if you're not so familiar with  the autolyo let me just say a word about that   you can also do exactly all the things that i've  done here without an auto layout i mean the auto   layout is not a must for this whatever i'm doing  here for its success and it doesn't it's not going   to make it work or not it's just easier to work  like that okay so that's my point so if you're   not familiar with auto layout so that's okay i  mean whoever is watching this tutorial of course   uh i mean to anyone who's watching this tutorial  that's what i meant so anyway let's go ahead and   now yeah it's it's perfect so that's the way i  want it and i will duplicate that screen because   we want another screen uh with this situation when  it's collapsed okay so now i have them all again   i am not doing all the interactions between  the variants because as i told you it's not   going to behave very good anyway so this is  a better way to do it let me just give some   space between these screens and okay so what we're  gonna do now is we're going to connect this button which will lead us to this  screen and open the shopping bag   smart animate 300 milliseconds yeah i  think it's okay uh now here by the way   so the x will lead us to here and this one this  icon will lead us to the situation where the   shopping bag is open so this is how we're  going to uh go in between these situations   um yes i think this is good okay let's give it a  test right and see it works let me close this one okay um fit with let me see that i don't know i don't  even know if i open the right one yeah this one   because there were a few open so i  want to make sure that i'm on the right   one okay so this is uh fit with okay  and okay so let's hit this button   good we have this shopping cart being opened  let me just close the figma ui and we have it   closed and open it works perfect okay great so  we already have the first part done great so now   it works perfectly uh and that's very good and  we're gonna go and create the second one okay i like things organized on the screen you're not  kind of like messy but anyway something like that   of course by the way i'm just saying if i  wanted to create the third one so i'm gonna   make i mean i would make just another icon here  and make it three okay so basically that's it i   mean using these icons that's what i mean and  now what i want to do is i will have this one   duplicated i'm using just the alt and in mac  that's an option i am a pc lover so all you make   lovers sorry i'm talking uh in a pc language but  whatever i say control in pc of course this is a   command in mac so that's okay i mean most of it's  like the same thing um and let me just create now   the other um the other shopping bag item so the  other shopping bag item uh let me see this one now   this auto layout uh it's in hug content that's  okay and this one is fixed i'm gonna give it a   hug content as well um i think that should be  fine okay double click up and we have another one   so you see this is when you're working with auto  layout these actions actually it makes them very   easy and quick and the only thing that i need to  do here by the way is i'm gonna select this shirt   and give it the second one color and that's it  of course as i said in your designs you will just   change the images here you can also make here  on the side if you want to work properly with   variants you can take an image and give it a few  variants for you to be easier to work by the way   you can just when it's an image you can just it  doesn't matter that there's a different one on the   component i'm just explaining that you can use  this component in any screen you want and just   select this image and change it to another image  that's okay i mean the behavior of the component   is not going to get damaged that's okay that's  no problem there's no problem with that um okay   so now uh we will also do the same action actually  on this one i'm gonna give it proper names as well   uh this one will be uh named where is that  okay this will be uh how did we call this one   uh one item expanded okay so this is  gonna be of course two items expanded okay so two items expanded and this  will be let me copy just this one and this will be two items collapse which i will  do it right now i'm just giving it a name okay so   that will be the collapsed one and the collapsed  one i will do it here i'm bringing it back to zero   okay so that's going to be like that and the  reason i'm doing that is that i don't want   the bag to collapse look here i will explain  that uh when i open it you see it comes to here   and when i collapse it it doesn't go like  again to this uh to this because when i open   it you see this is the end of the component  i want it to be collapsed when it's already   here and not here because it just doesn't  look so nice so anyway looks better like   that so that's the reason i'm doing that um and  now what i will do let's see that okay this is a   aligned to the or constrain more right to say  to the bottom and i'm gonna do the same thing   like that and i will make its shadow zero  and i will make this whole frame actually   zero like i did there okay so we are from one  hundred percent uh opacity to zero and again   zero on the shadow as well it's important  it flickers i just know it from experience   yeah and one thing that is still left to do  here is uh yeah i need to change this one to   two items because now we have here two  items actually uh this color as well   um i'll change it and this is going to be a dirty  blue i don't know why i call it dirty orange   oh yeah because it's kind of like anyway so dirty  orange and dirty blue is gonna be our colors   are going to be our colors and that's okay by  the way i do have to change it here as well   yeah open it again the million dollar question  okay let's open it again that's okay um let's see   let's fix it not to have kind  of like a strange behavior there okay so you know what let's make it  easier i'll just duplicate that   instead of getting messy with the other ones  oh sorry um yeah i'll just redo it quickly   so that is um our second one that we actually  named it copy sorry for doing it again i will   do it again very quickly and that is going  to be collapsed we will give it now a 0 and   take this one actually yeah we'll take this one  and we'll do it we'll give it a opacity zero   and also the shadow as i said is going to  be zero and we have it set okay good so   now we can actually duplicate let's see what  happens here this okay so we have this button   and uh we have it removed so that works great  and this one works perfect okay good so that part   we got covered and now what we will do  actually is i will duplicate these two screens   i will take them to here good and we'll just have  to hook them all up to have it up and running   so this one actually i will take the two  items expanded here and here it's going to   be the two items collapsed which is good  okay and now uh we're gonna have this one   this button actually taken us to here and i will  give it a 400 milliseconds now because it opens up   a longer item okay so when you animate you have to  take under consideration also the i mean how big   is the item that you are animating to or with  so here this item is shorter so i give it a 300   milliseconds when it opens and here this one is  bigger so um i'm giving it a um i'm giving it uh   sorry uh 400 milliseconds okay so that's okay  and this one the remove i'm gonna hook up to   here this one actually can be 300 milliseconds and  that's okay that can be a bit shorter and um the x   is already hooked up to here uh i will give it  a 400 millisecond the interaction actually came   from here okay we already have it here so when  i copied i duplicated the screens it duplicated   with duplicated it with the interaction as well  but i gave it a longer interaction because now   we are closing as i explained a longer item and  here as well the same thing i will give it a   400 milliseconds uh in my opinion basically we  are all done i think so okay so we have this one   and we have oh sorry i just  need to hook up this button   from here as well okay good so we can give  this option as well from here and now okay   great we have this uh second um second  product opens and it also we can remove it   and that's great we can remove this one  as well and let's go again we will add   i'm going to close it and let's add another  or another item here and it opens both of them   uh i can remove that i can close it i can add it  from here i can close it here collapse expand it   as well um i see that the shadow kind of flickers  here it doesn't i don't know sometimes it behaves   a bit funny let me just check it for one minute  i think i did by the way um let me see the shadow   where was it yeah the shadow i did give it a  zero opacity yeah sometimes it kind of flickers   a bit yeah it doesn't perfectly animate shadows  sometimes that's the way it is so you know i'm not   fighting with it too much uh you just have to get  used to it but sometimes it's a bit annoying um   and this one yeah but practically it works great  and that's about it i guess guys so everything   is ready and as i said uh the reason that i did  it the animation between screens okay and not a   all only interaction between variants is that  i have it to i wanted to work properly also   when it's sticky these are sticky and i can  still interact between these screens and it works   really nice and when you show it to someone so  they just see the prototype and it looks great and   we did a good demo for what we wanted to create  so that's about it guys uh i hope of course uh   this tutorial was helpful and it was practical and  of course i would be very happy for your like and   and would be more happy if you subscribe to my  channel cool tutorials are coming up ahead and   uh thank you so much for watching it  bye for now see you in the next tutorial bye for now bye-bye

Channel: Yariv BE

Views: 24,137

Keywords: animation, create ecommerce website, e-commerce website, figma, figma animation, figma animation tutorial, figma components and variants, figma design, figma prototype, figma prototype tutorial, figma smart animate, figma smart animate tutorial, figma tutorial, interaction design, shopping bag animation, shopping cart animation, ux design, website design figma

Id: SXj7nMidSSw

Length: 34min 50sec (2090 seconds)

Published: Sat May 14 2022