Figma for Education: Prototyping with Figma 101

Hello everybody welcome here today my name is Miggy and we are going to be talking about prototyping in figma I am a designer advocate for figma for Education as we are are waiting for folks to uh join us uh feel free to find the chat down at the bottom of your Zoom screen uh hop into that chat make sure you set it to everyone and let us know where you're joining us from so I am joining you all from um Rochester New York Rochester New York uh oh we got Tulsa Amsterdam Rhode Island wow Paris Milan London Bay Area we got a lot of folks in here today Los Angeles Georgia uh how DC India Philippines Bangladesh Slovakia welcome everybody um we're going to be talking about prototyping in figma today uh this is going to be censored a little bit more for for education so um we're gonna get dig into some of those weeds uh as we get started here like I said we're we'll get started probably about five after um so you still have a few moment moments before we get into the content uh we got Vancouver in the house Canada in the House Columbia in the house Portugal Atlanta Georgia Norway hey Egypt how's it going Peru Madrid Argentina welcome Nigeria turkey welcome all uh so hi myself uh my name is Mickey I'm a designer advocate here I'm going to take a quick photo I already have one there but you know I just added another one so this is a photo widget uh that we have here in figma and in fig Jam so there we go I'm representing figma for edu um so you can find me on Twitter at Miggy on Instagram instamiggy on Tick Tock as Professor figma um and this is my figma profile um so we're going to be started soon just want to know that a couple other things too you know figma and fig Jam are free for students and Educators um you sign up for figma you can verify our education status you create an education team and that's going to give you all the professional features that you have there we got Norway in the house we got Lagos London St Lucia welcome everybody thank you for for letting us know so if you're just joining us we're still waiting for everybody to Pile in uh but please let us know in the chat where you're coming from also if you have a question we will be answering questions at the end of the session today so um I might answer some live but feel free to use the Q a panel so there is a little q a panel down there so feel free to use that and ask any questions that you may have like I said before we're going to be focusing mostly on prototyping today okay Colombia man we got a lot of folks from Colombia here today Italy California welcome thank you all all right cool so just a little bit of housekeeping just so you all know uh this is recorded this will be sent to you after the workshop uh recordings will be sent out next week ask questions in the zoom chat um if you look for the I see Anita has a question about the photo widget if you go in here into the little insert menu and you go to widgets and you type in photo booth you should get that that photo booth widget and that's by a fig mate here at figma so you can go ahead and use that so if I go in here to the insert menu in figma I can click on that photo booth widget I get the little camera and then I can you know say what up here I'll do one more there you go and so like the the people who just joined us that watched me do that and are just like what is going on here yeah that's the photo widget could be found in the inserts menu um cool oh I almost triggered it again I'm gonna pop that off so uh this will be recorded recordings will be sent out next week any questions in the zoom chat also feel free to reach out to education at figma.com to connect um a little bit about today's agenda uh I'm gonna do some intros we're doing that right now uh this is what I'm going to be covering with prototyping and figma so we're going to be doing some Basics I'm going to show you how to do Scrolls uh so scrolling horizontally vertically and in both directions we're going to cover some of the basic transitions where then I'm going to cover smart anime uh interactive components um so touch on those a little bit lightly enough for you to get a good bearing on those uh and then we're going to talk about video and prototypes so as education users you have access to video and prototypes and we're also going to be talking about sections and what they mean in figma and how they can help out your prototyping and how they can simplify things in prototyping and then we're going to be doing a little bit of q a so cool so I'm just going to take one more quick moment remember that figma is free for students and Educators you can go to figma.com education you can get verified you can join a demo like you are here today when you go get verified it'll actually let you know uh whether or not you have access to that once you have access you want to make sure that you are setting up an education team the Education team is the benefit uh so it doesn't just magically turn all your accounts and education accounts you have to select which Education team you're collaborating with other students other Educators or other colleagues in working in the education space all right cool so without further Ado we have a lot to cover today so I'm going to head over to my prototyping 101. um if you check in the chat Alex is sharing out this community file that we have so um because there's so many folks on the live stream today normally I have a little bit more of an interactive demo but because there's so many of you uh you can actually go ahead and download a copy of the file that I'm starting with today so feel free to you know peruse it you don't need to follow along you know what I care most about is that you're at least understanding and inspired by the content and you at least know where to go to kind of make some of these changes and edits and engage with the prototyping so here you can see I can see that a number of you have already I can see live as you're duplicating this this is kind of wild 86 87 88 that's kind of cool I've never seen that before so feel free to get that that's some photos of some dogs and uh we're gonna go ahead and get started so I'm in the page prototyping101 and um there's a few things that I want to cover here that we're going to be using so for today I have a number of just different examples of components that I'm going to be using these were made ahead of time so these are components components are reusable elements that you can create in figma and when you create components and you have main components they're going to be located here in your assets um uh over here in your your assets and you'll be able to see all of those there the components that I'm going to be using for today's Workshop they're going to be located here as I mentioned I've already created some of them so many of them are leveraging Auto layout so what's really cool is that these are responsive components so basically just made up of shapes and text to generate the look of this style all right uh you can see here I also have some icons and then I also have some component sets and once again um we're not going to be covering the details of those but if you want to within this file we do have videos for all three so these are YouTube videos these are content that like figma produces to get you up to speed on how to use Auto layout how to use variant and and how to use component properties all right so let's walk through today's example in today's example I've made something today and we're going to start dissecting it I'm going to show you how this was put together so I'm in figma right this is my canvas over here on the left are my layers up here some of the main tools that I can use you know I can create shapes I can create text I can draw some some other objects there I can also create frames so this was made using a frame here's a section here's several other frames and if I click on the Prototype mode right I can now see the relationships between these and that's fundamentally what we're going to be learning about today is how to create these relationships how to create these interactions so I'm going to hit play just so you can see what this prototype looks like Okay so this prototype is playing it's playing inside of an iPhone 14 and I'll show you how to adjust those settings if you have those questions so basically I'm I'm creating instafig it's kind of like a prototype image sharing application of some sort and you'll see here that I'm able to scroll and I can see the content the content has various Heights and then if I click here I have a little story content so this is what you saw in that section there I'm able to navigate and Traverse those and then even play video as part of that so I could navigate and we're going to walk through all of the different steps to kind of make this happen so here we go even if I want to click a little little like right there and I'll even show you how to do some overlays as well so that's kind of like the heads up of what we're going to be doing and and what we're going to be covering so we're going to start off with some of the basics so I mentioned here too if you're in this file you'll see that anything that I'm not covering there are also supplemental videos that are there that can help you walk through some of those those basic concepts the main area that we're going to be covering here is how to set up scrolling in a window and also just how to work with a prototype in general so prototypes all start with the F key right you create a frame and you're going to have another frame with other content and you're going to create an interaction that's going to go between them both so let's just go ahead I'm actually going to wipe these out and walk you through that so I'm going to press the F key I'm going to draw out a frame so when I draw out that frame I can select that frame I'm going to go ahead double click on that name right there I'm going to call this starts also here I feel like I can make the experience just a little bit better for you all by increasing the size of my interface so let me go ahead and do that really quick there we go I've made my interface just a little bit larger so hopefully that's better for everyone so here is that first start frame that I created when I create the frame I zoom out one more um so when I create that frame I'm going to go to the design panel what's really important about prototyping is knowing when you're in the design panel or when you're in the prototyping panel so if I press shift e right shift and E right it swaps between me being in the design panel and in the Prototype panel so I can swap back and forth so right now I'm in the design panel and when I select the frame that I just created and I go over here to frame I can choose from a number of presets that I can work from so I'm going to choose the iPhone 14 and you'll see it's width and its height is outlined here we use the viewport sizes of the device which just kind of is the essential way that you should be working some other applications they use the physical dimensions you should always design to the viewport of the device so here we go I have my start frame now I'm going to hold down the option key if you're on Windows it's the ALT key I'm going to drag that I'm going to have a second frame that's going to be called called end we're going to make a very simple prototype here just to test things out so I'm going to create a rectangle I press the r key I draw that rectangle I'm placing it inside of that frame if you look over here on the left you see I have the start frame and I have the end frame and the rectangle is inside of it if I want to rename that I can hit command R and I'm going to title that I'm just going to give this I'm going to call this button and I'm going to copy and I'm going to paste that on my end frame and then over here I'm just going to make this large and then expand and maybe a different color so we're just going to create a very simple prototype here and what I'm going to do is I'm going to go to the Prototype panel I mentioned before that it's shift e right and that puts us in the Prototype panel so now when I select an object when you're in Prototype mode you're going to see these little blue pluses show up around the objects that you're using so I'm going to click on that blue plus and from it I'm going to drag out what we call interaction noodles but you can just think of it as as an interaction Arrow so here when I do that it's going to bring up this little panel and this panel is the kind of the center of these interactions so it has to take place between these two frames I have these interaction details I'm going to first decide what is the event so we're going to create a very basic one we're going to create on tap then we're going to navigate to this is kind of the behavior the event that's going to basically take place and where is it going to this is the name of the frame so this is why it's essential that you name those frames accordingly so then this way you know that your interaction is behaving well it can also just be as easily done as dragging it over then down here we're going to choose how that takes place so it can be instant so let's start off with instant and see how that works and then I'm going to do the same thing I'm going to drag this going back so on top it's going to navigate to it's going to go to start it's going to be instant and it's going to go right on back so here start and end and what happened when I created that interaction it actually generated this little starting point for me so if I click right here I can actually name this so I'm going to call this simple interaction these starting points allow you to have multiple prototypes in the same page so right now we're in the prototyping 101 page and you've already seen the first prototype that we worked with now we have another one so these are representative of flows so if I go ahead and I hit play on that you will see that here is my very basic interaction when I click it's going to go to that second frame it's very No Frills it's immediately going to that frame and over here on the left I mentioned the flows you know I can easily go back to my first example and I can go back to the example that I'm currently at so I'm able to go back and forth all right cool so I'm able to navigate between those two let's make that just a little bit spicier just for for fun because we're on the live stream today I'm going to choose smart animate and we're going to talk about smart animate shortly but I just want you to see how quickly you can create something that seems kind of rich and interesting I'm going to make a little custom bezier there right this is just the type of motion we're going to talk about what that is and so now we're going to have that also go back in the same way right so each one of these noodles has its own interaction details that interaction details panel exists between all of those interactions so I can hit play and now I can see that we actually have a little animation happening between them and there's certain conditions that need to be met in order for it to animate you know as smoothly uh as it is and we'll be talking about that shortly but I just wanted to show you so here this is the creating creation of a very basic prototype and I often encourage folks to make very simple prototypes with simple wireframes you don't want to wait till your design is fully fleshed out or fully done before you begin doing this okay so once again the interaction details what you're primarily looking at with here is there's the interaction type so it can be on tap on drag there's any number of things Mouse over Mouse out so different behaviors that you're going to make with the mouse or cursor right then you're going to have the event so more often than not you're going to be navigating between frames but there are some other event types and we'll probably cover some of them uh today then you're going to choose that destination or Target where is it going so in this event I created that in our interaction and then we're going to that end point and then that endpoint also has an interaction where it's going back in and then there's a little preview area that'll show you how the transition is going to behave you can dictate that transition right there and then down here I know I did this very briefly but you can identify the type of motion whether it's an ease in an ease out uh maybe it's a spring animation so how was the motion accelerating and de-accelerating as you're kind of creating that and then lastly the duration how long is that transition going to transpire for the uh the interaction that you're creating awesome thank you so um let's let's just do one more really quick I know that I have those assets so I'm just going to hop here this is directly on the canvas I'm going to draw another frame and uh let's stick with the iPhone 14. over here are my assets once again I mentioned that these assets were pre-created um I generated them so I have my little post asset so I'm able to drag this right in here right so I can drag that right in um so these are just once again they're made with shapes text and lines and then they're using Auto layout but just as easy to create an interaction between one to the next what I can do is create another frame and let's just say I bring this up I open this up so I'm going from frame one to frame two I can easily create that so untap navigate to right frame four once again you want to make sure that those are named correctly and then it's going to have a little smart animate interactions so I'm going to cover this in a little bit we want to make sure that we add a starting point so this is just like that quick example just to kind of recover some of the things that we did and there we go so I have a very quick interaction let's have that go back and let's play that one more time just so you can see how we can easily go from just making simple shapes to making something more meaningful that quickly all right I see some folks we are recording uh and I will be recovering I'm gonna like there's gonna be a lot of repetition in here um cool so someone was asking about my my captioning my keystroke oh keystroke captioning unfortunately if anybody here wants to learn keystrokes um hit command I'm going to give you a keystroke for that um hit command p and you'll get this little menu up here at the top and then you can type in keyboard shortcuts and then you will get this wonderful little menu that will help you envision the keyboard shortcuts uh uh in using figma so once again if you have difficulty finding that if you go in the top left uh and you go uh quick actions right so for international keyboard is going to be command P um or control p on Windows and for uh uh Apple um I'm sorry for for for us and and uh keyboard is going to be command forward slash so I can type in command p and then I can type in keyboard shortcuts and I get this nice little window all right cool and also that can be used for any number of commands so like let's say if you for forget a command I'm going to hit forward command forward slash and I type in frame um it will then pull that up and it'll even highlight the keyboard shortcut for you there on the right this is actually How I Learned figma Okay cool so scrolling um I'm gonna talk to you now a little bit about scrolling and how we can uh work with this any way to maximize left panel um Okay cool so let's what I'm gonna do here is uh I'm gonna show y'all how to to scroll here I'm going to select this Frame I'm going to go to my design panel and I'm going to clip this constant just so you can see how it is right so I have a component with a bunch of content going this way and I have a bunch of content going down so you see that when I select my frame I'm going to clip content and when I do that it kind of cuts everything off in order to scroll you need to have overflow content right so a frame is going to be a container that you're going to use to place imagery shapes and text and anything that goes outside of those bounds is Overflow so you can opt to see it by by going to the design panel here and choosing clip content and you can toggle that on and off right so even here I have this Frame I'm going to set that to clip content and I'm going to clip this content here so clipping your content is important because scrolling is something that you can enable on and off so I am going to select my this this Frame I'm going to go over to prototype window and you'll see this option right here overflow scrolling and there's several options that you can choose from so you can explicitly State you don't want something to scroll or you can say I wanted to scroll horizontally vertically or both and you might think well what might I use both for if you're creating a map that way you can scroll in both directions so if you think of Google Maps and navigating around that map that's what you can use that for so for this I'm going to employ vertical scrolling and for this one here this has horizontal scrolling and I will show you how to compose those in just a moment let's walk through that example I'm going to select that frame once again I'm going to add a new starting point so I'm going to call this one scrolling example and I'm going to hit play and that's going to take me once again so my prototype View mode and I can see here's my scrolling example and you'll see that I'm scrolling up down and I'm able to navigate left and right and the way that that works I'm gonna show you just with some very basic shapes so I'm going to draw out another frame and since we are working primarily with the iPhone 14 I'm going to stick with that uh David I added the starting point uh there's a number of ways you can do that when you click at the frame and you go over to the Prototype mode here you can add or remove a starting point you can also add a starting point by right clicking and you'll see add or delete starting point in the context menu when you right click so you must be in Prototype mode for that to work so right here I'm going to create yet again another scrolling example and what I'm going to do is uh add in I'm just going to add in some some new rectangles here right so I'm just adding them in I'm going to select this Frame I'm going to go to the design menu and you'll see that this Frame is currently set to clip content so I'm going to show you a little shortcut key magic real quick let's say if I want to have a bunch of these I'm going to hold down the option or ALT key to drag those down and then hit command or control D to just have a bunch of duplicates right so I'm just adding a bunch of these you'll see they they X they go beyond that frame and when I click on this Frame and I go to prototype I can set that overflow scrolling to Vertical scrolling right so now I can go ahead and add another uh starting point and I'm just going to call this you know basic scrolling and I'm going to hit play so here I'm doing this just with simple shapes and you can see that they are they're now all scrolling so if I select that frame go to the design panel I can unclip that content and you can see all of that laid out here now what I'm going to do is I'm going to hold down the option key or the ALT key on Windows and just drag this over to the right and I'm going to duplicate a bunch of these so once again when I click on that frame here I'm going to pull up my my layers panel so you can see this here right so I'm going to call this my my map right so I called my frame the map and you can see all of these rectangles are nested inside of that frame and so now I'm going to select that frame and clip that content once again so this is all clipped within here this time I'm going to use both horizontal and vertical scrolling so I'm going to select that frame I'm going to go over to prototype and here it says vertical scrolling now I'm going to change this to horizontal and vertical scrolling so now I'm going to hit play so one thing I do want to make sure that that you will uh make sure you're asking questions in the Q a panel um this way it's easiest for me to to get a sense of it so here I'm able to scroll and navigate and once again I'm using a mouse um and I'm clicking through this will also work on a touchpad there's also a figma app on the iPhone and Android that you can download so then this way you can preview these designs on a live device okay we're not necessarily covering that quite yet but it is something that you can do so here we go I can basically use that to navigate in both directions so that setting is going to be primarily available so when I click on this Frame you'll see it in the Prototype mode sometimes you know you're like oh man like where was that you're you're in the design panel and you're looking for that overflow scrolling just remember that anything associated with prototyping is typically going to be in that prototype menu it's going to be contextual so when I select the frame that's when I'm going to see that option cool so I'm sorry my my captions are are kind of live so like I have them uh turned on here all right so um let's let's cover one more aspect of this right um so I'm gonna draw in I'm gonna delete some of these for the for the top portion uh and I'm gonna draw out a a rectangle and I'm going to hold down the option key ALT key if you're on Windows drag that over to the right and hit command d control D on Windows all the way over I'm going to create a horizontal scroller that's also going to be placed into this Frame so I'm going to select this all and I'm going to create this as a component so uh here I'm going to create this as a component so it's it's like encapsulated it's like its own little thing and what I'm going to do is here I'm going to set my overflow scrolling on this component I'm going to set this to horizontal scrolling and you'll see this little thing pop up because right now it sees that there is no content outside of that area so you're going to get a little warning if it doesn't have the opportunity to scroll so I'm going to show you how to set the frame to create the ability for it to scroll so once I've created that component I have this bounding box area around it and I'm going to hold down the command key if you're on Windows it's going to be the control key and I'm going to change the size of the frame right so what I'm doing is I'm basically saying that this is now overflow I'll show you that one more time so I dragged a bunch of rectangles and remember you know a rectangle is basically a placeholder for an image a component but whatever you want it to be I have all of these rectangles here I'm going to select this component I'm going to hold down the command key and I'm dragging this over um and so I'm changing the area and then now when I go to the design panel I can clip content and and I can see that it is now clipped so I'm going to drag this component now into this Frame so once again holding the command key I can drag this to to both ends and in the Prototype window this component that I have here how to edit or add an element when it already became a component you have to use the the main component so I would recommend that you detach it if you have something that's already already existing so cool so here I'm going to take this component I'm actually just going to bring this right in and you'll see that the Overflow scrolling is already set to to horizontal so what's cool about that is when I hit play um oops let me let me set this one I I realize I made a mistake here uh let me I don't want it to I only want it to go vertically uh so let's set horizontal vertical scrolling let's set this one back to just just vertical and uh here we go I'm going to drop this in here and hit play and so now I can scroll vertically and then here I can scroll horizontally so when I scroll up and down that component is going to move up with the content but internally for itself it has its own scrolling capability so that's how here this is working I have a frame that has all of oops that has all of these clipped in here and it allows me to to scroll those right so you can have multiple of these components so if I get a copy and and I paste an instance of that component right so let's say I have two of these I'm going to press enter and change all of these to Red just so you can see them here so I have now two rolls rows of of horizontal scrolling components there we go and then I can still scroll vertically okay so pretty quickly you can have a very interactive scrollable prototype so yes this this will be recorded this will be shared um so just wanted to share that a little bit with you I did have a question somebody didn't understand how I I had so many squares um so here what I'm doing is I'm holding down the option key or the ALT key on Windows and I'm dragging this out right so the duplicate function recognizes the last thing I did if I do anything else this won't work but because I'm pressing command D immediately after duplicating it it's going to continue to make it in that direction so same thing here if I'm going to go to the right and hold down the option key and I'm going to press command D and then it'll navigate over to the right cool so I don't know what recent feature you're referring to the command D has been there since since the beginning and the scrolling has been there since the beginning this has been um at least since there's been prototyping so let's talk about transitions so we've primarily focused on on scrolling and uh now let's start by thinking about basic transitions so here I have these two frames and I'm going to go to my prototype panel and in my prototype panel I know we haven't necessarily uh covered this yet but if you click on the canvas you can change your device you could change the background color you know you have a whole bunch of different settings you can even see all of the flows that we've been creating uh you can rename those flows so if I say insta fig right I could rename them I can actually double click and and and go to them if I want to let me hop back up here um so there's a lot in that prototype panel so what I'm going to do is I'm going to create a transition between these two I mentioned already that the transition is part of the interactive panel we've done a couple smart animates but I want to show you some of the ones that exist currently um just to kind of break down this Behavior so once again this is the component that we kind of used already I'll show you how I got the image on there so if I go to my assets I drop in the the component that I have I'll show you a really cool plugin so up here is the inserts menu I'm going to go to plugins and I'm going to type in unsplash unsplash is a service uh it's free that that allows you to insert stock photography generated by by their uh community and so I'm gonna command click control click on Windows right here and uh find a photo to place in there so I'm going to choose this red fox so the thing that you have to remember about shapes in or images and video and figma is that they are just fills so if I command click onto this shape what that's going to do it's going to deep select that object you'll see here that it's nothing more than a fill on that shape so if I want to copy this image and transfer it over to this shape I command click on it I select the fill over there I do command C or control C if you're on windows so I copy it then I select this one here and then I can paste it and it'll paste right in and you'll see too you're probably like whoa this is not the photo of the the fox that I wanted um in the image panel you can choose how the image Maps so here I can say okay okay I want to crop this image and I want it to go right about there so there we go so now I have these two frames this is the beginning of my transition and this is the end I want it so that way when when I click on this image let me go ahead and let me apply the uh the fill one more time and re-crop this image I want to get it perfect and so what I want is when I click on this to open up this this with a transition once again swapping between design mode right I was making some tweaks and adjustments there now I'm going to go to prototype mode when I go to prototype mode and I select this Frame I select the object that I want to create the transition right so selecting that whole card and now I'm going to navigate over here so here are the details on tap navigate to right transition end that's the name of the frame and then here what we're going to do is we're going to walk through some of these transitions that we have I'm going to use a a move in and you'll see when you hover over here you get almost like a preview of what that looks like right that move in transition um I'm going to have this turned on Smart animate matching layers I'll explain what that does in a moment and then here I can choose how I want this to take place so we actually have a number of of different types of of tweens right so we have these spring animations but we also have um typical eases that you might see in other applications so for this I'm going to make it bouncy because why not I'm just having fun with y'all today so let's do that bouncy transition and then here I'm going to click on the wolf and then I'm going to have that go back right uh same thing we're going to have this move out let's see if that works I'm gonna hit transition start and hit play um so you probably let me make sure that I do add a new starting point so once again I'm going to select my frame I'm going to come over here flow starting point I'm going to add one and I'm going to call this my foxy frame and I'm gonna hit play so here we go we got the foxy frame might take a second for the image to load there it is and I tap and then there's there's the the wolf right and maybe that transition isn't our cup of tea but that's okay that's why we're we're here working we want to test this out you want to iterate on this design actually as a matter of fact let's say I want to iterate on what that looks like I'm going to select both of those frames I'm going to hold down the option key and I'm going to have another copy of that right I can even uh create a another starting point and just call this foxy frame 2. it's important to iterate on your designs you don't want to lose all the work that you have sometimes you want to test one scenario against another one to see how it looks or behaves so now we got foxy frame and Foxy frame two and so when I click on this I can change let's say I change it to an ease in and out and let's do that for both of those right I can select both of those arrows and this is actually new I can go here and I can change the easing Behavior oops hold on one quick moment there we go sorry I think I hit reset so I can select these two and I can change this to ease in and out so this will easen out that way and it'll ease in and out back so here we go and I click on this right now it looks a little bit better right and then I can actually find that previous one that first one all right there's the bounce and then I can test it against this other one which is a little bit more traditional it feels a little bit better so when I go uh uh back I can change that move out I can have it push and and I can have it push in the opposite direction so previewing the animation will give you a much better sense of how that transition behaves or performs so let's take a look at this and there we go so I went one way and it pushes back um so I can actually make both of those a push transition so let's say I'm going to push from that direction and then the going back it pushes in the opposite direction so this is going left and this is going right and this is important because when you're making prototypes you want to make sure that the human using it understands where something went so when I click on this cognitively I understand that that menu is now over there on the left so then when I go back it should go back in the same direction otherwise you know I'm looking at this and I might get confused to where my stuff went so that's why it's important to test out those ideas and see how they work and once again I can go back to my previous one and see wow I've made a big Improvement on the way that that looks all right cool so any any questions on that I've seen a bunch of questions but um those are those are the main Transitions and I'm going to do one more I'm going to make one more copy right so I'm going to select those frames and hold on the option key it's Alt key on Windows I'm going to drag this down and uh here I'm going to create yet again another starting point this is going to be Fox foxy frame three so let's add another starting point box C frame three there we go so what I'm going to do now is I'm just going to add a little header I'm going to draw in a shape right into my frame that's just going to sit on top of everything right it's going to be this you know this black box it's going to just sit up there right and uh let's say here it kind of moves up and then here it's it's down so when I go to my prototype I'm going to select both and select the one going this way I'm going to turn off Smart animate matching layers just so you can see why I'm going to do this so let's say if you have like a menu That's up at the top right so this is a black bar I can make that color a little bit more visible so you can can see that better let me make that blue and I'm going to make that blue so when I hit play we are gonna we're gonna be sending out the recording uh next week so the recording will be be sent out so here I'm going to go to Foxy frame 3. all right and basically you'll just see that there's just a shape that's on top of of both of them right there's this like little shape that's up here and on the second frame you know it kind of goes up a little bit right so it's going to go back and forth and so what we're going to do here is uh we're gonna smart animate between them so basically we want to look at both and we want to see how is this going to behave how is this going to transition and because it's named exactly the same on both of those frames right so right here let's make sure it has a name so over here we have this rectangle it's rectangle 83 we should always name things a little bit better so I'm going to select them both uh let's just rename them so I'm just going to call this top bar I'm going to call this here hop bar and when I hit play you know you'll see that we want it to to transition so I'm going to select the arrow going this way I'm going to choose smart animate matching layers and when we go back I'm going to choose smart animate matching layers and what that's going to do now is you'll see that the bar will move up and down as it goes from left to right so it's basically animating and I can have this animate off the screen entirely um and when I hit play you'll see that it moves off so it's transitioning here but then it's also applying a smart animate and the smart animate is what we're going to be talking about in the next section so once again having the three different sets are going to allow of iteration is going to allow me to see and and identify you know which is going to be the better one so oftentimes I encourage early and often prototyping you know prototypes that are that are short and sweet and that demonstrate the concept so let's talk a little bit more about smart animate and once again you know with this file we have a a video that you can play uh this is within the community file Alex has been graciously sharing the community file in the chat as we go it could be found at figma.com education um and so in this file you can actually view a bunch of the YouTube videos that will elaborate on these concepts with greater depth so here with smart animate um the one thing that you need to remember is that when you're looking at the layers um and you're animating between elements um so like let's say you want item one oh this is actually wrong let me do that let me how did that get done all right so item one should be going item one somehow this got a un undone I'll do a little live update here I'm just gonna hide that right let's uh just doing a little quick cover up so it's a hide the mistake uh there you go that's what it should look like Okay cool so it should be item one to item one and uh item two to item two um so this is a frame right here this is the the frame so I'm going to type that in frame it's really hard typing this out uh and then these are the things that you want to animate so you need to make sure that in the layers panel they're layered accordingly they have the same names so right here this won't work so item one can't go to item three and item two can't go to item four um and so basically you need that consistent naming uh and layer order when you're working and I'll make sure that I I correct this in the uh in the uh playground file as well um so once again I I've kind of demonstrated this already so here I have this kind of like a interactive uh uh I have this component here and you'll see that when I scale this this image is set to fill so the image is going to do anything and everything it can to fill that space so if I wanted to create a fun transition where this expands out right almost even expanding out of the frame we can have a a much more realistic looking uh output right so here you'll see that it's the same component right so this is called on this Frame so when I select that frame by the way if you double click on a frame it'll it'll find it right here so there you go smart animate begin um let me make sure I think I have some extra stuff in here let me get rid of that Okay cool so it should just be social post right that's the tiger social post and then same thing here this also has a social post so we're going from this one to this one and it's that same component so all we're doing is we're changing the sizing of it um and now we're going to make that transition so I'm going to go to prototype mode and I'm going to tap on that and it's going to go from one to two this time instead of using one of those pre-built transitions we're going to use Smart animate once again smart animate is looking at the layers and it's looking at the order and smart animate can animate um size uh position color but it can only animate very simple properties so I can animate something coming from the top and expanding but I won't be able to animate like let's say like individual drawings uh or like vector shapes it can only do very simple simple objects so here uh let's let's apply that smart animate um I'm gonna go to custom bezier just because this is my favorite type of motion curve um it's basically going to be an S you can draw out those values down here where it's like 0.8 comma zero um of 0.2 comma 1. so basically these values are just identifying these points like where that's going and where that's going so this can actually be used in code in CSS to generate this type of motion so here I'm going to use that I'm going to copy those values just so when I tap on on this Frame I can I can go back and you'll see that it keeps my settings right it's it's nice like that saves me time so once again you know doing the same thing over again we're going to have the flow starting point right so here we go we're going to start off with this I'm going to call this tiger card and let's hit play so the tiger card right here when I click it opens and it closes it opens and it closes yeah I absolutely love how it saves the previous selection between frames like it's a it's a big Time Saver and then also if at any point um like if I wanted to test that speed out right I can select both of those noodles I can select both of those noodles okay cool thank you Lauren I can select both of those noodles and change the duration and I can make it like let's say a thousand milliseconds so now I'm going to click on the tiger card and uh you know it can go much slower all right um so I I know we're kind of like already running a little bit short on time and I do want to provide some time for for questions I'm going to talk about interactive components really quickly once again you can check this out if you look up interactive components the thing that I care about here is that y'all understand uh what an interactive component is um so if I was to go to right here let's um I'm going to just move this down and move this down and I'm going to create another frame um just for the uh the card so if I put in you know this little card this card has a little secret associated with it and that's an interactive component so when I uh hit play on this Frame let me make sure that this is the uh what I'm going to do is I'm going to turn off the iPhone device I'm just going to set this To None So then this way it just plays this Frame um I'm going to select that frame and hit play so I have this Frame so I'm just prototyping this Frame out and I'm going to show you that this heart icon is actually an interactive component so if I was to take this little art right uh once again a component is anything that is uh can be reused you know on your on your canvas uh I could take a bunch of these and when I select that frame I can click and you'll see the interactive component you know it keeps those States so this is the first time I'm not traversing additional frames right to get the difference right I'm able to have this little nested bit that that keeps that content and I'll show you how that works so here this is what an interactive component looks like it's basically just multiple kind of nested States um check out figma's YouTube figma's YouTube we actually have a bunch of live streams uh concerning interactive components and a lot of a lot of content around that there's also an interactive component playground file that you can go to figma.com.com slash at figma and look for the interactive components uh playground file so here I'll walk you through how that is constructed uh so let's say if I create a frame and I'm just going to put a circle in there right once again we want to make sure that we're naming things so here I'm just going to call this Dot and I'm going to call this dot start and let's have another one where it is uh it's ending right so I'm going to make this go from being small uh we'll make it go big we'll change this to dot end the important thing is that the naming is the same I'm going to select both of those frames and I'm going to come up here and I'm going to create a component set right there's multiple ways of doing this right if you have an existing component you can add a variant but this is another way to do it create component set and I'm going to call this you know dot so here I'm going to select both of those frames just so we don't have that white fill and here on the second frame of the dot I'm just going to change it to Red so I have these two frames here okay we got to do questions at 355. uh could do you think is it okay if we go over just a little bit Alex or do we have a hard stop it for we can go over just a little bit awesome all right five minutes all right cool thank you um so here I just want I just want to cover this really quick so I'm going to go to prototype and I'm going to do a different interaction type so instead of on click I'm going to say while hovering right it's going to change too so instead of navigate it changes so it's changing to a different version of itself and here once again we can use Smart animate and we're going to have that Traverse very very short period of time so just like 250 milliseconds so I can now uh just copy that first frame of that dot um oops and and paste it here uh and and let's do command D D D D D D D D right let's let's just throw in a bunch of those so I'm going to select them hold down the option key all key on Windows right make sure you're in the design panel otherwise it's not going to work so command D um so I have this little grid up here now when I select that frame and hit play um you'll see that the little dots because it does it while it's hovering and when you're no longer hovering it goes It goes back to the previous one so it's a fun activity to learn and to begin to play with that um so I could actually you know I could take as many of those as I want just put them in that background um so here's a more practical example of that um basically I'm going to take this interactive component uh the way that this looks is it's using drag interactions to go from the first one to the second to the third um let's replace this I'm going to put this into the frame um and we're gonna do let's let's unclip this right clipping is something you have to get good at and let's just drop in some images so unsplash I'm gonna hit uh run just drop in some animals I love me some animals so there's one there's two and there's three come on Fox uh there we go all right we got the got the tiger so now I'm gonna clip this so basically what's happening is that the interactive component I'm overriding the colors now with the images so there's a drag interaction that goes once left and then unfortunately I don't have enough time to cover this in its entirety but hopefully this is inspiring for you to see the capabilities of what can be done um now that I have this interactive component set up you know now I can have the sort of like nested you know um photo gallery uh and so here I can drag those down and you know I could have another copy of it and I can unclip that and I can replace those images with with whatever I want let's let's do one more and let's hit run um so let's do the technology one so one two and three and uh cool so now when I clip this we're going to get down to questions in just a second uh let's go to design let's click that so now we have two little mini galleries inside of the same frame um [Music] there we go so uh and then lastly what I was going to show uh video in sections um if you follow me on uh uh Twitter uh and or on LinkedIn I have been sharing some sections videos but basically the important thing here is that if you press shift s you can have an entire section and that's what's allowing um us to do these sort of nested prototypes so shift s sections and basically what that means is you know when you create the uh let me make sure this is navigating here so I'm just going to drag that right to a section so what I did here was I have this prototype of these dogs going back and forth and then I'm just navigating to that whole section and and what that's going to allow is is to have you have those those separate interactions nested and organized in a way that's going to be meaningful so if I wanted to create a another Gallery you know of just cats um let's see and let's do cats cats uh I can easily do so and uh let's just take a quick look let's call it our cat gallery and uh let's just have something else navigate to it so here we go I'm going to click on that and that'll go to the entire cat gallery and and you can see how that that will transpire so then instantly we have a new cat Gallery that's now part of the the main prototype um so sections you want to check those out it's going to save a bunch of some so let's head on over we have some questions here um so a component is basically anything that is is reusable um so the point of making a component is to make something that you are going to reuse again and again that you can override so the simplest component that you can make um could just be like a bit of text uh made into like let's say a button and the reason that you make that component is that way you're not recreating the same thing over and over again if I were to take this make this into a component now I can have overrides and if I change the original bit of the component uh I can change let's say the the font I could change the color right it impacts it it impacts the other one and then the other one this could be one this could be two and they kind of live as their own with their own overrides but I can still begin to change how they behave there's still certain things that controls that behavior uh okay um replace a fill on an image again I'll show you that one more time when you have any shape you can uh just copy paste its fill area so if I was to just copy Lauren's photo I can paste it right there and then I can also copy over here off screen Alex's photo and I can paste it and just by copying and pasting it'll it'll change and it'll change that fill um so you can also go to an image go here choose image and choose an image from your desktop so like let's say I have this this photo here this might take a little bit longer to to load in it's a higher res image but you can also choose images that way the other thing here is that images behave just like video so as long as your your file is on a team then you can have video you can upload and drag video right into here I'll take a look at one more question um how did I do the quick color matching I press the I key so let's say here if I need to if I press a rectangle and I want to press I and I could grab a color right off of there so once again I press I and I can press get a color right off of there press I and I get the color right off of there so color matching um can we control the smoothness and easing of the scroll um unfortunately the the scroll itself is going to be dependent on the content that's in there um so yes you can control the scroll in a way that you can see one card at a time um that is the drag Behavior Uh so in the same way that I've constructed uh this um right here if you want to take a look the smart animate video contains an entire explanation of drag triggers so you can look up the smart animate video on YouTube for figma and it'll give you a detail of how those drag triggers work I'm not quite sure what that question is um can you set scrolling within a component um yes you can control scrolling within a component as long as you have a frame you could do that so um you can set that up thank you all so much I really appreciate you uh thanks for joining I know there's a lot of content there's always so much content there's always so much to cover um and uh yeah let's say so somebody said is there a transition to zoom in and out basically you want to create two frames have an object that's that's scaled up and scaled down that's how you're going to behave the zoom in and zoom out all right so uh once again I think we are at time uh thank you all for joining uh be sure to follow figma be sure to follow me on on Twitter um and and take a look at the

Channel: Figma

Views: 16,366

Keywords: figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, Figma tutorial, Config, design system, tutorial, 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:, secondary_feature:

Id: CNQ_N7Pvyag

Length: 63min 39sec (3819 seconds)

Published: Fri Feb 24 2023