Advanced prototyping with less complexity with variables - Miggi, Ricky R, Garrett M (Config 2023)

foreign [Music] my name is romelia Thai I'm a brand designer on the brand Studio team and I recently worked on the dev mode launch and I'm so excited to be your host I hope you all were able to enjoy a lunch break and meet new figma friends or catch up with some ogs if you need help finding your way around look for a friendly face wearing a blue config tee we have hundreds of figma employees who have traveled near and far to create an exceptional experience for you all cool so let's get started we have a few members from figmo's prototyping team here to share more about figma how figma is bringing prototyping and design closer together the team is going to dive into how to build a new low-carb prototyping world that's much more a dynamic and iterable this means fewer frames and connections done with pasta pictures please welcome to the stage Mickey Ricky and Garrett [Music] hello everyone we're gonna get started with just Garrett I am the product manager for prototyping here at figma and I am so excited to be here with you all uh the team has been waiting a very very long time to get to yesterday we can finally open up all of these features for everyone here I hope you all have had a chance to start playing with them today we're going to get real we're going to go into a deep dive on prototyping show you how it all works and hopefully by the end of today you'll have a pretty clear idea of at least where to get started and where to go to dig deeper on all of this new features please appreciate all of the Aquatic visual puns that we have snuck throughout this presentation for you all so before we get into the deep dive I wanted to give some context on why we build these features because I actually think it'll be really useful for understanding how to best make use of all of this new functionality so figma is an interaction design tool and prototyping is a key part of that design process but prototyping can often feel kind of clunky it gets left to the end of the process usually when the design has settled and we want to know why is that let's dig in a little bit so figma like many tools gives you this vast empty canvas to create you land on a blank screen with an idea and you start exploring you make some shapes you move them you duplicate them you make a mess you clean it up you make it messy again and then you clean it one more time so you can share it with a friend and you spend a lot of time at this part of the process it's only sometimes that you might decide that it's time to add some interactivity and this often happens at the end of the process when so you can share it out you want the person that you share it with to fully understand your vision and you need to add interactivity to achieve that and you need to make sure that it behaves as realistically as possible but they give you some really good feedback and then you start to feel a little bit anxious you're so deep in the process at this point that starting over again feels like scaling a whole new Mountain where is that Dreadful feeling coming from your tools are getting in the way we call these pasta pictures on the prototyping team some of you may have picked up on some of the pasta puns that we love here at figma and we'll see pictures like this one posted online people post them as like points of Pride because they spent a long time building something that was truly amazing and this is happening because for realistic prototype you need hundreds of nearly identical frames and thousands of connections but at this point there's really no turning back changing that one small thing means tearing it all down and starting over from the beginning so the problems become pretty obvious here you can't understand anything by this point you certainly can't change anything at this stage and it feels terrible to invite someone else into this file to collaborate with you because you like frantically warn them before they turn on prototyping visibility just wait I need to tell you like how this all works so the goals become pretty obvious and so last year we actually set out to to kind of fix some of these problems and starting from the foundation of we need it shouldn't take this many frames to make a prototype and if we could fix that problem and allow you to make simpler prototypes then we think more good things would start to fall into place and that's what we've been working on over this last few months today we're going to show you these new these new Advanced prototyping features that we've built to help you move into building prototypes that use variables to hold State instead of frames so that you can move from a world that looks like this and it's one that looks like this and hopefully as you grow familiar with these features prototyping starts to feel like an integrated part of the design process and less of a one-way door that you're walking through at the end so let's get started because that's what you're all here for Ricky an engineer helped build some of these features and Mickey one of our amazing designer Advocates are gonna are here to walk you through these Concepts but at the end of this session I'll come out and to wrap things up but you should have a pretty good idea how to get started and where to go next Ricky and Miggy let's hear from you [Music] [Music] oh thank you thanks Garrett yesterday we released variables to figma folks who have written code before will be familiar with this concept these will be for one be used for design system theming they can also be used for leveling up your prototypes so that they you can create simpler more powerful prototypes with fewer frames prototyping and figma has typically been mapping out every single state of a prototype on the canvas and using interactions to navigate across all of the states in a functional but unfortunately not very flexible way for example with a counter you will need to map out a frame for every single count and this can easily grow to tens of hundreds of states that you can that you need to keep track of and one prototype but what if he could keep track of that number that we show and increase and decrease that number based off some user interaction we would only need one frame to show the state of one message two messages and 24 messages here instead of having 24 different states account for 24 messages we can have a single frame with account icon that just updates based on the amount of messages we have and that's what we call variables variables are like containers that hold information to store and manipulate data they can hold numbers texts dates or other types of data and for prototyping and figma we have four types of variables that together can hold all the information you might need for your Advanced prototypes we have numbers strings like text booleans like true or false and colors like hex values here's a simple analogy imagine you have a set of labeled jars where each jar can hold only one item each jar has a unique label and you can put different items in these jars oops can we go back one slide um HR has a unique label and you can put different items in these jars variables work in a similar way instead of physical jars you have virtual containers with names each variable has a unique name just like the labels on the jars however instead of storing physical items variables hold data or values similarly each variable can hold only one value at a time you can give these containers any name you want like button name button radius or button color and these names are like the labels on the jars now let's say you want to store the corner radius of a button in a variable named button radius you can do that by setting the variable to a specific value for example you can set the variable button radius to 20. it's as if you write the radius value on a piece of paper and put it inside the button radius jar later on if you want to use or reference the button radius in your program you can simply reference the values stored in the button radius variable it's like opening up the jar and looking at the number stored inside and if you want to change this value at any point you can open the button radius jar and replace the value stored inside with another number variable if this starts to sound like tokens it's because it's the same concept variables operate much like design tokens and that they can store this information can be integrated elsewhere in your designs and make sure to check out the full launch list to understand all the ways variables can be used across figma all right so variables help in performing calculations storing user input tracking information and much much more while variables themselves hold only one value you can create multiple variables to store different types of data in your prototype as you can see here and when we talk about setting variables it literally just means assigning a value to a variable or placing an item into a jar and for prototyping Sigma we can use these variables to change properties of objects dynamically by binding variables to various properties of objects and setting the value of these variables real time in a prototype and Mickey is here with me to show you how to get started with variables in figma awesome thank you Ricky thank you all so today I'm going to show you all how to actually begin to use variables for yourselves I'm going to give you a nice walk through on setting variables in figma all right so let's begin I just want to make sure y'all can see what I see you can see it that's fantastic so the first thing that I want to introduce you to this is the variables panel I'm going to show you where it is and how to access it if you have never used various variables before within figma you're not going to see the little hex icon and this is going to be the entry point for you to begin working with it so what I'm going to do is I'm going to click on the canvas right here and you're going to see over here I want to make sure it's big enough for y'all on the back this local variable is paid I'm going to open variables and what that's going to do is going to bring open this window this is where you're going to see all of your variable collections for each example that I'm going to walk you through today I'm going to have a different collection so then this way we can isolate and kind of work with them in a much more conducive way so here is the variable name and here is the value so once again collections are going to be up here in the top left of that variable pane the variable itself the name that container that Ricky was talking about that's where you name it and then right here because this is a string this is that plain text value these are the types of variables that you can create currently in figma we're working with color numbers strings and booleans I'm going to show you an example with each one today so Again by creating our first variable and binding it to a text field so right here let's say I have a text field right this is just a normal text field in figma I can go ahead I can type into it but then we also have that that variable that we've already created right I go into that pane here is this variable our welcome message now what I can do is I can bind that welcome message to this text field let's select it I'm going to click on this icon I want you all to see where this is you see this little icon right here it's in the text panel when I click and apply that variable what that's then going to do it's going to ask me which variable do I want to bind I'm going to be able to search for the variable that I'm going to work with so I type in w-e-l I see welcome I can see the variable preview and I can see the value that's going to go into that sex field I click it there it is now the really cool thing is once I go back into local variables I change this so I can say hello world let's say I you know just change the Emoji or something right let's put a little heart in there right fill in a little bit of heart see do let's do a fire Emoji there we go I got my heart I press enter and it's going to update so there's this relationship between that field and that text field by the way this is a completely live demo so anything can happen so let's let's uh let's see how this goes so next up you can see that in this next slide this is already bound to that variable what I can do is I can create an interaction that's going to allow these buttons to set that text field so this text field is currently bound to that welcome message variable and if I go into prototype mode in just a minute I do want to kind of highlight a few shortcuts here I'm going to pull this up on the screen in case you all want to take a screenshot these are some prototyping shortcuts that I'm going to be thinking about as I'm working shift e is going to allow me to toggle between prototyping mode and design mode the canvas is going to look a little bit different when I'm in each mode so shift e is going to allow me to toggle between those it's the same as going up here prototype design prototype design shift e shift e shift e shift e it helps to kind of just remember that when you're working fast you don't have to remember all shortcuts all the time but if you have a given workflow like prototyping these are the ones you want to remember the next one I'm going to show you is this preview inline prototype and what that means is that we have this new feature when I press shift space bar and it plays the Prototype inline I don't have to leave the editor to go into full presentation mode so I can see this happening in real time and you can see we have an interaction here I'm going to press shift e and when I'm in prototyping mode you can see that I have this little visual indicator this indicator lets me know that there's an interaction on that button let me just zoom out there you go all types of zoom in here hold on see he told you live demo that's how it goes so what I'm going to do let's go to that prototype mode here I'm on this button here's the interaction over here on the right the interactions clicks set variable I can click to the left I can copy it I can select this button here I can hit paste it now has that interaction click this button here I hit paste it now has that interaction I can click and what I'm going to do is here on click I'm going to set the variable welcome message to a new message so let's change that to hola and then I'm going to change this last one to bonjour I have a terrible French accent bonjour so now when I preview this we got hello hola bonjour so what I'm doing is I'm setting that specific string of text yeah all right cool y'all feeling this let's kick it up a notch let's do something similar but different to help you fully grasp this concept so I'm gonna work with another collection right so this is the first collection that we have with welcome message this next collection I have three new variables I have item one item two item three tomatoes cheese milk and with that tomatoes cheese and milk I want it to populate this interactive surface that I have here and I already have the first one pre-populated when I click on tomatoes I come over here and you can see that that text field inside of that button is already bound to item one there we go it's item one so now I can click on this button here apply that variable and I can apply that to let's say item two right here item two cheese I can click on that Third Field bind the variable item three milk so now when I go into prototype mode shift E I can switch over now I'm prototyping I can see those interactions on the canvas I have a starting point up here let's go to tomato and let's see what we have set variable welcome message to item one so I'm setting a variable with another variable when I click on my canvas I go to the design panel let's take a look at those variables I'm going to go to that second collection where I have that data stored I have item one Tomatoes item two cheese item three milk that's where they are so now what I could do is that same thing I'm going to copy this interaction I'm going to come over here to my interactions pane there they are going to click just to the left of it copy paste copy paste and here instead of setting this value to item one we're going to set it to item two cheese press enter there we go click on that third one click there this is going to be item three just type that right on in item three and we already know it's a spoiler alert that it's milk but we don't like spoiled milk okay so now I can hit play tomatoes cheese milk so you might be thinking that's a lot of work but really yesterday or the day before that would have taken us a few frames to generate this interaction and let's say if I want to iterate or if I want to change these values I can click on my canvas I can pull up the local variables and instead of tomatoes I can say let's say Mushrooms right mushrooms updates in the interface Let's uh preview it and it's there so no more searching through layers no more looking through all of these other pages I change it in one location and I'm good to go so you can see basically once again what's happening is that I'm setting the value either item one item two or item three to that welcome message and that welcome message is bound to that text field so I'm gonna pass it on to Ricky and Ricky's going to tell you about our next concept all right thanks Mickey um well let's talk about how we can use variables within prototyping one method is using Expressions we talked about how variables allow you to store data and expressions are a way of calculating things of that data yesterday the engineer that worked on Expressions John Kaplan presented on how we built them let's get into exactly what our expressions and how you can use them in Sigma expressions are just combinations of values variables and operators that produce a result or a new value they're essentially just mathematical equations Expressions have been used in other tools such as Excel Matlab and SQL here's a real life example of expressions using variables imagine you're going to the grocery store and you want to keep track of how many items are in your cart you would do this by adding up the quantities of each item and you can use variables to represent these values for example you can have a variable named total apples with a value of five a variable named total x with a value of 12 and a variable named total bread with the value of one and then you would have a variable called total items to store the results of this calculation and to calculate the total number of items you can create an expression it would look something like total items equals total apples plus total eggs plus total bread and when we evaluate this expression it substitutes the values of the variables and performs the calculation in our example it would just add 5 plus 12 plus 1 resulting in 18 which is then stored in the total items variable now what if you realize you want to update your card to add one more Apple in this case we might want to add one more expression we would add an expression to add 1 to the current total apples variable and this would just be setting total apples to Total apples plus one and then we would have our original expression follow that to calculate the total items in this scenario the order matters and when we execute each expression we would want to update the total apples variable before we go and calculate the total items variable so we can get the correct updated value at the end and expressions can be much more complex involving multiple variables different operators such as addition subtraction multiplication and division and even functions and let's go back to Mickey to show us how to use expressions in figma all right thank you Ricky so I'm really excited to show you how to write your own expression once again the goal of this presentation I want you to at least have some aspirational examples you might not feel comfortable with the concept of variables but you know that there's going to be a lot of power in using them in your prototyping so I want to get you started so let's begin by taking a look at the anatomy of an interaction you can see here I have this plus button this is the interaction type which is an on click this is going to be the expression we're going to set the variable of count and we're going to add a value of 1 to it so it's going to go one two three four five if it starts at zero right so that's going to be the expression and these are the operations that we're going to primarily be working with for now so we have addition subtraction multiplication and division so what we're going to do just like in the last example we're going to set a value we're going to have it bound to this text field and I've already have that set so if I click on my local variables I'm going to go to my my third little collection here we just have that one variable in there and it's count this is a little bit different than the previous variable that we worked with in the other example in when that was a string this is going to be a number and we're going to perform those calculations on it so let's head on over to prototype mode that's going to be shift e and I can see that I already have an interaction set to this button when I click on it you see on click set variable count count equals one so same thing here you know I can begin I can iterate on that value let's say I've changed that to count equals five I can copy that let's copy that interaction over here to this other button just to save myself some time so on set variable you can see some of the other options that we have there we're going to set count to count plus five but because we're working with the minus sign here let's have count minus five and because this text field is bound to that variable when we perform that expression the variable will update along with it in prototyping mode so I press shift space bar and I'm in the wrong one hold on one sec let's just let's play that one there we go so I'm going to add an expression to to modify that value let's click 5 10 15 20 25. and if I want to go back just kind of Bring It On back right up into like the negative values there we go so this field once again is just representing the output of that expression what's really cool all right boy I'll take it lean into it so it's one thing to set it to that string value but it's going to be another thing entirely to apply it to a property of an object that's on the stage and what that means is I have a rectangle here y'all might be familiar with drawing rectangles as that's pretty much what we do for a living I'm going to select that rectangle I'm going to go to the design panel and what I want to do here is I want to bind the value count to the width of this rectangle so as I update that value the rectangle will be modified based off of it so let's select it here I'm going to hop on over there we go we got our width value when I hover over it we see that little icon right you're going to get familiar with that icon it's going to become your best friend that variable icon I'm going to select it and I'm going to type in count there it is and you can see that count currently is zero but because the rectangle can't be zero then it just wouldn't be a rectangle it just wouldn't exist it's going to set it to one so we're kind of cheating a little bit but that's okay I'm going to select that property let's see okay so here we're setting variable of count we're adding a value of 20 and then here we're subtracting a value of 20. let's give that a Play here's our inline prototype so now 20 40 60 80 and it keeps on going I subtract so you can start to see where I'm going with this right if anybody out here is familiar with you know computer stuff I can actually use different interactions so up until now we've been using on click right on click something happens on click something happens but what if we don't morally want to to concern ourselves with clicking and we just want it to happen entirely on its own we want that value to continue on we can use interactions like after DeLay So after delay basically states that after a certain period of time in this case 10 milliseconds we want those functions to take place so we're going to set the variable and then here we're after we're setting the variable we're navigating to another frame so I'm navigating to this Frame that I call loop back and then going here performing the after delay again and again so we're incrementing the value on this Frame and then this Frame just kind of acts as like a way to start that over so this will give us a nice perfect Loop I'll play that one more time for you so when I change this value here let's say the after delay to maybe 200 milliseconds you know that will affect the pace so you can control how this will play through a few days ago this would be very very complicated if not impossible to do in figma so we got some more for you Ricky let's tell them what they they want to hear great wow what an amazing demo [Applause] all right so let's now move on to our final prototyping concept an exciting future I built confessionals sorry conditionals um sometimes you want different actions to occur on based on the value of a variable that's where conditionals come into play conditionals are statements used in programming to make decisions based on certain conditions they help determine what actions to run based on certain data or a certain variable let's use a real life scenario to explain conditionals and how variables can be used within them imagine you're planning a day out with your friends and you're trying to decide whether to go to the beach or the movies based on the weather and the weather forecast tells you if it's sunny or rainy how can we use variables here you can define a variable called weather that represents the current weather condition and that can store values like sunny or rainy and then you can use a conditional statement to make a decision based on the value of the weather variable for example you might say if the weather is sunny let's go to the beach if the weather is rainy let's go to the movies by checking the value store in the weather variable your program knows which path to take if the value is Sunny the program executes the action of going to the beach that the value is rainy and knows to execute the action of going to the movies and this can even be extended to include multiple actions for example if the weather variable is sunny then execute letting your friends know you're going to the beach going to the beach applying sunscreen and then if the weather variable is rainy then execute letting your friends know that you're going to be at the movies going to movies and buying some popcorn again in both scenarios the order matters when we execute each action if you scramble the order here you may end up at either location with no friends and let's go back to Mickey to show us how to incorporate conditionals into Sigma all right thank you thank you Ricky also we got to thank Ricky because this is this is our future that's what you made she made conditionals let's hear it for Ricky now I get to show them your feature let's go so writing conditions and then also setting multiple actions the one thing that I want to highlight here is that with these conditionals you're basically you can start by doing one thing in this case in my example here I'm I'm setting a variable just like in the previous example I'm iterating by one then in this condition I'm asking if the current value that I have been iterating is greater than the equal to zero then I'm going to do something otherwise do this instead so basically I'm going to start by by doing something right and I'm going to check that value so I'm adding to the value I'm going to check against it if the value the condition is true it's going to do one thing if it's false it's going to do another thing right so we're going to check against it we're going to determine what is it that we want to do next so this is a simple example I'm going to show you a few more as well where I'm going to set the background color here let's let's show you that right here what I'm going to do is I'm going to set the background color to a different color based off of the condition let's head into prototype mode I'm going to click on my button let's take a look at that that's exactly what we have here so if the current value if I add to it if it's over zero it's yellow if it's under zero it's blue so let's see do we have it on both of them we have it on both of them let's take a look at what that looks like so when I add one it's yellow let me go back it's blue right that's pretty cool I have another hidden file over here too with a couple pages and I want to show you where that becomes more relevant uh let's say you have this example here where you want to convert Fahrenheit to Celsius I could just run it in line we're adding to the value and we're changing the color to represent it so right here this is just one frame of a prototype and so we can see here within this logic we're checking the temperature value and we're evaluating against it and based off of that we can set that color also here is another example of a conditional where it's using a Boolean value I have an interactive component and in this interactive component I'm basically saying if the feedback is true we go to one frame if the feedback is false it goes to another so I'm going to play this for you make that a little bit bigger there we go so let's say if you're creating a little how was your experience interaction when I click on this right we've got smile sad smile sad and hit submit oh no I'm going to press the r key the r key is going to refresh this start over again right you're going to get become really friendly with that R key and then let's say yeah awesome so that conditional allows you to change your trajectory right it allows your your prototype to become so much more Dynamic based off of the choices of the user and what they are performing so let's talk about adding more actions we've kind of been hinting at this so here you can see with this interaction right here we're setting a variable we're setting another variable we're running a conditional we're navigating to another frame you might have felt Limited in figma before with interactions only allowing yourself to do one thing at a time multiple interactions is going to give you a lot of different opportunities so let's say for example in this instance when I go into prototype mode I'm going to expand upon that concept that I introduced with the last example where we are modifying things on stage like the modifying things on the canvas sorry like the width of this rectangle when I hit that variable we have multiple actions going here I'm setting a load value let's zoom in a little bit to I'm adding by two changing the load percentage I'm setting a load bar width so if I want to see the table of those variables here we go let's go to uh let's see my writing Expressions nope sorry there we go my loading condition so I basically have these three values it seems like a lot but it's not really so I have my load value my loading bar width which is controlling that rectangle and the load percentage when I give that a run where doing the same thing but we're going to check a condition on when it's a hundred percent Nico is it done some hit R we'll do that again and once again that can be found here when I click on that after delay here's that conditional oops I scrolled on the wrong thing there we go so here's that conditional where we're checking the load value if load value is greater than or equal to 100 we're navigating to loaded and for those of you familiar you know with that interaction that whole navigation exists within here so I can collapse that I can collapse that and just so you know too you can move these up and down you can rearrange these actions so if you want to set a variable in front of another variable right order of operations are very important you can easily move those around so I'll show you that one more time and basically you can create interactions that weren't quite possible with figma before and uh just want to give a big shout out once again to Queen conditionals over here Ricky yeah all right thank you so much Biggie and thank you so much for all those demos so now that we've gone over the cool new prototyping figures that we have in our stove let's make some magic we've talked about how to create and apply variables how to use Expressions to do math with those variables and how to use conditionals to trigger different actions based on the value of those variables now we'd like to show you how you can put these pieces together so your prototypes can stop looking like this and start looking more like this but with even more powerful functionality and we're going back to Mickey for one more demo to show us how we can combine all this functionality into one prototype thank you Ricky all right so you might be thinking what else is there really you showed a lot you know Mickey like what else is there to to be had I'm gonna introduce the notion of an interactive component so here I have this interactive component and what it is is like a little Gallery so when I hit play here I have a a simple you know going one to the next right and the construction of this interactive component has three variant States Gallery one Gallery two Gallery three Gallery one two three now what I can do is I can bind the gallery state so here when I go to the design panel and I click on the interactive component I can come over here to that Gallery layer and I can assign a variable so I can change the state of that component I can change to a different variant using a variable so here I can change this to sorry let's uh zoom on out we have our current item I'll show you what that looks like once again in the variable panel so here we have current item Gallery one so now I can bind it to current item and so in that variable pane if I were to change that to like let's say Gallery two you see it update on the canvas so that interactive component is going to go to that second variant right if I press Gallery three it goes to that third one let's go back to the first one let me press enter there we go so what this means is that we can have interactions where we are setting the variable external to the interactive component so you can control the current state of an interactive component outside of the interactive component so I can say Mighty bananas Sky shrooms apples you might notice it's transitioning so if on this interactive component you apply smart animate or transitions on that change too it'll honor them so when I play this it'll honor the click interactions that I already have it's going to look for them it's going to apply them you're going to see them now I'm going to explain one more concept of mode we've been to a variables talk you heard about modes dark mode Japanese mode German mode high contrast mode they can mean something a little bit different and more beneficial in prototyping so while you're working you might notice okay well if I'm going to make a shopping cart and I have item one do I have to do item one name item one description item one value you're gonna have a lot of variables and it's gonna get really messy when you use modes you can have just one variable name and assign those values across those modes so in this example here I have Mighty bananas they're a price of a hundred rupees and then I have a description for it Sky shrooms value of 40 rupees uh the description for it so you have this tabular data that you can now Infuse into your prototype so the way that works I'm going to show you exactly where this is I guarantee you some of you might be confused the first time you're like man Mickey was talking about modes where are they they're on the layer so if I were to pull up my layers panel and I select my mighty bananas button you'll see over here the ascribed mode to that button the visual feedback is going to be on that layer and you apply the mode on the layer itself so when I select that button and I go to the design mode over here in that layer panel I can change the variable mode so I can set that to mode 2 or to mode three in the same way that you would change dark mode or light mode but let's just show you like let's work through how this is going to be so important and impactful in your prototype so this is my my prototype that I have here let me let me delete that let me delete that so I have here my mighty bananas button you can see I have that interactive component from earlier and I have a few Fields here a title description text a value and an add to cart button right so this kind of exists within one frame I also have an interactive component right here for a little shopping cart so I'm going to select that button I'm going to duplicate it one two in Prototype mode you can see that I have a whole bunch of set variables I'm setting the current price to price the current description to description I'm setting the current name to name so that looks a little something like this here's our tabular data where we have mode one mode two mode three and here are the values that are bound to my current interface from showing my item the title the description and the price now all I need to do is with these buttons I'm going to select it I'm going to come over here and I'm going to change its mode so all three are currently set to mode one Mighty bananas then I'm going to change that one to mode two that's going to be Skye's rooms and then this third one is going to be mode three Apple now the interactions that I have it's going to say set my price to that field set my name to that field let's take a look at that so we have Mighty bananas Sky shrooms apples and you can see the data at the right reflecting what was in the table and and just to spice it up a little bit let's add to cart we can see it populating up there and we could see our total is being added to as well so I'm adding the mushroom values and I have a a one frame and two interactive component shopping cart flow how awesome is that so I want you all to start simple if you find yourself doing something over and over again or if you find yourself creating a lot of extraneous frames in your prototypes maybe you can find an opportunity to use variables in your prototyping to help level up or help you iterate upon your designs I'm going to be posting this file on figma.com my community profile and I'll be tweeting it out at twitter.com and let's close it out with a few words from Garrett thank you for melting our brains Mickey and Ricky another round of applause for them thanks so much we are so excited for everyone here to start playing exploring and breaking things as you get more familiar with these features we hope that you're able to build more organized prototypes with far fewer frames so you can move from this world to this one calmer and peaceful you can finally build these experiences in figma that you've always dreamed of that behave as realistically as the final one and just to tease a little bit of what's possible we'll leave you with a few quick examples one of our designers Nico built this calculator it performs calculations using variables expressions and conditionals real math inside of figma and when you are done for the day and you want to have some fun you can finally start prototyping that game that you've always dreamed about this is by Chris Harrison one of our amazing beta testers who built this minigame for us I can customize my ship launch it quickly try to rescue the astronauts and destroy the enemy spaceship and then launch off to warp drive both of these examples will be available in the figma community I'll make sure that Mickey tweets them out too so you have an easy place to find them and if you need more help that's understandable I did two we've got you covered we've got tons of documentation here to show you how these work feel free to take a picture if you need and a playground file that will walk you through all of these Concepts to hopefully make it a little bit easier for you and really help you understand how all of this works thank you all for spending all this time with us today and with figma this week we cannot wait to see what you build [Applause] [Music] yes

Channel: Figma

Views: 25,390

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:designer, language:english, format:standard, produced_by:other, theme:prototyping, event:config, series:other, type:feature_tutorial, level:none, primary_feature:variables, secondary_feature:

Id: oQy9yWnokVE

Length: 45min 40sec (2740 seconds)

Published: Fri Jun 23 2023