How to Set Up an Animated TICKER TAPE For Your Website in Figma (Animated Prototyping Tutorial)

in this video we're going to be creating a scrolling ticker tape in figma this is the final result and the great thing about this is that it keeps running on its own in a loop in Prototype mode when you're presenting Your Design you can also easily change the content thanks to the structure of this component and if you'd like to save time and download the source file for this make sure to check the link in the description that will take you to my store and now let's get started with creating this animated component so the first thing I'm going to do is Define a frame that will be a placeholder for our page right so this is going to serve as a page a quote-unquote that we're going to paste our scrolling ticker tape into right so let me just create a frame that is 1600 by like 1000 or so and I am going to rename this Frame to page um actually let's make that 1440 so that it fits precisely on my screen and the typical scenario for this is usually when you have a page like this and then you maybe you want to promote a an ongoing summer sale or some specific offers something very you know time sensitive and maybe um limited edition or unique so for example let's say that this would live directly on your home page and if we were to place this element that would go somewhere like around here right for example or at the very top depends on what you prefer and here would be some text maybe with links running through through your page so with that in mind of course this component is going to be rather wide so it's going to be a frame that is as wide as this screen and it's going to be like very very short and I'm going to create a frame using my frame tool by pressing F I'm going to create a frame that is the same as this page right oops as this page so that would be 1440 and I'm gonna type that in right here and then then let's go for like 80 90 in in the height also that's you know up to your preference and I'm going to rename this Frame to ticker tape content right so this is going to be the content and I'm going to turn this into a component so that um you know this can be replicable and the reason why we want to replicate this is that we want to actually use an instance of this so I'm going to go to assets and then under the current page name I'm gonna use an instance of this on my page so of course if you're familiar com with components you should know that when we change a color for example in here now this updates across all these instances which in this case is just this single one right and by the way if you're not familiar with components make sure to check out my channel where I did multiple videos on components and instances and how they work it's essential to understand figma to its fullest extent and yeah so with this component instance on my page I am going to take this and then press I'm going to select the instance right so this is the instance I'm going to press command option G which will create a frame around this component instance and because this component instance is 1440 by 90 that's going to be the size for this new frame and I'm going to rename this Frame to ticker tape and then I'm going to turn that into a component right so what's happening here right now is that we have a thicker tape content component the instance of which is placed within a thicker tape component right you can see the structure right here so this means that whenever I update anything in this area you know in this component like adding some objects and Tech specifically this is going to be reflected in this component as well because this component currently the only thing it contains is this previous component instance right so I hope this is making sense uh if it isn't make sure to leave a comment below with a time stamp now that I have this I'm going to actually select the ticker tape component by the way this line is is here just to for me to see where the tickle tape Begins the content where it begins and when it ends so I'm going to select the ticker tape content within this second component I'm going to duplicate that right so now we have two and then I'm going to move that all the way basically outside of the frame but only basically right so keep in mind that whenever we move something outside of the frame it can still be within the frame logically but outside of the frame especially if that makes sense because then if we move the frame all the components in this instance then we move this as well even though it looks as if it's outside of the frame right so that's also a very important concept so make sure you understand that then I'm going to move this closer together and so close actually that it touches precisely so that there is a zero pixel 0 point distance from the right edge of of this right so now let's recap what do we have here we have a ticker tape component containing two instances of the ticker tape content whenever we change ticker tape content this is going to be updated here twice okay so hopefully this all makes sense and what I'm gonna do next is actually I'm gonna select this second component create this Plus on the top okay so add a variant this variant is going to be called end because the end of the animation and then the first one is going to be called not default but start so we have two variants one of them is called start and the second one and and I'm just going to change the property of this the name of the property to position right so just so that we know where this actually is the next thing I have to do is actually select the end variant press enter to select both of these instances and then under X in the frame section I have to move this to the left by 1440 right so what I'm trying to do here is position this second instance to the same position as the first instance currently is and because that's precisely 1440 to the left then we have to subtract 1440 from the mixed value that we have right here so with this field selected I'm gonna type in minus 1440 and this is going to move both of them to this new position right so if we just zoom out a little bit if you just make this bigger so that we can see all of this here's what's happening right in the first state you have to also two instances but it's aligned to the left and then the second one it's aligned to the right okay if that makes sense so now what happens if we select both of these variants and select clip content they look absolutely identical and that is no surprise because we have simply used the same component twice and just moved it right so we move to the second in and the first one out so now it's no surprise that these ones are actually identical okay now let me start creating some content for our ticker tape so I'm gonna just use my text tool and type in limited I'm going to use all caps because this is serious limited time offer 50 off on everything okay and this is going to be a Roboto mono actually right I like how this font actually looks and it's going to be bold and it's going to be smaller it's going to be like um 28 and so you can you can put in whatever whatever you need this is just me putting in something right so this limited time offer 50 off on everything we could make this even more prominent by underlining it for example or just highlighting it in some specific way that I haven't yet uh thought about like let's say a circle let's just let's just make it encircled right so I'm gonna create an ellipse add a stroke that's going to be like red and it's going to be placed over the everything word okay and this is going to be and it's going to be first of all it's going to be like bigger like this and it's going to be an angular gradient okay just to make this a bit more interesting and basically just you know messing around at this point so I'm gonna move I'm gonna move challenging I'm gonna move for this this part points that we have here is gradient points around this area I'm going to make these two transparent I'm just going to extend this all the way here and then all the way here I'm pressing alt and then dragging yeah so now this word looks specially uncircled basically I guess right so don't think too much about it it's just to have something interesting on on our thicker tape okay maybe we want to make it white because this looks really weird so instead of red let's go for white would that look better yeah let's go with this okay so everything is 50 off obviously this is something you want to be visible at all times across your whole website then I'm gonna press duplicate this text and add a bullet point whoops it will point and after that I'm going to duplicate that again let's say use use discount account code all 50 at checkout okay so we have to move this a little bit closer together maybe make the font even smaller let's go for 26 with these two as well 26 right so we have our ticker tape content and now we need to actually animate this you want to make it move everywhere so I'm going to select the first variant the start variant and then I'm going to go to prototype and connect the first state with the second stick right so that's going to be after delay one millisecond change to position end and it's going to be smart animate right linear but here's the trick this is going to take 7 000 milliseconds right it's going to be very long on purpose just to make it run across the screen in seven seconds then I'm gonna select the second state and I'm going to connect that to the first state right and I'm going to say after delay one millisecond change to position start and this is going to be instant okay this is going to be instant so what did we just do so we basically told figma that hey you're going to start here and then immediately after being in this state after one millisecond you're gonna start changing towards the second state and this is going to be smart animate which means that whenever there are two similar objects you're gonna you know move them across the screen there's going to be animation and and this transition is going to take seven seconds okay so that's first part of the instructions for figma and the second part is as soon as you arrive fully in the second state you wait one millisecond and then you instantly change back to the first one but then when you get back to the first one you immediately after one millisecond you start changing to uh the second state right with the animation and as you can see you probably Now understand why actually this will keep on going right because we have created a loop an infinite Loop using the after delay interaction with in combination with smart animation so now let me actually go to assets and select not the ticker tape content but thicker tape right be very careful about this and I'm gonna place the thicker tape component onto my screen and I'm gonna Center it I'm gonna put it right here and then I am going to launch the Prototype and here it is Here's the final result so as you can see we're on the page and this just keeps on moving until Infinity basically so this is just animated you know it keeps running wherever I scroll it's just you know we have created a loop so that's why it keeps going and then then let's say that we want to remove the circle from this right so we decided that it looks bad so I'm gonna just go over to ticker tape content and then I'm going to remove this and maybe we also want to make the interaction a bit you know the animation a bit slower so let's go for 10 000 milliseconds instead of um seven I think that's the highest you can go with Sigma and then you can see that it it's being slowed down right we have to press reset R so now we just without the circle and then also it runs slower let's say you also want to create a second ticker tape that's going to be like yellow right so let's just we can just duplicate the second one right so we're gonna call this thicker tape two and we can just change the green color to Yellow right so the green color is going to be yellow now and if you wanted to also change the text for example or change this completely you'd have to duplicate this component as well which probably means creating variants and then moving you know duplicating that because duplicating at this point with this component just creates an instance you know we would have to do this and then and then this and then you would have to place these inside of the second one so we're not going to do that you know for now let's just keep that simple and so if we wanted to use second ticker so let's second tape let me just duplicate this one and then go to assets and use ticker tape 2 and place it right here maybe just to make it a bit more interesting let's just do this just make it you know tilt it and then the second one as well and place it right here and then you know maybe make it even larger so this is impossible to miss lens launch the product type and see what we have created and this is it right so we have two types of you know running ticker tapes and uh well I'm getting dizzy so I don't recommend doing this but there is one thing that I guarantee nobody will ever miss this nobody visiting your page will ever miss this so um use an element like this with caution because the attention it grabs is you know a lot you know use it use it wisely um and yeah so using after delay interactions with smart animate you can create looping animations in figma this is it if you'd like to download the source file for this make sure to check the link in the description that will take you to my store and yeah if you if you found this video useful leave a like if there's anything unclear make sure to leave a comment with a timestamp so thanks for tuning in and I will see you in the next one

Channel: Mavi Design

Views: 8,521

Keywords:

Id: gYmTW4oiDZA

Length: 15min 19sec (919 seconds)

Published: Mon May 08 2023