Dynamic Mode Switching in Figma Prototypes with Variables

our design thing is my name is Magnus here and today we are going to be able to switch modes inside of our prototypes inside of figma using a couple of tricks with our variables so that interests you then sit back relax let's jump in the video all right here we are inside of figma I've opened up a prototype and we have our window and over here I put some toggles so uh this is just a prototype and all controlled directly through our variables so we'll be able to switch our modes using variables inside of figma if we set it up right so here's the light and dark mode switch here's some visibility switches and this is how we can actually set up a kind of dynamic screen beyond that I can also for example go to where we have that asset and I could actually change it out with another asset and we will refresh my refresh that prototype again let's just run it in a preview mode here we can just refresh that prototype and still be able to use the same switching so if you would like to learn how to set up different modes and switch them dynamically inside of prototypes then you're in the right place let's keep moving on this is actually quite easy what we will need is to make sure that you know for example I need to have a collection I need to have ideally two modes of something or more and I need to be able to switch between them so here I've got my color modes got dark and Light and I'm going to use those to switch between for the dark and light mode I will need to have a switch something to toggle it on and off inside the Prototype I'm actually just going to duplicate this switch over here and I will remove the clickable events on them and I will rename this one [Music] to switch to like so so there we go now the way that this is actually done is quite simple I have screens and I have my screens as kind of components I don't necessarily need to be components but definitely helps and what I also have is what I refer to as a slot this is just a blank random object that's going to hold information and it's just going to basically allow other assets like for example this mock-up designs this dashboard designed to be switched in replace of it uh pushing it out and then allowing um the the asset to be changed add to whatever screen you want which is great so we need to be able to for example though change through the modes and over here I've done it basically kind of three different sets to kind of explain three different things for example just a dark and light mode there are two modes ideally see this gray box around the slot inside this is kind of like your window your frame it tells the Box inside and says hey I want you to be done I want you to be light mode and when I drag out from here I set up a little switch to the side [Music] well let's actually build this and probably make a lot more sense and then we will start to play around with you know more complex variations I'm gonna use this asset I'm still going to use my dashboard asset it's not much to it it just has my colors applied to it and it also has those other visibility settings applied to it doesn't matter for this particular presentation uh it's yeah it's just an asset what does matter is that we know how to create our slots so uh what I can do is I will create a slot um like so uh what do we got we have like a 96 and or I don't necessarily need to make it the same size but it definitely kind of helps um just try to make your slots fit whatever particular frame you need it to fit makes the life a little easier otherwise it will just set up some responsive uh nature for your slot I'm going to create this as a component I'm going to call this let's say slot two uh what is important is that Slot 2 needs to have some reference to the token that you have added so the thing like the modes you know that means I just need to apply one of my colors so I'm just going to go over here I'm going to go apply my gray I'll just give it some rounding on the corners just fun and now it has this gray which is good so I could actually go over here and I can see that I kept my colors I got my dark and light mode leaving it on auto great I'm going to take this slot and I'm actually going to stick it into a new frame this is going to be something like my window my frame the container whatever you need it to be and I will turn that also into a component so I got my frame and I got my slot anything that I put inside of my frame will be any anything that I want to switch out inside my frame will be switchable with my slot I will click on my slot and I'm just going to create an instance I'm going to make sure that it can get changed out with this dashboard and I'll just call this my uh windows if I drag that out you can see that I have a slot but I can change it out to my actual design I can now take this and actually create a variable I'm going to drag it down I'm going to duplicate it out and I'm going to call these my modes and I'm going to make this one light and this one dark and then what I can do is I can actually set that local layer and I can say dark and then I can say to the other one light now remember you're going to have potentially more screens more components like I've got one but that doesn't stop you from changing out to any other component based screen that you have I just honestly I've had uh hundreds of compounded by screens that are inside of these slots they get changed out and they uh will adapt to the frame that holds them which is like this Frame that holds them and all you need to do is simply just Chuck it in the slot so I can actually now drag that out and all I need to do is Chuck any screen into the slot variable if I like I could actually select this Frame piece again where I have those different windows I can also import another asset and now I have another asset that I can access and add to the actual slot but the advantage is is that I could actually just change it like so but this is not changing it in my prototype yet all that I do need to do from here though is actually start to put that switch in and I need something to manage the stay of what my prototype is in so I'll show you my local variables for example this is a state manager it manages the states of the components and elements within side of this screen or prototype I for example started and I added in a text string variable I call it light and it could be dark and that's text string variable uh will change I have a visibility variable that also changes I have also States for like an admin and a member so let's create our own new actual State manager so we're going to go at new not a new name new collection and uh I'm just going to call this SM ite foreign I can give it a string I'll call this modes [Music] and I will start with uh so there we go now I have this state that holds uh basically a variable that holds a state that is existent and I can actually go to this component remember it's a component that's dragged out like so and I can go over to where that mode is and I can actually assign that variable right there so if I was to now type up light it will now be a light mode By Thai but there are it will be dark mode so we're almost there we just need to have something like a switch in our predator we'll change it and that's where this comes into place so I already have a you know just an asset just may over here in a component called it number two so it's ready to go all it is I haven't added the interactions yet but we'll add those interactions now so let me take it from dark mode so it went from I go from dark mode I will go to light mode I will switch the component of course just for you know nice fun uh you don't need to you can set it up in a different way as well it could be on click uh and you could just set the mirror so here though I am switching between the two so I will uh when going from dark to light I will set the new variable that we created uh cert and that will be my SM State mode and I will set this to light make sure you're right exactly what is written in the state you made and then I'll switch it back and I will set the variable and I'll switch this to dark like so I'll grab this Frame I could put it into another frame all this slide grab out the component Chuck it in there let's just put it up into that corner somewhat and now all I need to do is play test the the switch there we go so that's all that is to it we can now simply just change this dark and light mode over by just switching our little switch inside of our brain and this will change this here to dark and Light and in turn will tell the actual frame component that's holding the slot it's holding whatever's inside the slot so that could be the dashboard that could be any other window any other viewport any other component uh inside so for example let's just grab we'll grab the same frame here I will let's say [Music] grab that slot and I'm going to tell actually you know what I'll do is set both those frame sets you can set the front Auto and Frame of Auto and let's tell the asset inside to fill the frame and now I can actually scale that down like so if I was to grab that same slot and say throw it in here with that there you go I have this app object I could put this one inside of here as well and when I switch what I'll need to do is make sure that it has this attached to it of course just make sure you have your modes attached or snaps copy that like so [Music] and you know just grab anything else um I do have other variables let's go back to local again uh even now even my switch itself has the my switch set my switch here itself has actually the the color uh actual token set up inside of it I could just adjust this Frame down like so and just press play as you can see changes the dark and light mode for that wow that's it that is how to set up the actual changing your modes inside of figma using the variables but what I'll do is uh go through an extra little Advanced one just at the end around these abilities and that so we can get a little bit more there let's look at our window over here and as you can see we have ourselves a couple of objects inside of our frame and what we can do is actually a sign then the corresponding property so here I have admin and on the other one I have the member one remember I actually have a collection of visibilities which has admin and member and what this means is because I have a collection of admin and member I can actually grow to this whole dashboard and I could actually even see the effect of changing this around here now I don't need to create everyone like basically four of these states to create this prototype I only need to know uh if there's an admin or member so the way that this one works I'm going to create it all from scratch but just for the more advanced users [Music] what I have over here is just a setup of logic when the switches are taking place just like dark and light mode where we were able to switch between the two we're only switching between two different modes here we have a little bit more Logic for example uh go to prototype mode I'm actually using an if statement here so what I'm saying is on click with this I'm turning it off uh so while I'm turning it off I'm going if the member is equal to true so the member this is the admin but if the member is equal to true then we set it to the state of the member using a texturing variable if and then we set the admin to off and then here I have it where in in this case that the member was not true the member was false we set the visibility To None which is the none visibility State on mode and we set of course the admin to boss we still then change the move over change to the other component and rinse and repeat when the actual member is true with checking if the admin is visible and if the admin is is actually visible we set it to being admin visibility and we set the member off likewise and it's just basically the flip side and the way that we can the way that we need to manage that in our actual local variables is to make sure that we a have our uh you know kind of token set this is applied to the asset so this manages the asset the tokens that matches the asset and then our state manager manages the existing state that we are in right here and what I need the state manager to know is I need the state manager to know admin and member and then I needed to have a texturing and that text string refers to the uh specific slot so for example I have all of my slots laid out inside of my window frames and they're just a just a rectangle inside of a box that rectangle gets replaced by the screen that I want within it and all that I need to do is make sure that I have a brain that has the all so all is visible admins are just visible members are just visible or none is visible and then I also have that dark and light mode and all that I would do is for this you know slot this window this Frame whatever I will apply my corresponding variables to the correct actual uh part of this component that controls the modes and with this that's how I can control the different modes by having a brain that tells the child slot component to change and adapt according to what it is for this visibility you will need to also assign the slot component the uh one of the variables so that you can access that variable and add that through to your layers to the top this slot component as an admin applied to it so when I have applied the visibility of admin to just the slot asset I can access the layers above here and I can be able to change them and I can create the different combinations that I need to be able to change it out with but once I've made this asset I don't need to make any other assets I just need to use this and this will control my modes for all of my screens with all my assets and components within it side of it so I've seen more advanced if you like to hear a lot more I've got a lot more to go through but to keep this video shorter I won't get into them right now please though leave a comment in the description box below like from my and like subscribe all of those great things but until next time design thinkers keep making amazing things and I will see you all in the next video thank you bye

Channel: Pixellink

Views: 2,954

Keywords:

Id: SteHJoEhX6Q

Length: 24min 35sec (1475 seconds)

Published: Sun Sep 24 2023