How to create a counter using local variables in Figma | Tutorial

hey designers in this short tutorial I will show you how to make this simple counter switcher using variables and conditionals you see that we can add one and we can subtract one and it doesn't go below zero alright guys so let's start and first of all we need to create our text layer so we select our text instrument we click anywhere on the canvas and we press for example zero that's going to be our our counter number and let's make it a little bit larger Maybe 48. and now let's make buttons that will enlarge the number and subtract from it so let's make them and we'll use our rectangle let's make it first of all we'll it's going to be a minus and the plus button so let's make it like this so for example it will be 48 also for the width and about four for the height and let's make it round corners let's put 100 and let's copy it and here we copy this line also and now we rotate it like this and put it next to each other like this and let's align it to the center and in the middle like this like so and now let's group it or we can change it to a shape using the Boolean groups and we use Union selection now it's a shape okay so let's create a circle around it we can do it several in several ways but I'll do it in the way that I'll create a frame for example 80 pixels and then I put inside of it I'll put a minus sign I'll put it in the center and in the middle and I'll make it round corners let's make it 100 you could use ellipse but I don't know I like to use frames so and here I put Plus in the center of it also now I want to color them and let's select both of them and change the selection colors let's change white to this blue for example I have it over here already and let's change gray to White like this and now we need to make a hover state copy them and press option and drag and now we change the colors and let's make them a little bit darker like this when we click or when we hover it will be darker so now let's change the names of it so we select both of these minuses command R press command R and now we change name we put minus here slash and here we select number with the arrow down and now we have one and two and here we select both of these buttons common press command R and here we write plus slash number down and here we have plus and plus one plus two now we select again both of them and we create component set like this and here we create component set as well for the plus buttons and it's these are our buttons and now we go to prototype and we drag our prototype line to the second it's a second variant and here we for example leave it on click and instant and then we drag it from this second variant so the first one and we select after delay and it's going to be one millisecond so when we click it returns to the first state like that same here for the Plus so we connect the first variant to the second one click on Click Change to and this one is going to be from this second variant to the first variant after delay one millisecond instant that's it that's it for now uh okay so now we go to our assets panel and we have our minus and plus button here so we drag it over and plus button would drag it over here all right now we select both of them oh let's select all three of these assets and we press shift a to make it into our layout and now we should change the position let's align them in the center and in the middle and let's uh put 40 pixels here so the the spacing between the buttons and the number is 40 pixels like this let's change the color of the number to for example all this dark gray and now let's add another Auto layout and let's change the color of it for the fill let's make it white and let's add some paddings and let's add 24 well actually let's add 48 on left and right and also let's add 48 on top and bottom like this uh it might look too big let's check it uh but before that let's change the rounds of the corners so again um about 1000 pixels but yes it looks too big let's change it to 24 and this one is going to be 24. so yeah I think this looks okay and now the most interesting part is gonna be happening we're gonna be changing this number and we're going to be adding um and prototyping with a local variables so let's add variable now we go to local variables and we click on this open variables icon and here I already have the amount but I'll delete it and I'll add a new one so you can see how it works so I press create a variable I select number here it's going to be number well we can change it to amount and the value is zero and now when I go to the text layer I select my my number here with the comment click and I find the variables icon on the right of here you see where the settings for the text are here is the icon I press on it and I select variable amount so if I change the number I change the value inside of my variable to for example 12 you'll see is changes over here too but we'll leave it to zero right now okay so that's it for now and now let's go to the frames and let's add a frame and it's going to be our 14 pro Max iPhone like this and now let's change background of it let's make it uh light blue like this like this color I think is okay now we put our frame with our counter inside like this and now let's make prototype and we select the plus button we go to prototype and we add interaction and we add oh hold on we go to interaction the one that we already had and we click on plus over here to add action and here we select set variable and when we click on the set variable we have a small option here and we can see that there are variables here that we have in our design that's the amount and we select it and then we should select it again like to to let figma know that something is going to be happening to this variable we select again and now we should select the action and we'll be adding a number to this when we press plus so we select addition plus and we select or we press 1 on our keyboard so add one and we press enter so when we press plus button it will add 1 to this variable and now we should make another variable for for the minus and we select our um interaction we press plus and we set we press set variable again and here we select amount amount variable and select amount again and now we should choose subtraction so we subtract 1 when we click on minus button and now we click enter but it's very important to add a conditional to the minus button because we don't want to have the situation when we go below zero so now we add conditional and the conditional will work like this we select if and we select amount and now we should select uh not equal to and here we press zero like this and this is a tricky part and it's really important that we need to connect and the set variable minus subtraction with conditional and now the very important thing that you should do you should add this variable information inside the conditional to do that you should kind of hover the set variable option click on it oops click on this little icon on the on the left and sort of you know like drag it drag it inside the conditional like this so this is ready this is ready for action let's check it out now we select our frame we press shift spacebar and we see our prototype loaded now we press the plus button and we see that we're adding number we're adding one and now when we press minus we see that we're subtracting we're subtracting and from from the center from the from the main main Mount and when we go to zero the minus doesn't work you see when we click on it it doesn't work and also we see a small animation of the button uh that it turns darker when I press on it guys I hope you liked this video and I hope it was useful for you so don't forget to like this video And subscribe to my channel and in the comments below write topics that you're interested in and I'll see you in the next one have fun designs bye bye

Channel: Sergei Chyrkov

Views: 23,912

Keywords: Figma Variables, Figma Auto Layout, Figma conditionals, Figma Design Tutorial, Figma Tips and Tricks, Figma Design Techniques, Figma Design System, Figma Prototyping, Figma Tutorial for Beginners, Figma Design Workflow, Figma for beginners, Figma course, web design tutorials, Figma updates, figma design system tutorial, variables, figma tutorial, product design, ux design, auto layout figma, ui design tutorial, figma design website, figma counter, Figma, figma design

Id: A5Tx7xPDInE

Length: 12min 15sec (735 seconds)

Published: Thu Aug 31 2023