Figma for Education: Animation basics in Figma

hey everybody how y'all doing there today my name is Mickey this is gonna be the figma for Education animation basics thanks for joining our webinars today I'm also joined by Alex and Lauren um so feel free to say hi to Alex and Lauren uh please use the webinar chat to uh talk with us to ask questions so when you go to the chat make sure you set your chat to everyone so then that way we can all see and let's begin with just a quick Icebreaker while we let folks continue to join the webar webinar uh so yes this is a recorded webinar I'm going to let y'all know that this is going to be recorded uh folks ask that all the time so I would like to make that a zombie present as possible hey how's it going um so you know while we get started I usually like to ask where folks are joining us from so I am joining you from Rochester New York it's a bit cold and damp here here normally it's snowy but I would love to know where you are at and what's the weather like today let's ask that today what is the weather like today so Bay Area we got uh Rio de Janeiro uh so we got some folks dealing with snow we got folks in Serrano Portugal it's freezing Brooklyn Colombia New York Brazil Lagos Greenville Chicago oh it's so real it's great to see how many of their of you there are as mentioned this is going to be animation basics um you know I found this this fun little flippy animation uh so we're going to be getting into some of the Nitty Gritty on on how to make some fun things in figma uh this is figma for education so we're gonna have more of an education lens on things thinking about the use cases for educators for students for teaching figma for teaching animation and just having available tools to be well-rounded and understanding design and those kind of principles so just a little bit of housekeeping before we begin today this Workshop will be recorded and it will be sent out to you afterwards so if you've registered and you're here today you are also going to get an email from us with a link to the recorded demo so if there's something that you might have missed that you didn't quite catch you can review and you can learn these Concepts and we can learn together make sure you set that chat to everybody so everyone can see what you're saying not just the hosts and panelists so there's a few of you chatting I see Las Vegas Sunny 42 degrees so let us know where you're coming from so hey Honduras how are you doing we got Vancouver in the house so set that chat to everyone so everyone can see the questions that it is you are asking so many of you are just chatting directly to us we'd love to see it but let everybody else know you're here as well um also we would just kindly ask that you refrain from posting LinkedIn accounts from posting any links in the chat please do not do that this is not the space for it by joining this webcast you are subscribing to figma's code of conduct in some we would like for you all to be kind to one another remember everybody here is coming from a different background a different skill level we are all learning together so please be kind uh if you want to see more about figma's code of conduct you can check it out there and once again this is being recorded so I'm just going to drag this around so you know you can be reminded of such all right so a little bit about me let me bring down the recorded component there we go it's a little bit of a joke all right but not really it is being recorded for real um my name is Miggy I'm a designer advocate for Education those of you who may be joining and say Miguel Cardona I've heard of that name the in the U.S the secretary of education has my name he may be my third cousin nobody knows so uh you can be reach me at Mickey figma.com also be sure to email us at education figma.com if you have any questions regarding education verification the education benefit with figma we would love to know and help you out with that uh this right here is a little photo booth widget so I'm just gonna throw in a little you know hello there normally when we're doing this oops there we go got me mid conversation normally when we're doing this when there's fewer folks on the web stream we would invite you to join us in this document but because there's so many of you joining us here today uh what we're going to do is share with you a community file so if you want to follow along if you go to figma.com education you can oh hey Alex how's it going it's good to see you um so here check out figma for Education Basics so you can go to figma.com education this entire file that I'm going to be demonstrating today and walking you through can be found right here so feel free click on that link you know you can get a copy of that file let me show you one more time when you go to this page you can get a copy when you get a copy if you have a figma account already you will get a duplicate of this copy in your frigma account and it'll include all the different pages and examples that I'm going to be covering today think of it as a start file Okay cool so now that we've covered that a few other things if you're looking for more you know content that I produce and tutorials of figma you can also check out my Tick Tock Professor figma or my figma template profile my community profile figma.com all right so a couple quick things to figment fig Jam are free for students and Educators it's a three-step process you're gonna sign up for figma you're going to verify your education status so you come here you get verified It'll ask you a few questions it's going to say what school do you teach at you know what is it that you do and then once you are set up you can create an education team so an education team if I click right here this will walk you through all of those steps on creating an education team you want to make sure that you make a team because it will give you the opportunity to collaborate with your students and use Advanced features in figma such as audio chat videos and prototypes as well as creating reusable libraries and these will be topics that we can cover at like a later time so feel free if you're just joining us check it out uh you can go ahead and download that file so once again you sign up for figma you verify your education account and then you can set up your education team when you go to create a new team choose professional and then make make sure you just check off at the top that you are an educator or a student so we're going to get started this is figma for those of you who are brand new and who may not have used figma for before we're going to cover just a few Basics just so you can understand this interface it could be a little bit overwhelming at first but I want you to feel comfortable in this space the best way to learn figma is just to have something to do in figma and we're going to give you plenty to do today so once again up here in the top left this is the main figma toolbar if I click on this main menu I can access a bunch of functions within figma itself this quick actions menu is something too that I'm going to discuss in just a moment when you can also use a lot of tools that you're going to be accessing here that we're also going to discuss shortcuts for such as creating frames creating shapes using the pencil to make Vector shapes if you're familiar with other other design software some of this will be familiar For You especially if you are you know first time in figma and I can see that we have some folks that are brand new so try not to feel overwhelmed just take a little bit at a time I mentioned here the quick actions shortcut I'm going to show you the quick actions shortcut because it allows you to access so many features like if you forget something you can type it into Quick actions so I'm going to press I'm on a Mac so I'm going to press command P but if you're on Windows you can hit control p and it's right here so command P or control P it's also command forward slash or control forward slash the reason I use command peer control p is because it's a little bit more suited for international keyboards so now when I hit command P I can type in anything so the first thing that I type in I'm going to type in keyboard shortcuts so keyboard shortcuts are a great way to optimize your use of figma to learn the lay of the land to feel comfortable using the tool to get faster and more optimal so I'm going to type in keyboard shortcuts and it's going to bring up this little menu down here at the bottom of my frame so you don't need to be in figma right now you can just watch me you can watch this recording you can go over it later but if you are open in figma right now you can type in that shortcut so once again I'll show you command forward slash and type in keyboard shortcuts there you go it's a toggle so it'll turn on and off and so down here it'll cover a bunch of the essentials and then as I type those out let me find one here we go so as I type these out I will see them light up so I know which shortcuts I've used and which shortcuts I haven't this is actually how I got really good at figma was just understanding what I could do so even looking here in the text menu I can see that oh okay so I could bold my text I could underline my text oh I can create Links of my text I could do strikethrough I could turn it into a bulleted list right all of these shortcuts not only increase your workflow but also help you under stand what you can do with figma so if I was to move over to like the shape tools I can start to see what is the lay of the land right and one fun shortcut that I like to show people who typically don't know is like this joint selection and smooth join selection when I first joined figma I showed my manager this and he didn't even know it existed so learning the keyboard shortcuts in figma is going to be a great way to introduce anybody else that you're showing figma to like learn figma yourself if you're working with students share it with them and the thing that I would like to highlight here is that everybody sees their own shortcuts so if I was on Windows if I was on a Chromebook I would see the shortcuts specific to my operating system and if I was working with folks so I have folks here from Spain if I click layout oops uh here we go let me pull that back up if I click layout I can choose a different keyboard layout for my shortcuts so if I was coming from Spain I can go here and I can click Spanish and then I will get all of the Spanish shortcuts in my keyboard menu so this is really helpful I know a lot of folks were unaware of this feature but we want to try to be as inclusive as possible and as accessible as possible with figma as we develop our tools so I'm just going to head back over let me go back to us QWERTY because that's me awesome I want to make sure that y'all are getting this this this deep down information that might be kind of hard to find a couple quick things you may see me navigating and whizzing around this canvas uh I can zoom all the way out I can zoom all the way in one of the great aspects of figma is that you have this Infinite Canvas to drop images to drop shapes to create illustrations to create prototypes right figma provides you this space it doesn't bound you down doesn't bind you down to just like a very specific frame and lock you in there so to get comfortable using the space you could either hold the space bar and drag if you have a mouse so I hold the space bar it turns my cursor into a little hand I could drag that around or you could do two finger touch on iPad on your touchpad you can also zoom in and zoom out there's a number of ways to do this I'm holding down the command key while I scroll but you can also pinch on the touchpad and you can hold the commands key while scrolling or hit command plus Control Plus control minus so knowing these two things is like half the battle how to pan around the canvas how to zoom in in and out of the canvas those of you that are figma Pros you already got this so a couple other things I'm going to refer to certain interface areas the layers panel over here is on the left just above that you notice there's a bunch of pages so if you're looking through this file I can click on all of these Pages Pages come in really handy when you need to differentiate the work that you're doing when I was teaching classes at the Rochester Institute of Technology I would teach design courses with my students we would work together in the same file and I would have students create their own pages with their own names so then that way I can go Page by page and see their work whenever we were doing an activity together so pages is going to be a fantastic way to allow and give folks their own space to work if you're working together or to section out your content so I actually knew a teacher who had an entire figma file as a course and every single page was a different lecture for a different week okay a couple other things here figma is collaborative by Nature so uh if Alex is here Alex how are you doing are you here hello there there's Alex so figma's collaborative in nature so you can work in real time with people uh you know I draw a rectangle on the canvas Lauren is here as well hey Lauren I could draw a rectangle on the canvas and now Lauren can resize it so like Lauren can click on it can resize it so figma's real-time live collaboration at your working so Alex says let's make it a different color let's make it a different color Alex can rounded the corners so it's really fun and engaging when you work with others in the file granted there's tons of you right here right there's about uh there's hundreds of you in this this Workshop today so normally I would say if there was about 50 of us we could be in here even if there was 100 or 200 of us we could all be in here but there's a lot of y'all and I don't want to be exclusive to anybody in the chat today so to share that all you need to do I can share this link I can copy that link out um in the share menu I can choose who has access to it so I could say anybody with the link anybody with the link and password so I can password protect these files or only people that I specifically invite to the file what their names can have access so these are just some of those Basics and I want you all to feel comfortable knowing how that works lastly there are a bunch of file functions up at the top here of the window so things like seeing the version history as long as your file is in an education team you get unlimited version history so you can go back all the way to if a files existed since September 2021 you can go back to September 2021 and see what students interacted in the file at that time you can also do things like duplicate this file so I can just have a new copy of it right then and there everything is just stored on the cloud instantly available you can rename the file and you can move the file to a different project the way that figma works is in our our file browser we have projects think of those as your folders so uh One keyboard shortcut that's going to be important for us today I know it's already 15 past so we haven't really got into prototyping but we're going to start off is going to be shift e that tool is going to give us the opportunity to go between what is the design panel and the Prototype panel so we're going to be doing a lot of prototyping today so I want to emphasize the shift e shortcut it's going to allow you to swap between design and prototype also I'm going to be creating a frame in just a moment so frames are going to be the way that we're going to house our content the shapes that you create the images that you use anything that you're putting the way that you're going to house it all is going to be inside of frame and once we begin animating we're going to be dependent on those frames so if you think about when you animate you know you're you're thinking the sequencing of visuals we're going to use those frames there's going to be a number of presets once you create the frame you can see those presets and those presets exist for everything from an iPhone all the way to press presentation slides all the way to print documents so we'll be talking about the frames and those presets and these are regularly updated as new devices become available all right cool so uh let's I'm gonna scroll down here I'm just going to show you a few quick things in figma so the shapes are right here right we have a rectangle we have an ellipse and we have a polygon these are going to be important because I'm going to use these Primitives as things that I'm going to animate what's really cool about these is when you select it and you're in design mode you have properties over here that allow you to manipulate its various properties so I select the shape and then I can change things like the color I could change things like the size and so you're changing the properties of these objects so when you're animating you are changing these properties across frames and across time so let's do this one too what's really cool about the polygon tool is you can use it to create all manner of different shapes and this is what is referred to as a non-destructive operation I'm selecting this little Dot and I'm increasing the number of edges that we have here those properties can all also be changed over here so being able to access that geometry and work with it is a lot of fun also these tools have fun little secrets so the circle tool here has the arc so I can actually create some very interesting kind of like pie chart Graphics I can even make it into like an activity ring so what's great about these is that these are non-destructive features until you flatten them actually Alex who is in here was the first person to show me how to easily flatten objects for my tutorials so here we go I'm going to even rotate that and I could change these values so working with those shapes now I mentioned before frames when I press the F key I can draw out a frame so this is a frame this is frame 1949 you can see I have a lot of frames in this file all you need to do is double click it and I can say frame one I can give it a name I could call this Frame let's say all right this is Lauren's frame so I can put that name there all you need to do to do is change that when I grab a shape and I add it to a frame it's going from the canvas into the frame itself and it is now nested inside of this Frame isn't it a nice shape right I can even round out those Corners there we go now I have that nice shape so the first thing that you need to know is to create a frame to add something to it and then we can duplicate it right so I can go here and hit command C or com and then command V to paste it so your typical copy paste workflow on your machine so if you're on Windows control C control V so control C control V and then I have another copy over here another way that you can copy is just to hold down the option key so the option key on your keyboard you'll see control option command or alt and and control so the ALT key on Windows you can duplicate that as well and as men as Lauren mentioned command D will also make that duplicate so there's a number of different ways to do this all right so let's go into the next section of what we have here we're going to be talking about prototypes once again this is being recorded so you will get an email and you'll be able to follow along there uh so in this file I've also included some resources so if you're new to prototyping and you haven't quite wrapped your head around the concept A prototype is just the testing of an idea right it doesn't necessarily have to be a phone prototype in the in today's examples we're going to be prototyping animation so here if you are looking at the community file you can hit play and you can actually watch these videos that have been provided by figma to help you further go into that and explore that concept so we're going to begin by walking through what a simple interaction is so at this point you understand a shape you understand what a frame is and we're going to show you how to create relationships between those frames to uh basically communicate ideas right so communicate motion so communicate how things move so I'm going to begin here right so I have a start frame and I have an end frame and what I'm going to do is create a relationship between these two I'm going to refer to this thing as a prototype noodle you will only see these when we are in prototyping mode so we're going to create the relationship between those two frames and we're going to create an interaction between those two frames so I'm going to move over here to the right I'm going to press the F key the F key four frames so up here frame if you need to know the shortcut it's going to be right next to it so frame I'm going to draw out that frame and now it doesn't really matter what size the frame is because I'm going to come over here to the right with my design panel I'm going to click on that drop down and I'm going to search for the frame that I want to uh make my design in so I'm going to choose an iPhone 14 to start it's really helpful to use the presets so then that way you have an appropriate sense of scale and how big things are how small things need to be because it's easy to lose track of it when you're zoomed in or zoom out you're like whoa how big is this really use those presets and it'll help you get a sense of what that scale really is so here we go I've created a frame and I'm going to use the shortcut that Lauren shared a command D there we go I have now two frames thanks Laura and I almost forgot about that one and what I'm going to do is I'm going to create a start and an end so I'm going to type start and I'm going to type in end and it's important that you name your frames here because this will help you when you begin working through your process so either numbering them or working through them in a way and I can show you a trick on how to do that in just a moment so I'm going to create a very simple shape here I'm going to draw a rectangle I'm going to draw a rectangle now you'll notice as I move it around within this Frame the frame has kind of snapping allowing me to place it in the center to see exactly where I want it to go so here we go it is now snapped into the sensor and I'm going to click on this next frame over here I'm going to hit paste there and I'm going to have a copy of it right now what I'm going to do is I'm going to just make this larger notice I'm making if I was just to make those larger from the top it just comes up from the top but if I hold down one of my modifier keys so if I hold down the option key or the ALT key on Windows once again that's the option key or the ALT key on Windows I can stretch this out from the center which makes it a lot easier right I don't have to move this up and this down I can just hold down the option key and they both grow out from the sensor and they grow up from the center there uh there you go let me re-center that so now let's say I'm going to change this so this is red and this is going to be blue so I'm going to create this to be a prototype so let's select this first frame I'm going to go over here press prototype this can also be done with the toggle shift e let me go ahead and grab that from up here because I've mentioned this before shift e that is going to allow you to toggle between these two because we're going to go between our design panel and our prototype panel a lot using that toggle is going to save you time I don't bother with memorizing all of the keyboard shortcuts I just think about the keyboard shortcuts that I'm going to need for my work session so if I'm about to be prototyping a lot you know then I will remind myself that shift e is that toggle and it'll save me some time so shift e I'm now in Prototype mode and when I'm in Prototype mode when you click on any object or when you click on a frame you will see that it behaves just a little bit differently the first thing that you will notice when I select this shape is there's this little plus icon that shows up to the right of it what that's going to do is going to give me the ability to create my prototyping Noodle and to choose how an interaction is going to take place and you may be asking yourself well what does this have to do with animation and the thing is is you need an event to trigger an animation or you need an event to have the animation occur between these frames so what I'm going to do um I would like to to please ask folks to refrain from adding uh additional links to our chat so I see that people are asking that if you continue to do so um you will be removed um so here I'm going to take this and I'm going to drag this over to this next frame so what I've done is I've created this interaction Noodle and then I get these details that pop up so over here in this file I kind of explain what some of these details are and we're going to think of the interaction type we're then going to have an event that takes place so is it on tap is it on drag is it while hovering so you want to think of these events as if you're interacting with a phone object or you're interacting with an app on your computer what are you doing what is the thing that you're doing and then what's going to happen as a result so when we're animating we still need to trigger the series of animation and I'll talk about that in just a moment moment and then we need to think about where that's going so the interaction the behavior and then the destination so here now that I click on that noodle I get these interaction details so here I'm basically going to say on tap right so on tap it's going to navigate to the navigate to basically asks it to go to another frame then here end so the name of that frame matters because if you're selecting it from this drop down and you have like 20 frames named frame one frame two frame three you're gonna get lost pretty quickly so be sure that you have a good naming convention and it's a good opportunity to discuss organization with your students or with your classmates or with your teammates so here it's going to go to end and then right here this is how we're going to choose how this goes from point A to point B first let's begin with instant just so we can see how this works I'm also going to select this red one and then have it go back so I'm going to say on tap it's going to navigate to the start and that also is going to be instant so we just have these two arrows going back and forward and you'll notice this little playhead up here that is the flow so any series of frames that we have is a flow so think of your animation as being a flow so I can rename this and I'm just going to say super super basic uh and I'm going to hit the play button so what we have here and you'll notice there's already a device that has been ascribed for this so here uh in my my prototype settings we will be able to control like what is the device right so here now all that's happening and there's no animation right just going from frame one to frame two right nothing special is happening here um but we're beginning to understand what's going to take place right what's going to transpire we're going to have this Square go to this larger rectangle and basically what we're doing is we're changing its properties so we're going to make it taller we're going to change its height and we're also going to change another property it's color so everything that we've modified here for this rectangle so the fill color and the height these Heights are abysmal but what I want to do is I just want to expand and I want to to bring this down so what we're going to do is we're going to go back into that prototype mode I'm going to select both of those noodles right so I'm going to select them and then here when I on tap and I navigate to I'm going to choose smart animate and we're going to talk all about smart anime and I got a bunch of examples to show you in just a moment so we're going to choose smart animate and we're going to set an ease in and ease out so what we're going to do is we're going to tell it to animate from this point a to this point B and then we're going to tell it how to animate and the motion and by the way we're going to be talking about those motions in just a little bit so here we go so when we click on this it's going to go to that first one and then when we click on it it's going to go back so let's hit that play button and when I click and I go back when I click and then I go back right so what's happening is that it's is looking at the properties of the two and it's tweening right it's tweening between those and I can change the amount of time that takes place between those as well so here if I go let's say 150 milliseconds right it's going to go much faster now if I select those and I say instead um let's do 600 milliseconds right it's going to be much slower so understanding these main Concepts is going to get you very far all right any any questions on that please any questions any questions I see that there's a lot going on in the chat um anybody can you show again how to connect the red block box into blue box absolutely so let's say I I have these noodles watch if I move this Frame you get a much better sense of how these noodles are going right I can select those I can delete them so in the Prototype mode right press shift e to switch between them I select that first one and you'll get these little dots that hover up so any object that you have I'm going to drag this over and have that go to the second frame it'll snap once it hits that frame and you'll see the interaction details for that Arrow next I can select this one and drag that going back so what these are doing is that this one is going to this next frame and this one is going back to the pre previous frame so I I see that you're asking if there's shortcut to connect noodles um what you can do is you can actually you you can do various things like I can move these noodles uh to go somewhere else right there's there's certain ways to to kind of shortcut with them but primarily you're going to be uh modifying them here because you need to be more specific about where it's going right it requires your intent and understanding your intent so that's going to be here so maybe the shortcut can be just having your interaction details open and going to that particular point okay so I'm gonna move on to uh smart anime so we've already began to talk through that concept so here once again I have another resource for understanding the concepts of smart animate to kind of fill in the gaps of things that were unable to cover today remember once again that this is a little YouTube video you can watch it it's in the file that we shared at the beginning of the session so basically this is a review of what we already have done where you have an object and you're beginning to modify its properties so I'm gonna hover over to those examples I'm going to hit play and I'm going to walk you through how you can do a little bit more with that so let's go to my first frame so someone asked me how did I put a YouTube in figma I'll show you that in just a moment so here we have these these animations taking place right and these are going from frame to frame and they're looking at the properties of each and they're intelligently using [Music] um those properties to communicate you know Concepts so this one almost looks like a 3D object right there's nothing in here but circles right just circles colored a particular way um can you mass apply noodles yes you can Mass applied noodles there are some restrictions with how you do that so here we go these are some other examples of how to create loaders and you'll notice that these animations are going to continue to move forward without the intervention of myself right so I'm able to see how this is going from frame to frame maybe it might be a click that begins it but you can use a different type of event to set off a chain reaction of frames to play one after the next so even here um so I see Caroline the file has already been been shared you can download the file from figma.com education I believe that we just threw a link in the chat thank you um so all of these examples are here that you can use so these can be used for micro interactions these can be used in a number of different ways and the thing that I want you to see is that this is nothing more than a series of frames and understanding this concept using a different type of event and using those shapes in a way to better explain these Concepts so I'm going to head back here to Smart animate and we're going to dig into a little bit more about how to be successful when creating these animations that are frame based uh all right cool real quick how to put a YouTube video in figma I'm actually going to open up fig Jam so fig Jam is our whiteboarding tool right you can drop in stickies you know you could drop in you know like heart-shaped eyes and stuff so this is a collaborative tool um in fig Jam fig Jam is really unique in that if you have a YouTube video so like let's say I'm here in figma and I want to view this YouTube video I can copy that video link and I can paste it into fig Jam so here in fig Jam I get this fun little player and I can actually hijack fig Jam I can cut that out and then paste it right into figma so that's that's kind of how I'm doing it right there all right so inserting smart animate into a fig Jam presentation you can make it an animated gif um however that is outside of the bounds of this presentation today all right so we're going to be talking about smart anime so what about inserting videos in a figma um you can check out uh it's outside of the scope of today but you can check out figma.com slash at figma and there is a great videos in prototyping file I actually worked on this that gives you a full breakdown on how to insert video into your figma prototypes if you have an education team um files on the Education team will allow you to add those Okay cool so we're gonna get back to Smart animate and you can see here that I have four frames the first thing that I'm gonna do here is I'm going to create an ellipse right and I'm going to show you some secrets on how to be more intentional with your animations and how to be more successful with smart animate so here I've created this ellipse now only certain properties can be animated with smart animate you can't animate Strokes or very complex Vector shapes you can animate things like position color scale um and and and it's going to and rotation as well that was the word I was looking for rotation so you can animate position size scale color rotation and using those properties you can animate in here so the first thing I'm going to do I'm going to create a circle I'm going to go over to the design panel I think I have my snap settings let me turn snap to pixel grid on once again that's command p and then I type in SN AP and then it allows me to snap to pixel grid more on the quick actions menu in the first page so let me make sure that snap is on so this way when I'm when I'm making a circle I get nice even pixels right no more 0.569 right now I get nice even pixels so now that I've created this circle I'm going to come up here and I'm going to make it into a component right what a component is is kind of like a predefined reusable element in figma I'm going to change the name of this component and I'm going to call this you know animating Circle names matter but I don't really know its name in at the moment so a component is is something that is reused right it's at the core of of using things and reusing things in figma if I was it command D or control D and and duplicate this right and if I was to create a bunch of them I'm holding down the the option key here when I change the original the others follow suit even if I were to scale this one and if I were to change that color as long as it's a component right they are all the same they're all instances of them they just may have an override that then can also be re-over written right so what I want is I want to make my core asset you know this is the thing that I'm going to animate across these frames you know I want to make sure that it's consistent across those frames so creating things as components let's make one more component so let's make just like a rectangle I'm going to come up here the shortcut key is going to be option command K or Control Alt K so by hovering over the component but and you will see the name if you don't see it it's because you haven't selected anything so select that shape come up here choose the create component and then you will have this component that is now available for reuse let me go here I'm just going to say animating you know rectangle um tangle so these are just like my assets right and these assets are going to be used on these frames so if I hold down the option key I'm going to drag this to frame one right and then I'm going to drag another copy over here to frame two I'm going to drag another copy to frame three I'm gonna drag another copy to frame four and I'll show you that one more time let's cover that whole thing one more time these are our assets right they're going to persist across these frames here and I'm going to change their properties so here I'm just going to duplicate this circle so if I imagine this circle being a bouncing ball right what I can do is I can use this as a way to animate that bouncing ball oops let me see if I have any extra I think there's just an extra thing in there there you go so I'm going to have this this bouncing ball now to change once again to find all the shortcuts command p and then type in keyboard shortcuts and you'll get them all there you can also find it there should be like a little question mark Or if you click up here you go into the helping account you can find the keyboard shortcuts there so what I can do here is I'm going to create this this animation I'm going to Tween between these now the thing that I want to highlight here when I look at these frames the layers panel over here becomes very important right it's really important for you to know the layering of your objects and the naming of your objects so the reason that I made this into a component was that I've named it right now that I've named it and that I've made it an asset right figma is well aware of it and by going into prototype mode when I hover over this right and this is something you know pay close attention to when I hover over this I can see that figma recognizes that it's the persistent object across those frames I need figma to know that it's the same object across those frames otherwise it won't animate properly like if in this Frame I were to name this something else if I was just to say you know I'm just going to call a Miggy right that's my Mickey frame now when I hover over right figma no longer recognizes that circle on that last frame as being something that this Frame is going to animate to anymore right so it's important that you are consistent with your naming and your layer structure and I'll show you the layer structure aspect with the next one when I drop in something in so the difference between a component and an asset a component is a very specific thing in figma right so a component it is a type of object and figma and asset is more of an abstract concept that I'm saying that's just something that you're going to use so asset abstract concept that I'm using to relate a component to you so a component is uh uh uh you know a number of things so a component could be anything as as a shape or you could have a component that looks as complex as an Instagram card that contains text and shapes and images and photos right so this is a singular component so your component is going to think of it as your basic unit for animation right this is the thing that I'm moving around on my stage that I'm intentional about moving it around foreign so what I'm going to do here I'm going to make sure that this last frame has the correct name so now that I'm in prototyping mode I have the instances right these are all just copies of this main component here you can tell the main component because it has these four diamonds and these instances just have one big empty diamond right so the main component has these four diamonds and the instances just have these little ones here so what I'm going to do is in prototyping mode I'm going to have these frames go automatically from the first frame to the second frame to the third frame so here I can select this point and drag from the first one to the second one same thing here from the second one to the third one from the third one so the fourth one and I can have the fourth one go all the the way back to the first one now I've created a bunch of interactions here I didn't pay close attention to the details and that's because I'm going to change the details at the same time so y'all were asking about shortcuts with prototyping earlier the thing that I can do is I can batch edit these noodles batch edit these noodles I like that so here I'm going to select each noodle while press holding down the shift key so I'm going to select this one then I'm going to hold down the shift key press that one I'm going to select that one and this one and this is going to let me edit all of these at the same time so anything that I can easily change that is the same across them so I can look at my interaction details I can see this on click interaction now I don't want to click through every frame I want it to automatically progress just like those examples that I showed you earlier the Pac-Man and I want the animation to progress of its of its own doing right so I'm going to choose this amazing this wonderful this event down here called after delay right so I'm going to leave that up on screen so hopefully you can see that after delay can only be set on the frame itself right I'm gonna say that one more time for y'all on the back after delay can only be set on the frame itself so when I choose after delay what it's asking me for is how long should I wait on this Frame before I move to the next frame so I'm on this frame for was it one millisecond 50 milliseconds you know one whole second how long am I pause on this frame for before I move on to the next one so I'm gonna choose I'm gonna type in zero but the thing is this figma doesn't recognize zero so it's going to be one millisecond it has to have at least some point of time that it exists on this Frame so I'm going to choose one millisecond and that's going to be an instant so basically I'm saying it's on this frame for one millisecond then it's going to move on to the next one and here too I can choose the type of ease right so here I'm actually going to use one of these fun presets that I have down here so these are all spring presets they're kind of like bouncier in the way that they animate I'm just going to use this opportunity to showcase them to you so here I can choose gentle so I'm gonna have like a little gentle spring and I can preview that by hovering over this panel right here I can also change that to quick I could change it to bouncy so let's have this ball go from point A to point B with a bouncy Spring right we need to determine what type of movement we want to use and once again I have an entire page dedicated to certain types of movements and hopefully we will we will be able to get to that uh today we're probably going to extend off into uh 15 past the hour so you know we're going to go just beyond one one uh 1 pm my time it's going to be different for you all some of you it's probably pretty late so I apologize but we're going to extend this for the sake of the recording so here when I hover I can see that That Bouncy interaction right now it's set to 800 milliseconds this is the duration of the animation that's going to take place between these frames right it's going from the bottom and it's going up so let's do that so once again all of these noodles have been selected so I'm animating all of the properties at the same time you may notice up here that it says mixed and that mixed value is basically each one is going to a different frame so I don't want to bother with that I want to leave that there so I'm going to close that out and here I'm going to hit play and we're going to see how this works right and basically this is what's happening is that the ball is going from the top to the bottom to the top to the bottom right I'll I'll hold that there for you for just a little bit but you can preview this and you can see now I can actually keep this open and I can modify by by clicking all of these uh these arrows here and I can change that from being bouncy to let's say quick right and now I can go and and go there oh let me find it nope wrong one here we go and I can see that change so I can actually keep this this window open right I can move this over here you know while I'm editing um over here let me move that up a little bit there we go so and let me even change that zoom level I'm going to press the Z key right there so there we go let me move this window over and hopefully y'all can see that there we go let me move this up okay so if I were to make any changes here like let's say gentle you can see that update in my other window uh and somebody asked me how did I make that Loop uh basically by having the last frame go back to the first frame so after delay is going to give you that ability to go between them so now let's change another property so let's change this Frame I'm going to come over here to the right in the design panel I'm going to choose that color and I'm going to make that red and now we're going to see in that animation updating there in my right window the preview window that when it goes to that frame it's animating to red and now I can come down here and let's say this one you know I want to make it blue so now when it reaches that one red frame it comes down to Blue and then let's say that last frame let's say I don't you know want to change the color I want to reduce its size okay so as I'm making those changes I'm able to see this update live yes I love it y'all are digging this this is great Okay cool so all of these updates can be made now you can change other properties in here as well I can select this frame for and by the way when I was working with my students each student was in their own page I can just go Page by Page and preview their animations I didn't need to download anything I didn't even need to ask them for the link we are already in the same file and as they're making changes I can watch them change so even more and more and would you change that first frame um change the select the frame itself can you select the frame itself and change the background color of the frame to Blue there you go so now we can see that when it goes back to that first frame it's now blue so Lauren and I are collectively working on this prototype together right so imagine doing this any other way it's like brand new um so we're able to like collectively work and articulate the the changes that we're making and how we're working on this so even if I wanted to add in like uh this rectangle right and I'm using these abstract shapes as a starting point eventually you know you can throw in um an interface you can throw in a component um and I'll show you that in just a moment um that is more indicative of uh like a phone a mobile phone layout or like a website but these are the foundations these are the basics of the animation that helps you understand what you can do so I'm going to copy this rectangle I'm going to paste it here in my first frame and you can see it show up right it shows up and because the Fret the rectangle doesn't exist in other frames figma doesn't know what to do so it's gonna phase it out it's gonna fade it out it's gonna be like oh I don't know what to do it's gone but once I copy that rectangle and I paste another instance here it now knows what to do it's like oh okay right we have a rectangle and a circle and in this Frame we have a rectangle and a circle and figma now understands that bit of instruction so it knows between those two frames so move the rectangle down so I can you know make the rectangle larger and I can move it all the way down and we can see so I can copy the rectangle I can paste it into frame three and you'll now see it persist the rectangle now has its own little story in the mix here all right I can move it up so now the rectangle is there it goes down moves up and let's have the rectangle you know finish out its story in frame four you know it gets it's going small and uh it's now Green Oh not not green let's make it green I didn't select it right huh why isn't up going green there we go okay I just didn't select the shape properly and there it is so now what it's doing it's animating between the thing that I want you to take away from that is that if an object doesn't exist and figma doesn't understand it right so like let's say here animating Circle doesn't have the right name right I'm just going to call it you know Jenny right so that one frame is not going to animate correctly it's just going to fade in and Fade Out so hopefully you all see that I know there's a lot going on let me let me delete the rectangles for a moment I'm just going to like delete them for a moment and you can see that when figma doesn't know its name and its position properly all it does is it fades it it doesn't connect that animation in a way that's that's that's meaningful so to fix that I just have to make sure that the naming convention is consistent So Adam animating animate yeah let's just copy and paste the name it's hard to run a live stream and like be able to spell correctly there we go so now you can see that it's it's coming back now what's really cool about this is like let's say uh here we go let's say I'm gonna take Lauren's uh Avatar here and and I'm gonna paste Lauren's Avatar you know in the uh in the frame and uh let's uh you know I'm going to select all of these shapes I'm going to right click and I'm gonna reset their changes so once I change the uh the The Fill property I can change it to an image you know then you're moving an image around the uh or on the page exactly David we got we got dancing Lauren so if the delay is longer than one millisecond that is a fantastic question let's do that right now so if I go into my prototyping panel and I select that first frame and I and I choose the interaction details and if it's larger than one millisecond that means it's going to pause and hold on that frame for the time being so if I change that so let's say 1 000 milliseconds we're then going to feel that pause so we are now paused on that frame for one whole second before it continues so that helps you change the pacing so all right Lauren I'll I'll make that I'll just make it a bouncing Mickey one second here we go I'm going to change so I'm just going to copy there we go time reminder okay cool we got we're down on Tom a little bit um I have a few more things to cover really quickly I'm gonna hop over to interactive components this is something unfortunately we don't we don't have a ton of time to cover but basically the the limitation with those frames is that everything on a frame has to animate at the same time so with interactive components let's show you what is possible so this is actually the question so we have uh Emmanuela asked the question how can you have two types of animations on the same frame right so right here imagine a game of of interactive game of tic-tac-toe right so let me close those all out so this is made in figma using the concept interactive components and this exists on one frame right this too this is an animation that exists on one frame uh so I know a person just asked I think Caroline asked um we've been sharing the the file so you can you can get access to the community file and duplicate it so this is allowing multiple uh concurrent animations going on at the same time uh here's another example where this whole animation is actually made up of a bunch of smaller ones it might come through as a bit choppy I don't know how Zoom is going to handle my my animation but basically what's taking place here is that there's a bunch of smaller animations they're like encapsulated animations for that frame or if you think about making like a little like heart icon micro interaction right um being on this one frame interactive components gives you that ability to encapsulate yes exactly their precomps in After Effects that is a fantastic example so if anybody out there is familiar with after effects or have you ever used Flash before they're like movie clips in Flash so even right here the flippy example if I press the F key and I copy a Flippy and I put it on here you know when I hit play and I select that frame you know now flippy has a fun little little encapsulated animation so I'm going to show you how that works and uh once again there's a number of different resources in the community file that we shared at the beginning we'll we'll share that again um on interactive components this here is a playground file you can click on these I also have a a little uh kind of tick tock style tutorial on how to use hand-drawn frames when making that type of animation let me pause that so the way that interactive components works and and I'll walk you through it here okay so one create your frame right to you know draw your object right um then hit command D duplicate it have your other frame that does something else and let's extend that so I I actually have a new YouTube channel it's at design Professor so if you go to youtube.com design Professor but also I make tons of videos for figma's YouTube so here we have these two frames right and we want to create an animation between them so I have those two frames and uh let's say that this first frame goes to the next one we have the after delay right and then we have this Frame and uh it also now goes back right so we have another after delay now I can select those frames and I can come up here and I can create a component set when I create a component set you'll see these dotted lines go around it now this has been captured and I can now reuse this in my frame so let me give this a name I'm going to call this Dot so if I create a frame to play this I can go to design let's set an iPhone 14 oh it's big and I can copy this let's say me just copy that and I'm going to paste it here all I need is just one of them and uh let me teach you another shortcut tool the scale key if you look up here you can see scale it's also the K key I can select this object and I can scale this down show you that one more time the scale key is if I don't use a scale key I'm resizing the frame if I press K or if I look up here you'll see it under the move tool K it allows me to scale something so let me let me throw in a few of those here so all of these little animations are on this Frame I can select that frame and uh with it selected I'm going to press play and we can see that they're all gonna they're gonna animate um I think oh when I click they go back so I'll show you again how I copied the frame so this is the actual frame that I'm going to play uh when I go into prototyping mode make sure it has a start points and I will call this uh I will give this a a little example name so uh play this now I'm terrible at naming but all I need to do is I can copy either frame and let's say I want this to be invisible right you see how they have those white backgrounds I don't want the white background I'm going to go to design I'm going to remove the background I'm going to copy the first one and I'm going to paste it in this Frame here I'm going to press the K key I'm going to scale it down now let's say 2 I want to copy that second one I can copy the second one I can paste it I can scale that down right and I think there's a few others in there let me just make sure I don't have any extras that don't need to be there I'm just going to select them if you ever need to find like hidden things press shift o and then that'll let you like find anything that's hidden shift o or if you're familiar with illustrator it's command y they both do the same thing it's outline mode and allows you to see any hidden extra objects that you don't want to be on your frame so here we go I have a number of these and when I select frame nine I can hit play and uh here we go so now I have multiple concurrent animations happening on my same frame so I have the kind of like encapsulated the house animation so if you think about these up here these are using rotation you can see that this is uh going at a rate let's see what that rate is so is this locked let me just make sure okay there we go so when I select it you can see after delay this is 1800 milliseconds before it goes from there down and then oops from down back up so these are like looping so I have two different hands and they're just going at different speeds or for this example this example is a little bit more intricate it's kind of like a Choose Your Own Adventure so on that first one you know we're hovering and then it goes into this option where if I click on this one it'll go in that direction and I click on this one it'll go in that direction and what it's doing is it's using a custom animation to get that nice little kind of like bouncy interaction between them and so what I'm doing here is I have this square and by pasting you know whoops let me copy the square and I paste it into this Frame by pasting those I can even change the state that it's in so I can click this in my design panel I could see start shoes Circle reset cross reset like I have these different states um and when I hit play on that frame there we go okay same thing here you know the heart is just a sequence of frames that's encapsulated as a component set I'll show you one more and then we're gonna uh begins to to wrap this up I have one more thing to talk about with the tweens and then we're going to wrap up so I'm going to draw another little frame and uh this one is going to be a rectangle I'm going to make the rectangle be full size in the first frame and let's have it be red I'm going to hit command D to duplicate that frame and here our rectangle is going to be much smaller and let's say blue so we have those two frames so say you know uh Rex or I'll say Square start so Square start and rename this to square and I'm going to prototype it I'm going to select the frame I'm going to have it go to the end I'm going to choose after delay I'm going to have it be one millisecond and uh let's have the the gentle or no you know what let's use smart anime and I'm gonna use a custom bezier right so the custom bezier allows me to draw a curve and I'm going to show you all my favorite one this is the one that works 90 of the time for ux animation right so I'm gonna go one zero which is basically just the coordinates of this dot right it's like where is this dot going so I'm going to choose one comma zero all right and then the second two are the coordinates of this dot right here right and I normally go one zero point two one or actually let's do 1.8 oops one or no sorry one zero or a point eight zero point eight zero point two one right numbers wild okay so that'll give you this nice S curve that's my favorite curve to use right I love to use it on everything that's the migi curve so here I'm gonna have the same thing go back right and it's going to keep that it's going to remember that those were the values that I typed in so that's great it remembers that now I'm going to select those two frames I made the animation I'm comfortable with it I'm going to come up here and I'm going to create a component set so that now keeps that and let's give that a name let's call this um you know square one other thing that I recognized here I want to select this first one and instead of after delay I'm going to choose while hovering I'm going to do a fun interactive experience I'm going to make an nft right so while hovering I'm going to change two and then this one is going to be going back it's going to be after delay and we're going to wait there for let's say 1 000 milliseconds right and I'll show you what I'm about to do so I'm going to draw a big frame and I'm going to copy this first one into the frame and now I'm going to hit command d right I'm going to make a duplicate and I'm going to hold down the the option key and just drag that over I'm going to make a whole grid of these right and let's select all of those and then I'm going to drag these down I'm holding down the option key then I can hit command D command D command D command d right let's make our frame a little bit bigger I'm making an interactive experience here folks so now if you'll remember on Hover oh here we go I have to zoom it out but uh the zoom kind of ruined some of the lines but now on Hover I can create a fun experience okay cool last thing I got a few slides here so talking about swings and what those dots mean um basically you can have linear motion linear motion is as good for something is just rotating and infants in them you want to think of something going from off screen to off screen it's moving at a constant speed that's the only time you ever want to apply linear motion when something is going from off screen to off screen let's also talk about an ease in if you have an object that's starting from a stopped position and slowly gaining speed that's when you want to use an ease in so if you have something that's stopped on your frame and it's going to move off screen it's gaining a lot of speed ease in is the one that you're likely going to do that's what the curve looks like in figma or if you're using um a value tweening on After Effects I saw we have some After Effects folks not motion uh easing but but value easing so here in ease out is de-acceleration it's starting like off screen and it's coming on screen so basically it's starting at its full velocity imagine an object that's starting already at 60 miles per hour beginning to slow down and come to a stop that's an ease out so an ease in out I call this the goat ease right it's the greatest of all time most things in real life move this way where they stop and then they slowly gain momentum then they slow down and come to and stop so if you're working with most things in ux you are creating an ease in out where it's accelerating it speeds up and then it slows down and ease back is when you pull those curves just a little bit out it gives you just a little bit of a bounce right it goes beyond its point it comes back it's a bit of exaggeration it helps communicate the object in its motion right so when you are animating you know think about what it is you're trying to communicate right where is your object going how far does it have to travel what is its perceived weight and mass these are the things that affect how long the transition is going to take typically a ux animation you know your transitions are going to be between 250 milliseconds to 400 milliseconds anything longer is going to feel like it's lurching so if it's a bigger heavier object then it's going to move slower so think about the perceived uh a mass of the object that you're animating and then thinking about how fast should it move relative to its size and what is its relationship to other objects just some thoughts to think about that so uh prototype early and often I know some of you are talking about wireframes oftentimes I like to have motion studies I like to have animated studies that really Express how something might move remember once again this is just thinking through Basics thinking through Primitives it's a great way to explain this concept and dig deep and have students and even yourself just to explore how things may move um and with that if there are any questions Lauren are there any questions that we have yeah there's there's some some in the questions file if you want to go over them oh cool brilliant all right so uh how can you make a picture Carousel that's gonna be a whole nother that's a whole nother Workshop but it is completely doable within figma um how can we export animations so right now you can't export animations from figma per se but what I do is like a screen recording so I hit command shift 5 on a Mac and then it brings up this little window that allows me to record my screen recording there's a bunch of screen recording software out there so I actually use this for a lot of my animations I will even screen record things from figma and then bring it into After Effects one cheat code that I use is I will put a green background on anything that I'm screen recording if I need to composite it back into After Effects um so with so many wireframes how can we organize the noodles you will start to see how noodles kind of present themselves as you organize what I would recommend is that you don't create huge huge huge prototypes create smaller flow those so break up your prototype into smaller chunks for communication right you have to think what is it that you're trying to communicate what is the purpose having too big of a prototype or having too big of an animation might be too much it's kind of like outside of the scope so really think about breaking it down into those smaller flows if we look back to these examples each of these flows exists here on the left so every starting point that you have in a page can be viewed within the same prototype conversely you can also tuck that away if you just want to keep that the only thing that you're showing these prototypes you can actually share with people and you can watch them as they're using it so Lauren I don't know if you're in this file if you want to click on something if you want to go to a different prototype I can see you as you're working through this so Lauren are you in here yes one sec I'm on a different prototype sorry oh okay no worries so here let me let me follow you so now I'm following you uh if you click on that oh oh you're in here a couple times there we go all right cool so now I'm watching Lauren in her prototype so imagine you want to share this with a student they can send you a link and you can watch them interact with it right like I'm watching look at my hands are up here and you see it's all animating because like Lauren's I could even see her cursor so these are just unique ways to kind of use the prototyping this is meant for you know like watching how people test your ideas uh and sharing that with others right so just remember you know what is the purpose of what it is you're doing and what are you trying to uh get out of it there um let me go back to the questions uh why Auto layout is important so Auto layout is important because it allows you to move quicker uh if you were to look at the um there's a little object that I have right here so Auto layout is important for this because as I add text right it expands and makes the object more uh reactive um so we will cover that in a later Workshop I'm actually thinking about for the next Workshop that we do a deep dive into Auto layout so go to figma.com events and look for a future figma for Education Workshop where we will cover that um so is there a standard time for animations that is within the user's mental model yeah I would say typically between about uh 250 milliseconds to 400 milliseconds as I mentioned before you need to think about the object itself the size of the object that's going to determine that motion what I usually recommend doing is actually creating a number of iterations so that's something that I didn't cover here let me walk you through how to iterate on an animation so here if I have these two animations I can select them hold down the option key and duplicate them and I now have a new iteration if I want to create another start frame I can right click and add a starting point so you can iterate on your concept without destroying the previous one so if I were to create another animation with this I can easily go in here and then I have a a new version that I can explore with different timing so iterating is going to be key in helping to identify what is going to work best for your users ultimately there's not going to be anything that is like 100 but the answer is always test it and put it in front of folks um so I saw a question how can we integrate nice animation figma to pass on developer for build development um so here when you're working if I were to go into the inspect panel I can see some of the properties here these properties are going to be uh uh demonstrated um for the uh uh the the in the developer as they're working so when you go into like inspect mode um you can Surface those properties however it is always going to be you know watching the interaction and explaining your intent I would say that documentation is the best way for you to go so be mindful and intentional about the type of ease um that you're using um the type of easing curve many of these are going to be standard so when you're thinking about ease in out and and the types of interactions that you're working with if I had a more custom one here uh let's say like I had a custom bezier if I go into inspect uh let me go here prototype and let's uh let's inspect that uh I will get the uh the easing values I'm not getting it to come up right now but um it's there trust me um cool thank you so much I'm glad that you found this helpful I'll do one last thing I see somebody asking about the text wrap feature yes there's a text wrap feature when you type in text um basically there's three modes that you're dealing with whenever you have a text box uh so the mode that I would recommend is this middle one right here which is auto height so as you type in text it's going to be dependent on that width and that text will wrap so basically you're setting a given width and that will allow your text to wrap so be mindful of the text mode that you're working with so Auto width is just going to put it all on one line I'm going to hit undo there and the auto height is the one that you want to deal with uh fun fact there is a fixed size and if you option click on fixed size you will get ellipses so I'll show you that one more time if I do fixed size with my text I come over here and I option click then it'll actually give me ellipses and crop out the text from the the field so there are different options yes in working with text to make that better and I'm glad Jenny that you love the truncate setting I myself love the Trump Kate setting and I know that we got it last config so I'm really excited to see uh this year what kind of new features we get at config um cool so I mean that's what we have for today we would love your feedback uh please let us know how we're doing your feedback is what powers future workshops and help us be much more effective at delivering the content and seeing what kind of content that you want uh so once again thank you so much for joining it's been an absolute pleasure to have you here today um and uh be on the lookout for future content

Channel: Figma

Views: 29,325

Keywords: figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, tutorial, Figma for edu, education, animation, animation basics, animation in Figma, students, teachers, product:figma_design, audience:student, language:english, format:standard, produced_by:figma_for_edu, theme:basics, event:none, series:figma_for_edu, type:feature_tutorial, level:beginner, primary_feature:smart_animate, secondary_feature:

Id: 02fO4qVnbc0

Length: 80min 42sec (4842 seconds)

Published: Fri Feb 24 2023