Create Mind-Blowing Interactive Headers with Figma Variables 💥

so today's lesson again comes the request of another UI collective.co Community member where they asked how to use variables to build an interactive header perfect for a marketing site so we're going to look at how to do just that we're going to use variables in order to upon button click change the image and the text associated with it again it's not the prettiest header in the world but I'll leave all the styling and the visual to you guys with that said let's get started so here I have two image variants already prepped let's rename the first the suite one in the second to Sweet two and now let's add a frame say 1920 by 1080. and now let's bring in our first image variants there we go let's bring this down slightly more swipe space at the bottom we'll just resize our components again never best practice to resize your components but I am a rule breaker so now let's make it a little bit more ui-like so let's add a gradient fill set it to our black this one also to our black we're at zero and out a little bit of a oops I guess that's on the floor that's not part of the gradient so that's good I don't really see a line and next what we're going to do before we add text let's actually add some local variables one of which for this image and then for some text that we'll put over top of our gradient so let's open our local variables create a string variable let's call this image and we want the value to be the name of uh our variant one so Suite One if they are if the value of your variable isn't the same as the name of your variant and what's going to happen when you tie the two together is Sigma is going to throw an error so make sure that your variable always matches the variant and let's also create some text for a headline and sub headlines so for a headline let's say premium Suites for our sub headline say starting at 1000 USD beautiful now it's assign our variables so for our image let's assign this star image variable like see they're connected already and now let's add some text so let's say text and let's assign our headline variable and I can see that that changes let's make this 64. and for our sub headline there we go let's make that 48. so premium Suites starting at a thousand USD perfect next let's run through the same process with our local variables but for our second variant which will be our second header so let's reopen our local variables let's rename this collection to header one and let's create another collection let's call it header two and let's then create a image let's say Suite 2 again because we want it to match the name of our variants and then for our headline this one's premium sweets let's say um on sale now I don't know then for our sub headline don't miss out it's not great but it will do and let's then add a button which upon a click will change the image and the text between the variables and our header one and our header two make this black again this doesn't look the best but it is just an exercise oops what do I do there make that six and then wait oops pass through there we go and let's then group two together and now let's prototype so let's add interaction which on click our variable set the variable or image one to our image uh the image in our header one excuse me to the image in our header two to imagine our header two and we'll do the same all the way down so same for our headline to the headline in our header two and then set the variable our sub headline or header one the sub headline in our header two and if all things went to plan if we were to present this prototype let's fit the screen so here I see this image premium suite starting at 1000 USD I hit the button and I can see that the image and the text changed with it so there you go that is how you create an interactive header using variables for your marking sites or uis it's just a reminder to sign up for UI collective.com you'll get access to all of our design system training and where you can join our slack to chat with myself or Mike directly and ask us questions you also get access to Sweet free templates like this one our variables token map perfect for organizing all your variables and tokens and where you can join the waitlist for our paid design system coming soon which includes all these awesome components documentation for the component and the file component complete with all the properties as well hope to see you online

Channel: UI Collective

Views: 2,458

Keywords: figma variables

Id: ix_XGx1JvRs

Length: 5min 55sec (355 seconds)

Published: Tue Jul 18 2023