Using Figma Variables to Swap Variants Between Modes

foreign very frequently requested and it's how to use your variables to change variants between different modes so here as you can see we have a button component and a navigation component uh one component for our desktop and another for our mobile and what's going to have happen is to show how you can use your string variables to change the variance when swapped between modes so here I can see they're on a desktop and when copy and pasted into a mobile mode I can see that the components change variants so it's again great lesson very frequently requested let's Dive In all right so let's start off uh and build uh two button variants together now if you already have the button components from a design system or maybe you have your own buttons already feel free to just use those I'm just building uh buttons in this lesson just so everyone can follow along as well so let's just add some texts say button I'll be using the body medium which in this case is a robot regular 16 and again all the styling that we're using is a part of our design system the link for that will be in the description I'm just going to add some quick auto layout so shift a and let's make the button a little bit wider so maybe our XXL uh horizontal padding variable let's also add a fill say yeah sure red and now I'm just being picky but I really don't like uh Square buttons so let's add a quick F4 pixel variable around the corners let's change the color to our text on action there we go and maybe we'll just get fancy let's bring in an icon as well so let's say I don't know a heart this will be our heart fill again change that to our text on action there we go uh let's call this button test and create the components now I'm only not calling it button just because I already have a button component in this file let's create the component of that and now let's add a variant so again we're going to have one button to represent our desktop for our desktop excuse me which when dragged into a mobile frame will change to our mobile variant so this one will be our desktop so lowercase D with the desktop let's change property you want to type and this will be our mobile variant for our mobile variants maybe I don't know we want to change it to color do I like a blue and maybe you want the icon to change as well again the use case of this really doesn't make much sense um but it was just a demo some of the functionality so you could use it in components like in navigation where you really do want the component to change between a header versus a mobile there we go so now what we need to have happen and again maybe just refresh what I want to have happen is here we have our desktop button when I drag it into the mobile frame I want this button to change to our mobile but and what we need to have happen is actually connect text string variables to the names of our variants and that might be a little confusing so I do have a quick example here so does the variant name which in this case is either desktop or mobile match the name of a string value within a mode which would be as such so here let's create a quick string variable let's just call it button now I already have a mode here for our desktop frame and then one for a mobile frame and the string value of the mode which is this here needs to match the name of the variant so for our desktop frame our variant name is desktop so the string value needs to equal desktop same with our mobile we have the variant name of mobile and the string value of this button for our mobile frame needs to equal mobile so does the variate name equal the string value of the mode if it does not figma is unable to recognize which mode the variant belongs to so let me do a quick demonstration of this so here I have let's just apply this overall text string variable to this symbol so I'm just going to connect the two together so again button and I can see that this is not crossed off so what figma is able to recognize is that we have um a string variable that matches the name of one of our variants so fing was able to connect two and two together if I named this something else like desktop one look what happens is figma actually doesn't recognize it so the variable value doesn't map to a specific variance so it's really really important that the name of your variables matches the name of your string uh or the name of your variance excuse me it match the name of your string variables so let's change that back to desktop and when I do that Sigma should be able to connect the two together so if the string value does not equal the name the variant name figma isn't able to recognize which mode the variant belongs to and nothing's going to happen but if it does the variance will change based on the mode so here we have our desktop and let's just make sure that figma recognizes yep so this is set to our Auto or desktop frame let's bring in this and nothing changes just yet because again I need to set this overall frame to our mobile mode mobile frame and look what happens is now Sigma recognizes that this is our mobile frame and this should be our mobile variant and I can change them interchangeably now the button is kind of a weird use case because when was your button really ever change but this would work really really well with something like a navigation so let me just bring in a quick navigation component top navigation component and let's demo that as well so let's open up our variables local variables let's just create a string variable for nav and again let's check the name of our variants so we have a desktop and also immobile desktop and mobile there we go so let's go ahead and close that bring in a symbol and let's just make sure that we can connect the two together so connect our Nas there we go and now when I bring in this nav to our mobile frame I'm just going to copy one here I can see that it adjusts and this just isn't the right size of frame so I'm just going to expand it just your references so this use case would look a would work a lot lot better for something like a navigation but I wanted to create the components together with you to show you how everything would work so that is how you use your variables to swap variants between different modes and just to wrap it up here's your friendly reminder to sign up for UI collective.co your home for everything Design Systems you can learn to build a design system uh or also you can buy our pre-made design system right here and here's just our preview file uh where you got access to all these unreal components uh across light mode and dark mode it's about 50 plus components uh 3000 plus different combinations of properties variants uh best design system you'll find and I'll leave the link for this in the description below see you online UI Collective

Channel: UI Collective

Views: 15,423

Keywords: figma variants, figma modes, figma string variables

Id: 7ab5QeqIOzQ

Length: 8min 16sec (496 seconds)

Published: Sun Aug 06 2023