Figma for Edu: Advanced prototyping workshop

hi everybody Welcome today this is figma for edu Advanced prototyping teaching with figma design we're going to get started in just a moment so just to give people the opportunity to to join so if you need to go grab a quick coffee or a quick snack feel free to do so I got my coffee right here okay I am joined by Alex that is also on the figma for edu team also I'm joined by Lauren I saw Lauren just hopped in here um as you join us feel free to let us know in the chat where you are joining in from so I'm coming in from Rochester New York so here make sure you set your chat to everybody we got Orlando in the house we got Chicago in the house we got Montreal Miami Nigeria ooh Brooklyn baby DC London Paris France Stockholm I love to see where our community comes in from you know just to see where everybody is in the world and and thank you because I know some of those time zones those times are not convenient but thanks for joining us here today I guarantee you we're going to be learning some stuff together we're going to be working in figma today we're going to talk about Advanced prototyping and as I just mentioned we're going to get started in about two more minutes just give people the opportunity to chime in make sure that when you post in that webinar chat that you are setting the chat to everybody so we can see where you are coming from you will also notice that Alex is posting in the chat that there is a file for today's Workshop if you head on over to figma.com education actually I might have to republish this one if you head on over to figma.com education you should be able to let me just make sure that I make it available for everybody there we go it is now published on figma.com education and there is an advanced prototyping file this is going to be a start file so you can follow along as we are working you know uh and learning together so once again I'm joined by Alex well my name is Miggy I'm a designer for Education uh here at figma Alex is a manager for figma for edu you can find us both on so Twitter or X I don't know what it's called anymore but I'm at Miggy and you have Alex underscore figma edu you can follow us to find out more about events and content that we make to help you better understand working with figma and fig Jam for the classroom scenarios so just so you all know this session is being recorded make sure I mentioned this before that you set your Zoom chat to everybody and as always please be kind so if you want to find out a little bit more about figma's code of conduct head on over to figma.com code dash of Dash conduct so when you're engaging in the chat and when you're talking with other people we do ask that you are respectful of the presenters up here and everybody that's joining us today as well as uh please refrain from sharing any links in the chat so no LinkedIn profile chats we greatly appreciate it okay so yes this session is being recorded I'm already seeing people asking can we access the recording later we promise it's being recorded I'm just double checking right now I see the little red dot going so you can rest assured this is being recorded will be available and we will get that out to you so if you might be wondering what this is this is figma for edu figma and fig Jam our whiteboarding tool are free for students and Educators you can head on over to figma.com education and there if you are a university student if you are a boot camp student if you are an educator at the University level you can get the free pro team tiers if you are uh middle school or under you might have to check out the figma K-12 offering it's a little bit different it's not what we refer to as self-serve the education pro teams anyone can go and sign up you register you verify buy and you can make that available however if you are in a middle school or High School District you are going to have to work that out uh uh at that level so if you are University if you are boot camp if you are in any kind of online experience where you're learning product design human computer interaction what you can do is sign up for figma verify your education status and here's the important part that actually matters very much today you need to create an education team the advanced prototyping features that we're going to be outlining and working with today will not show up properly if you are not in an education team so you want to make sure that that's working you'll notice that this file that I have is in my published community files which is an education team so if your file is in the drafts these features won't work for you so create the Education team put that file on here and you will have free access to this Pro feature okay all right so just a little bit more we run these monthly workshops often you can find out more at figma.com events we host them free for the figma for Education community so then that way you can build the skills and find the support that you needed um you know for a design for development for all things product design all right so let's see if there's any questions a couple things that I do want you all to know you can find this file that I'm currently working in right so this file all of these links can be found at figma.com at education and Alex is also sharing it so you can go right here when you click on that file you can open this directly into your own figma and this will be your file so if you want to follow along right there's a lot to cover today you can follow along but you'll be in your own file so feel free to make any marks any notes or anything that you may have there all right so we're gonna get started we have a ton to cover today this is gonna be a little bit more advanced once again we are talking about prototyping in figma and what prototyping is is a way that it allows you to test your designs you can find a previous Workshop prototyping 101 where we really dig into some of the granular basics of prototyping and I'm going to show you what a simple prototype looks like I'm going to walk you through some of the very basics of that very quickly so then this way you have a good Baseline before we fully get into working with some of the advanced features that we just made available about a month ago so here I'm going to click over into prototype mode the first shortcut key I'm going to show you you'll see there's there's page two over here on the left in the interface we're going to go into basic prototyping and in here you'll see I have a section in this section I have a couple frames I'm actually going to remove that extra oops I undid that one I'm going to remove the flow that I have here there we go I'm just going to remove that flow let's delete you and I'm going to click on this home screen and what I'm going to do is I'm going to play this prototype now we have a new way to preview prototypes if you select a frame I'm going to press shift space bar and that's going to let me see a test of my prototype right you're not going to see the little phone frame around it but I can come in here and I can actually test this prototype and if you haven't yet really worked with prototypes what they allow you to do is create a truly interactive design you can bring your designs to life and you'll see that this interface is created with shapes basic icons some imagery and it's used to kind of like represent what you might see when you're building out an app so you want to test your designs you want to test your assumptions you want to put things together in a way that works you'll see these little arrows are kind of interconnecting everything so let's kind of briefly overview how that works prototypes work when you have a frame and figma right I'm going to just draw a shape inside of this Frame so I'm just going to draw this rectangle and you'll notice that I'm able to move it around it's going to snap it over here so this is a start frame you get a frame by pressing the F key you can draw this out right and then that's a frame so this is a frame I double clicked on it I called it starts and we have a rectangle shape you'll see the shapes are over here you press the arc key it's going to give you that rectangle now I can name this rectangle by hitting command R and when I hit command R you'll notice over here it's representation in the layers panel is now highlighted I can name that you want to make sure you have consistent naming when you're working in this so in this instance you definitely want to name your layers here I'm going to name this rectangle I'm just going to call this button it's kind of an abstraction of what a button can be and then over here on this next frame I'm going to copy it command C I'm going to click on this Frame command V and we're just going to make it a little bit bigger I'm going to extend the size of it I'm going to select it I'm going to come over here to the design panel design panel prototype panel design panel prototype panel press shift e and shift e will take you between both of them so the shift key e will swap back and forth here in this second frame I can select that and I can change the color so what I want to do is I have a beginning frame I have an end frame I want to create a relationship between them I can do so in Prototype mode so I press shift e and when I'm in Prototype mode I engage with the elements that are on the canvas a little bit differently here I can click that plus key and I can drag this interaction noodle over you can see I have just kind of a graphical representation of it there on my canvas so I can create this connection between the frames so when I perform an action on this rectangle which is an on click interaction I'm going to navigate over to that end frame so in this instance I can also choose how I want it to transition over so I can choose that you'll see right here all the interaction details here's my interaction what is the event that I want to happen I'm going to navigate over to another frame I'm going to choose a destination to where it goes to and then here I'm going to have a bit of a transition I'm going to choose this to be smart animate and I'm gonna come down here and this is gonna be my favorite type of curve I call this my my interaction design curve um basically What's Happening Here is it speeds up and it slows down I usually put in the values 0.8 comma 0.2 comma um here we go hold on point eight comma 0 comma 0.2 comma one and I will copy and I'll paste that if you are following along but essentially I have a point that is eighty percent and zero on this graph and then I have a twenty percent and one on this graph and it gives you a nice animation let's give that a preview and you'll see when I click we get this nice nice robust animation and I can drag that back and get another on click event it's going to start and once again this is just a review we're just kind of talking about how this happens and if this is brand new to you and and this you feel that I'm going relatively fast you can check out the prototyping 101 on YouTube you can click on it right here and actually watch that video live so if this is not review for you feel free to check that out and once again I just want to highlight you know the uh uh depth with which you can kind of create some interactions so this is basic prototyping we're going to start talking about the next level of prototyping with basic prototyping we can click on boxes and we can navigate to frames and that is uh can be a very limiting oftentimes when you're designing apps when you're designing for uh interaction design you're just when you're designing products you need to work with data you need to work with information so figma has come out with a new feature that is known as variables variables are great on their own and what they allow you to do is create more Dynamic text when you think about an interaction when you think think about an app when you think about making it much more realistic you need to think about and consider the dynamic nature of it you want to populate it with new information so that is where variables comes in so I'm going to walk you through very quickly how to access variables and which variables we are going to use to make a more rich and interactive prototype so this is where the advanced comes from when we talk about Advanced prototyping now some of the content that I'm covering here today there's another recorded video that you can check out it's called using variables in prototypes 101 I'm going to just reference that as well so in the event that you know you're watching this content and you want to more deeply understand how to use these variables within the context of figma feel free to check that video out and I believe we can kind of send that as well so once again these videos are located in the file you can check it out at figma's YouTube youtube.com figma design I'm posting these here for reference so you can check them out later and just so you know that there's more review and we unpack those Concepts a little bit more in depth because you know what it is pretty it's pretty complex so let's talk variables I'm going to go ahead I'm going to type this nice and big variables and I can never spell it very uh Bulls there we go I'm going to press the K key and make that nice and big variables so in figma we currently have four different types of variables that you can use I'm going to click on my canvas I'm going to come over here to the right you're going to see that in the design panel under here there's this local variables option to see this option you click on the canvas right anywhere there isn't something if I clicked on this object I'm not gonna see it I'm gonna click on the canvas I'm gonna come over here click local variables and it's going to bring up this interface when you haven't yet created a variable you're not going to see anything right so what we're going to do is we're going to create our first variable if you haven't yet made one so I'm going to click that little plus button and it's going to give me an option to create a color a number a string or a Boolean so the first one we're going to do I'm going to come down here and I'm going to create a Boolean value now a Boolean variable is just on or off true or false so here we can give that variable a name so I'm just going to call this let's say layer underscore on so I'm giving the variable a name and I'm going to associate a value with it so I can turn it on and set it to true or I could turn it off and set it to false so what I can do with that is is I can take an object that I have here on my canvas right so this this uh is a components let me actually grab from this other file oh I don't have it there but that's okay I'm going to hop over here and what I'm going to do is I'm going to associate that Boolean variable to be on or off to this layer's visibility so I when I select this layer I'm gonna come over here to the right and I'm going to look at the layer panel and you'll see I can I can turn it on and off I can hide and view that layer and that little eyeball over there when I right click on that eyeball I can actually associate a variable with it so when I click on that it'll say layer underscore on right so when I click on it you'll see that that variable is now associated with this layer and when I come over here to my variables pane I can turn it on and off so what I want you to do is to see the relationship between this variable here and how it represents on the canvas and the reason that that's important is that when you're prototyping with it with variables you can control things like this right you can set interactions so instead of navigating to a frame you can also set of variable on or off right and that's just the first bit that's just the first value that we have next let's create another variable and let's create a number variable so here let's call this number we're going to use it to update the uh let's say that this is an item in a shopping cart interface I can give this number a value and I'll just say you know uh total underscore you know in underscore cart or like I'll just say item uh items underscore in underscore cart I want to give the variable a name that has some meaning and if you're working with other people you want to make sure that they understand what it is that they're working on as well so here I'm going to associate this value so if I set this value to 5 right and I want to have this text field that I have over here I see this text field this is just a piece of text right it's inter bold 24 and you'll notice that because I now have variables for this file I can come over here I can click on that little hex icon and I can apply the variable you'll notice that when I hover over it says apply variable and when I click on it it's asking me it's it already knows it's like oh I know what you're trying to do and let's say if I had a lot I can search I can say items in cart and it'll it'll surface it so I can choose five and you'll see that that is now five so when I increase it in this little data table think of it like an Excel spreadsheet I can increase that number and I can decrease that number so you can see that I'm moving this up and down and I'm changing the value that I have here in my little data table and because I Associated this variable with this text field this text field is always going to change and once again when we're prototyping we can add to this value we can subtract to this value we could do so much with that right let's go through let's say we have another variable let's create a string now a string is text and that's what we refer to it in code AS so a string value I'm going to say that this is like my item underscore name so I have items in cart I have an item name and what I want to do is I want to associate the item name with what I have here so let's give that item name I'm just going to type in the word Apple I love associating fruits when I'm first trying these things out so it's like a shopping cart item that's great so item name Apple so now I can come to this text field that's right here and I can use that same thing I go to the design panel I come down to my text I click on that little icon and you'll see it says okay do you want it to be items in cart that would make it 17 you'll see that it retains the formatting that's not what we want we want to put in its item name and now that I've set item name you will see over there that the item name has been Associated so if I were to change this to Orange right it's orange if I was to change this here it's a mango it's mango so there's a direct relationship of this variable that is tied to this item here and lastly I can create another variable this can be a color variable so I'm going to pick a color here and this color let's say I want it Associated it with a piece of my interface and I'm going to say defaults you know uh item BG right and it's going to be my default item BG it's my background my little item here I can select that color right it can come over here and here it's a little bit different I'm going to go to libraries and in my libraries if you've worked with Styles before you'll see your Styles but up here I have that variable that I just created and there it is so now if I make any changes to this it's also going to update so these are the four variable types that you have here in figma and you can use them to create data to populate your screens and what's great is we're going to use this to make a more realistic experience for a shopping cart prototype let's do one more thing here just to kind of round this off I'm going to create another variable this one's going to be a number and I'm going to say item underscore price and uh oops sorry it's a name this here item underscore price and I could put in a value I can say 5.99 and so same thing here you'll see that in this interface I have a a text field and I'm going to associate item price 5.99 so that is fantastic cool so people are finding this awesome let's go you'll see now that we first begin to understand these values right and we have them here but the problem is is once you need another type of item right so we have mangoes and we have this this value here but let's say you want to add more items um and Associate those and we're going to use modes and we're going to start to begin to think about how we can create interactions to manipulate these items right I'm going to show you what a finished prototype can look like and then we're going to start to walk through those steps to build the that together I'm going to come here to my finished example right this is referred to as the baked turkey or here my baked apples and this is what we're going to make when I click the plus sign you'll notice that items on the screen are now visible that weren't previously right because when there were no items you can't yet go to the cart so when I hit Plus us we're making you know the Prototype aware that wow there's an item and here there's one item and you can look at the cart and we go to the cart oh we have one item and we have our price so we're using this interplay of the variables to create this experience where I can now add more items and then we can also use the math to say oh we have four apples four apples times 299 plus two mangoes at 3.99 right equals six items at 19.94. so if you're a teacher out there you're probably thinking this is going to be a great way to get students to begin to prototype this is a good way to visually represent in a computer science class once again you got variables but now you can start to write what are known as expressions and we can use conditionals too right in a conditional is you'll see that if there's items these are visible if there's no ID items they're no longer visible you'll notice that I can't go into negative territory so what we're going to do is we're going to write the logic to say if there is more than one item right we're going to make this visible and if there isn't we're going to make it invisible and we're going to write that logic into this prototype to make a realistic experience of what it might be to kind of program that cart so you'll notice here we're going to move over to the prototyping with modes and conditionals I'm going to explain to you what modes are and what modes are and I'm going to show you just right off the bat what modes are is a way to represent your variables and have them be applied to different objects so we had one item that might have been our Apple item and you'll have a name and it'll have a price and it might have the number of itself in the cart and we could show whether or not it has been selected for the cart right but then you have another product and that's going to be mangoes and it's going to have its own price and we have to see whether or not it's in a cart and we're going to basically say Okay whether or not it has been selected so if you're on a pro team you have access to create at least four modes so here in this prototype I can make these four items however you can create as many variable collections as you want and I'm going to show you how to make collections so if you feel limited by the modes you can create another collection and also use four modes and you can create another collection and also use four modes the way that modes are are used I will show you it's just typically use in in product design to set a light mode or a dark mode so what you want to think about for these UI cards these these little cards that we're going to be making is you're going to have an apple mode and a mango mode and we're going to be able to use that in our prototype to create these objects all right let's see if there's any questions is the local variables concept only applicable to a particular file so variables can also be published uh to the team so right here these are going to be my local variables but then when I go into a publish Library I can send those out his mode same as a database table collection is mode similar to variant so mode I actually I'll explain that concept really quickly so here we might have two cards this card is going to be a variant of this first one this first card is going to be the uh item in the shopping cart and then this might be in a different view where you might be in the checkout so we can have a different variant but we can have the same data shared across that variant so the mode of this might be apple mode because the Apple mode is going to persist across both of those cards right this is still going to show an apple this is still going to show an apple but its view might be different and you can articulate this in many different ways figma just kind of provides the framework for you to kind of decide what is best for you when you're beginning to structure these things out so let's begin to to kind of unpack that I'm going to explain the concept of a collection I'm going to show you how to create modes and we're going to start to think about you know how to really use these these variables um so we've kind of already did this here where we're checking the in cart count right we have this kind of plus and minus that's actually where the majority of our interactions are going to take place and then here we have the name and we have the price um so let's uh set that up let me just check here all right cool so I'm going to click on my canvas I'm going to come over here to local variables right and we're here in our first collection right little did we know when we were setting up these variables just kind of begin we were working with our first collection right so what we can do is we can associate these same variables with this item that we have here so I can select that text and I can set that to be the item name I can select this and have that be the item price I can select this here and this will say items in cart right so we have all of these values right and here are all of them sort of represented let's even add this color that we have here right and we're going to set its color once again so I'm going to go to libraries default item BG so we have all of our values here I'm going to create oh I'm also going to set this value right here it says mode name I'm going to just set that to Mango again right so mango mango I'm going to move it right there so next you can see we've already created these variables right it's basically what we had over here in our previous example but now we're going to do is we're going to add a new mode to this right and I'm going to rename this collection and I'm going to call this uh example card right so this is our example card collection we're going to create more collections when we work into that other prototype so we're going to name this mode right right here it says value but what we're going to do is we're going to type in you know mango mango card right so it's mango card mode now this plus button over here you'll see when I highlight says new variable mode so we've already made the variables to populate that card so now let's make the content for another card so here I can set this now to Apple we're going to call this our Apple card um I'm going to let's just say the items in cart we're going to set that to zero we're going to set its price right let's set this price Apple apples are Apple is really expensive so let's say 6.99 right and then let's set a color for that as well so I'm going to make that like red so we have these new values right and you'll see we have this mango card I'm going to select it I'm going to hold down the option key if you're on Windows it's going to be the ALT key and I'm going to just duplicate this down right so I just have a copy of that card and of that text sitting just beneath it and now what I can do is with this all selected I'm gonna go over to the layer panel and this is the important thing this is the thing that tripped me up when I was first learning about this is that here in the layer panel when you hover over that little icon it says change variable mode so what we're going to do is we're going to change the mode from that mango card over to the Apple card let's click on that and you'll see example card is the collection and by default it goes to Mango card and we're going to select that down and change it to Apple card now when we change that layer mode now all of the values uh is are going to swap over and there it is all of the values swapped over we now see that it's Apple we have the color that we associated with there here if I turn this on or off oh we didn't set that value yet we will in just a moment but you can see that this is now populating all of it so we can set that and one other thing that's really interesting I just want to highlight your your eyes over here in the left is that on that layer you will see the visualization of that being the Apple card right so if I go to my mango card and I go to its layer over here in the design panel I can choose mango card and as opposed to it just looking for the defaults it will Now display its mode right so what's cool about this is when you swap out and change its mode and you'll see example card Apple card we could change it to Mango right we can change it back to Apple it's pulling all all of the values directly related to its mode okay so it's pulling all of the values related to its mode to then populate it so if I was to update this apple I go to 34 and you can see we have now 34. the one thing that I didn't set on here was I want to be able to set this little icon up here in the top right that's showing how much we have I want to set that to either be true or false I want it to use this layer on value right let's give it a more meaningful name let's just say you know um let's say uh selected right so this is our selected and if it's selected it will be true if not it'll be false so let's select that card let's go in here we want to make sure there it is a Mount um and once again that one's a little bit weird you know we can come over here and layer I'm going to right click you see that selected equals true so now if I turn it off you'll see that I select it false it hides and I select this one off um and it hasn't yet been set so we want to make sure that we set that one as well so I'm going to select that we have the amount uh we come over here to the layer we right click we just kind of get a little eye poke and then we're going to choose selected equals false there we go so now we can see if it's true or false and because each card has its own mode it's pulling the variable to sort of represent that there all right so now let's start to think about how we're not just populating the data of the card but we also want to create some math right we want some some math to kind of take place so here I'm actually just going to delete that and we're going to drop the little card that we have over here I'm going to copy this I'm going to come over here I'm going to paste this and and what I'm going to do here as well I'm going to select you know that Apple card okay and what we're going to do is we're going to create an interaction on the plus icon so when we interact with that plus icon it's going to increase this number we're going to set the price here what is the price once again let's find it item price it's 5.99 right and we're going to have this other value that's a total and so we're going to add to that total so let's make sure that this is in the right mode so I've selected that value and another thing that we can do is I can set the mode on a parent element because these are inside of this Frame let's say I select this here and I change let's say I selected this card um and I no longer want it to be an apple card right let's just say I said it's an auto right so this is auto this is auto this is auto I can scope it at a higher level I can set this Frame um as being you know Apple card so now Everything Will Change inside of here right so if I select that mode I change that to Mango card you'll see that the price and everything updates um so let's just go to Apple card I'm going to set the items in cart to zero I'm going to set the items in cart to zero and we're just going to create a basic interaction it's going to update this here now that total is going to be a value that might be outside of the scope of here right we're not going to have a total for mango card for Apple card we want a total price of everything so let's create a new collection I'm going to create a new collection I'm going to call this collection checkout and in here I'm going to create a variable called that is a number called total right so total and this is its value it's currently zero I like to test it out I'm going to put in the value of 6. I'm going to click this text field here we're going to go over here in the design panel in the text field I'm going to apply a variable and you'll see that we have our two collections here we have our example card values and then we have our checkout and our total value and once again if I were to just type in total that variable is going to come right up to the top and now I can set it to that text field so then here if I want to change that value back to zero I can click on it and type in zero so now we're getting to the prototyping part I know it's 740 or I'm sorry for I'm not 740. it's a uh it's it's about 40 after the hour and and we need to consider you know like all right we're just getting into this prototyping part there's a lot of setup but there's a lot of payoff once everything works so I'm going to come over here I'm going to click on that prototyping tab so I clicked on Prototype I can click this plus button you might need to click a few times so here I'm on my cart item I double click again I'm in the details I double click again it's in the card account and then I double click and then I got my plus button so you know you can also command click and I get right onto that plus icon so I'm going to write interactions onto this plus icon and the great thing about it when we do it in the main cart we're going to apply it at the main component definition and it's going to magically bubble up to all of our components so if you're working on a design system and and you have an element that's going to be populating values um you know there's going to be some kind of like really fun extensibility there so I'm going to select this item I'm going to go over here to interactions and on click I want a new action to happen right you'll see we have set variable we have conditionals and those two are going to give you a lot of options you're probably not going to see it if you are in a drafts file so you want to make sure you put the file into your uh uh Education team right so here on click what I'm going to do is I'm going to set a variable right and what I want to do is I want to add the item in cart so I'm going to select items in cart oops I'm going to set the variable items and carts and I'm going to set it to a number so right now we were setting our variables in our little data set but now I'm going to set it dynamically live as the Prototype goes so I'm going to set items in cart and I want to add to it I want to iterate to it so when items and cart equals one then I want to add one to one so then it'll be two then when items in cart equals two I'm going to add one to that so it'll be three so I'm going to set items in cart to items and carbs plus one so what we're doing here let me I can make that a little bit bigger y'all there we go so I'm setting items in cart 2 itself plus one I'm iterating on that value and I'm making it add and and add upon itself right so we have set variable and boom we're doing that right this is the thing that we're doing now after I've done that I might need to set another variable what's great about Advanced prototyping is I can now have another action happen on top of this we can create an entire series of interactions so let's set another variable and we're going to set the variable total right so total and we're going to write this expression we're basically going to say um are items in cart right multiply right it's a little asterisk sign we can write what is known as an expression so we're going to apply the math here we're going to say items and carts multiply by the item price so every time that we are uh let me make sure I said that's a total there we go total uh items in cart times item price let's see if I did that right I'm doing a live stream sometimes these things don't work out but let's see I'm going to select modes I'm going to press shift space bar let's make that a little bit bigger and as I add you'll see that it's adding those values so I just keep clicking so you see 17 18 19 20 21 22 23 right it's adding we haven't set the minus one yet but you can see this math happening in real time which is great cool yeah it's a lot of apples right so remember this is going to be recorded and it will be shared out so very very powerful now let's take that same interaction and we're going to now subtract from it right so we can basically say okay like what is that value let's let's subtract that count so here I can click on interactions so now on click I'm going to set the variable uh I'm going to take items in cart and I'm going to set that to items in cart minus one right so previously we were adding and now we are subtracting right so items in cart equals items and cart minus one let's create another interaction here let's set another variable and we're going to subtract from that so now we can update that total price once again and it's going to be the same thing we're going to use items in cart multiplied by the item price so items and cart multiply by that item price we have that expression and we're going to be subtracting so when I hit shift space bar we're adding and now we're subtracting and unfortunately I can keep subtracting and going in the opposite direction even though that's not really the way that shopping carts work so what we need to do at this point is now create what is known as a conditional that's going to check that value as I subtract away from it okay and another thing that we want to do too you'll see this this little nub up here right we want that to go away when there is none when there's none in the cart we want that to disappear so what we're going to do is we're going to write a conditional so I'm going to double click in I'm going to select that minus and here you can see that we're subtracting away from it right and here you know what we want to do is add in a a conditional so let's uh uh let's delete that one I'm going to create a Actually I don't even think yeah yeah let's add a new action let's add the conditional and if the conditional came after the set variable I can just uh I can uh minimize it and I could drag it above the other one right so you can drag and move these around because what is known as order of operations what do you want to happen first what do you want to happen second what do you want to happen third so I'm going to write this conditional so if items in cart right we want to see we want to write this expression if it is right as long as it is greater than uh let's say one right so as long as it's let's let's even say you know greater than or equal to one I always kind of I kind of mess this part up let's see if it's greater than or equal to one we can now perform an action so an if statement is a logical statement so if items in cart is greater than or equal to one uh what we're going to do is we're going to set the variable that is items in cart and we're going to set it to itself minus one so what we're doing here is we're checking against items and carts so we don't want it to go below zero right we're trying to keep it gated above zero so we're going to allow it to subtract all the way down so if item is greater than or equal to one then we will allow it to subtract right cool so as long as that's going to happen we're going to subtract let's see that in motion so if I hit minus you see it doesn't go below that but I can hit plus and I can hit minus and what I'm doing is I'm gating I'm kind of like stopping it from from going lower right and I'm bringing that down now how are we doing on top we got some good sub we got some now as I'm decreasing that let's see here we go my conditional um we can also write an an else statement so as long as it is a larger right like that's great we're going to keep it there so as long as the items is greater than or equal to one otherwise we could do something else but what I can also do I can just write an entire other conditional and I can say here let's create another conditional I'm going to move this conditional just above our set variable I'm going to uncollapse it and I'm going to say if items in cart equals right and you're going to put in a double equals it's a comparison operator right so you'll see that if items in cart is equal to all of the different operations that you can calculate here you can see equal to not equal to greater than greater than or equal to less than less than or equal to so we're going to see if it is equal to and I can even choose less than or equal to if you believe that it might accidentally go below there what we can do is we can set that select value we're going to set selected um and what we're going to do is if is oh I'm sorry if it is less than or equal to zero sorry we're going to add an action and we're going to set the variable of selected and we're going to set that variable uh to false right so there it is so if it is zero we're going to set it to false otherwise we can set it selected to true oops to true there we go so now what we're going to do is we're basically going to set that value of selected and since its default value is actually going to be off right we can um come over here I'm going to click on the canvas I'm going to click on local variables I'm going to go to my example card example here and we're going to set that by default to false and when we do it's gone right it's still here if you look in your layers panel you'll find it right there's a little eyeball it's closed but what we're doing is you know when we add oh and that's actually a funny thing because we you'll notice that it works on minus but it doesn't work on plus so we need to make sure that we're setting that value on plus as well so here I can go back to my plus interaction let's go to prototype and you'll see when I click on the plus I can also set uh let's see set a variable of selected to true because whenever you're hitting plus there's always an item in the cart so you don't even need to write a conditional for that so plus one two three four and now when we hit subtract and then it disappears so one two three four five and then it goes all the way back and then it disappears all right cool any questions let's see all right awesome I think I think you all are like filming this free great great okay next I have this whole example here my next study hall course so I have these videos they're on YouTube and they're called study halls I'm gonna walk through the creation of this entire cart so be on the lookout for that uh until I do I'm gonna walk you through the complexities of this and how to put it together so basically if you have a more advanced prototype this is kind of like the start file I will include the finished one and how that works in that study hall because we're coming up close on time and I do want to provide question and answers so you'll see here that for each interaction what I do is in figma you can just work things on the canvas so what I like to do is I will take a screenshot of all of my actions but I write them out as pseudo code so when you write them out as pseudo code you can begin to kind of articulate how the things are happening so so I'm just going to walk you through as we're closing out here today what this example entails and what are some of the interactions that are taking place I'm going to show you to how to kind of like update that that total price actually before I do so I just want to show you here that this mode if I were to let's say add another mode here hold on let's go this is where we were if I was to take this whole frame I'm going to hold down the option key I'm going to drag it here if I set this to Mango mode right and I run this mango prototype let's have that load here let me try that one more time see I'll hit play I know it wants to open up it wants to be my friend there we go you can see that now we have our mango values right so we have our mango values and then likewise if I wanted to create yet again another mode I'm going to go to my local variables I'm going to create another mode and this can be pineapple and that's false that zero we're going to name this pineapple and then here let's give it a new color all right a pineapple will make it green and we'll set a price for that for like 6.99 six 6.99 and there we go cool cool cool so I can duplicate that once more just so you can kind of see it all kind of pan out right so this mode I can now set that as my pineapple card and you'll see that pineapple card is now fully updated um and as I go to my local variables I can give this let's say 9.99 you know so when I run and I select this Frame I run that prototype it will show the the pineapple examples right and it has that total and it works so what's cool is that you can kind of iterate on this and kind of grow this in a way that it becomes interesting so when you look at this final example here which like I mentioned I'm gonna make a full on it's probably going to be about a 40 minute video I'm going to put it on figma's YouTube I just need to get back and and and and spend a little bit of time I wanted to see how y'all were reacting to this one here and I I can tell that you're really thirsty for this content so I'm happy to provide it I'm going to select this menu button here I'm going to go to prototype let's take a look at once again what is happening so here now I have three objects that each have their own mode if you're wondering how I put the images in there uh the images are just a matter of placing them so instead of those colors I can hit command forward slash I can place image and here I just happen to have those three images so I just click on that shape in that interface to make them that's that's the only thing that I did there so here in this finished example what I'm doing is I create a little scroll interaction and as soon as I'm adding them right I'm adding and updating all of the items in the cart and if they're selected they show up in this cart and they show total items in the total price so now I can come back here and let's say if I remove a few and you'll see that that's now updated we're using the booleans we're using the numbers we're using all of those different variables to kind of create the experience of this now the only thing that we didn't really get to cover is how to access the mode and I'll show you right here it's going to pull up on this plus symbol I'm going to show you how I calculate the total price the total price what I'm able to do is select the mode of uh or the the variable within the mode so I'm basically able to add in all the values so like I'll show you here how I write out that total price when you have multiple of those objects in the same frame so here what I want to do is I'm going to say items uh right here you can see I have my cart items so I have my in cart count but I want the in-cart count of apples so if I press the back key you'll see that I can now select the mode right I just have to click on this variable and if it has a mode I can choose it so I can say oh here I want my in-cart count of apples to multiply by right my um price right here and I can click on that of my apples right so in cart count of apples multiply by the price and I can hit plus so I'm writing this expression and it's going to honor the order of operations so apples multiply by the price then I can say in cart count and I can choose by clicking on it and get the mode of mangoes right so we got mangoes multiply by the price and have the price and we can click on that of the mangoes and so I'm writing out this expression plus the in-cart count of let's see what we have here the incart count by clicking back or typing right there of pineapple right multiply by the uh price of pineapple and and that is how the expression gets gets run so you're able to access and and of the specific value within the mode to create that total value so now when I run this right and because I applied that on the component itself that bubbles up to all of these so this card right here I don't need to put the interactions on every single card it's on the main component right and then it gets applied to those instances and essentially once you're you're doing that it should update and that is a uh updating the total items and the total price and as I mentioned there will be more content we're going to dig into this concept a little bit further I just wanted to cover how to access these things it can try to demystify some of them so feel free to uh check check out some of the other Pages uh if you haven't take a look at uh using variables in Prototype 101. uh and how are you doing Alex hey Mickey it seems like you answered a lot of questions while we were moving and so I actually think that makes more sense to wrap up but before everybody goes I just dropped a feedback survey so y'all can give us feedback on this session and also propose ideas for the next session I'm also going to drop in a link that allows you to sign up for our next Workshop so Miggy is going to be work running these workshops every single month so please go ahead and register for the next one if you loved what you saw today and again please leave us that feedback because we'd love to know how we did and how we can make this better for you in the future over to you makes to close us out all right cool thank you so much so I will be sharing the finished prototype with this um I'll be uh uploading that into the figma community so you can take a look through that and and uh be able to kind of work it out uh on your own as well so make sure you check out the file in the community thank you so much for joining from all over the world whatever time it is you know makes you have a wonderful morning afternoon or evening I hope you all get some rest and I have have a fantastic weekend so once again thank you so much hey Mickey have you started the webinar so I think you might have to close us out okay all right take care everybody hope to see you soon foreign

Channel: Figma

Views: 37,901

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 system, tutorial, education, figma for edu, variables, product:figma_design, audience:designer, language:english, format:standard, produced_by:figma_for_edu, theme:prototyping, event:none, series:figma_for_edu, type:feature_tutorial, level:intermediate, primary_feature:advanced_prototyping, secondary_feature:variables

Id: LfldqERs0aw

Length: 59min 48sec (3588 seconds)

Published: Mon Aug 21 2023