# Trying Figma variables for the first time 🤔 *breaking my brain* ## Метаданные - **Канал:** CharliMarieTV - **YouTube:** https://www.youtube.com/watch?v=QXbGFDTgzKU - **Дата:** 14.09.2023 - **Длительность:** 13:57 - **Просмотры:** 5,171 ## Описание Variables is a new feature Figma announced at Config, and I recorded the process of my trying to use them for the first time! Did I succeed? Did it break my brain? Did I make a big mess in our design system? You be the judge 😅 🚀 CharliMarieTV is powered by Figma! https://charli.link/figma Figma is a design tool that helps teams create, test, and ship better designs from start to finish. And it's free! :) Want to know more about the illustration system? Watch this video! https://youtu.be/D6isEiV-Tog Watch my Config vlog: https://youtu.be/s4SvlAG6mWk TIMESTAMPS: 0:00 - I've never used Figma variables before! 0:50 - Creating color variables 2:40 - My first attempt at a setup 7:30 - Trying to create different modes 11:00 - The moment of truth! 12:00 - The issue with variables Please remember to click subscribe if you'd like to see more of my videos. -------------------------------- // WANT TO SUPPORT MY CHANNEL? Become a ✨channel member✨ and get a cool icon next to your name in livestream chats, plus priority replies to your comments. Just click 'Join' (it's next to the subscribe button) Or, if you like, you can put something in my tip jar right here: https://pages.charlimarie.com/products/tips Sharing my videos or recommending my channel to a design friend is also very much appreciated! :) -------------------------------- // ABOUT ME I'm Charli and I'm designer from New Zealand currently living in Valencia, Spain. I’m the Creative Director at a remote tech company called ConvertKit and I post videos about the design projects I work on and the tools I use, as well as vlogs of my life as a designer. I regularly livestream what I'm working on in Coworking Club streams. Welcome to the channel! Please subscribe and say hi in the comments, and maybe we'll see you in the live chat on the next stream. 💬 Twitter: https://twitter.com/charliprangley 📷 Instagram: http://instagram.com/charliprangley -------------------------------- // MORE Join my free weekly marketing design newsletter: https://charli.link/newsletter Buy my hand written font, Grayscale: https://charlimarie.com/font Book a mentoring session with me: https://charli.link/mentoring My site & blog: https://charlimarie.com Design Life podcast: https://designlife.fm Inside Marketing Design podcast: https://insidemarketingdesign.co/ -------------------------------- // TECH & TOOLS 📹 Get links to all the tech hardware I use to make my videos (and the art on my gallery wall!) right here: https://charlimarie.com/shopmyoffice 💻 Software I use: Webflow (no-code website builder)*: https://charli.link/webflow Premiere Pro (video editing)*: https://charli.link/premierepro Adobe Audition (audio recording)*: https://charli.link/audition After Effects (intro animation)*: https://charli.link/aftereffects Figma (web design): https://charli.link/figma Photoshop (thumbnails)*: https://charli.link/photoshop ConvertKit (marketing platform): https://charli.link/try-convertkit Riverside (podcast interview recording)*: https://charli.link/riverside Music in this video from Epidemic Sound*: https://charli.link/epidemicsound Video captions by Rev (very cost effective service! I recommend)*: https://charli.link/videocaptions Intro & end card animation by Austin Saylor: http://www.austinsaylor.com/ Editing by Belén Albiol https://www.instagram.com/molen.audiovisual (or sometimes by me!) Links marked with a * are affiliate links. I can't believe you read the whole description box! You get a ⭐️ ## Содержание ### [0:00](https://www.youtube.com/watch?v=QXbGFDTgzKU) I've never used Figma variables before! join me as I try to learn how to use figma variables for the first time I want to try apply them to our illustration system I don't know if this is a use case where variables are actually useful or not but I guess we'll find out along the way I just want to learn how to use them get familiar with this new feature and I thought I might as well record the process so you can come along with me right now I have a component property set up for the level of illustration so 32 1 but also another one for the background color that it'll appear on so I think if I keep the component property for the level and use a variable for the color instead maybe that'll work out for us I don't want to mess with the system I have set up so I am just going to like duplicate this up here and I'm just going to add onto this component and call it variable test for now okay so I think I click here first local variables and let's create a variable we're going ### [0:50](https://www.youtube.com/watch?v=QXbGFDTgzKU&t=50s) Creating color variables to create color now as you can see we haven't done any sort of setting up of variables in our design system yet otherwise I might already have all of our colors as variables so I guess I'm going to have to set that up now but I will just focus on doing just the colors that um exist in these illustrations you can see all our colors of styles hanging out at the side here but I think that we have but used in this illustration I think um here we can see here so I use the 100 level ooh that was nice did you see how it automatically put it into this like grouping for me because I did the slash in the name anyway let's pick our blue 100 it would really be nice if I could just like continue adding in this list here am I really going to have to click this every time okay this is taking forever surely someone has done a variable Styles here we go styles to variables let's try this I hope that I didn't just screw up our whole design system by clicking that it seemed to well almost work I'm not sure why it's got some colors in other groups hm oh I see there was a flaw in our naming here that didn't like affect anything in um styles but clearly it has for variables how would I move this into a different group what if I just do that boom okay we'll just fix these up then and then this will be our colors that's definitely going to be faster than me having gone through the whole thing myself cool all of our colors set up as variables that was thanks to that plugin that part was easier than expected um let's go back to this collection one then and I'm actually going to can I like yeah just delete all of them okay I'm going to call this collection illustration theming I don't know I ### [2:40](https://www.youtube.com/watch?v=QXbGFDTgzKU&t=160s) My first attempt at a setup might change that later okay here's where I want to start messing with modes we'll call this one outline and the value we'll pick for this okay how do I pick another variable to reference here ooh in libraries okay why is that out of order I might need to go back in and fix that okay so I know that the outlines are blue 800 so will put that there and because it's highlighted like this I can tell that is using the variable so I did that right that's good let's make another one for 500 accent I believe that's what this color is yes and we'll pull from the library again and that will be blue 500 then we'll have 300 accent ooh I maybe shouldn't be using that term in this because I might change I'm going to say dark accent light accent into libraries that we use blue 300 and then watercolor ooh this one might be interesting this was where we might find it breaks down because our watercolor has a pass through set to it um it is using a style though so I don't know let's see but yeah that is using blue 200 and we'll call this blue okay and then I'm going to set up another Mode called yellow and my intention is that oh wait can I change the order of these after the fact I wonder hm I know that eventually when you get into modes and things it'll default to the first one so I actually might make this I'm going to call this one white and this one blue and then we will tweak this slightly I think the only thing that changes cuz what I'm trying to do here is name these based on what color background it goes on oh that's not right either though is it my brain is breaking you know what let's not worry about it for now if nothing else I hope this video is just relatable if you also went through the same struggle setting up variants or like wrapping your head around them for the first time okay we'll pull into the yellow versions there and I know it's weird to see blue in here when it's yellow but the outline itself does actually stay the same through out okay before I go any further I want to attach these variables to the I don't know what language to use here um the things I'm going to use the variables to color things in okay so instead of blue 800 here I want this to um can you just go away a second I want this to be pulling from how do I attach the variable there it goes so maybe I can do it up on this level I click here oh I didn't need to it wasn't this list I just didn't see it properly you probably will shouting at the screen just then okay let's attach outline to it so it's going to look the same which is Our intention okay then for the accents the dark accents we are going to attach that to oh it's because I was would have been scrolled down into the thing see here the circles are the Styles and the squares are the variables so here I want to click on dark accent then here we'll attach this one to light accent the watercolor let's see if this changes the pass through it all H good okay well that worked out well cool and then for the whole thing where do I set its mode I think it's here yes okay so it's on auto at the moment let's give this a try shall we if I drag out an instance of this component can I use this here to switch I can wow that is pretty exciting let's apply it to these ones too this get set to outline the accents are all the same color so that gets set to dark accent and the watercolor gets set to watercolor ooh here we go here I might need yes on the smaller illustration the colors are actually flipped a little bit watercolor is still watercolor so we can add that in there but let's open up our variables panel and add in a variable for L1 outline which yeah will be different for each color what level is it I think it's 500 yep so that'll be blue 500 yellow 500 I do kind of wish it would like see what I'm trying to do here and default me into the right place like autocomplete in a way that would be really cool and then we'll also add L1 accents cuz I'm pretty sure they're all the same and they're always going to be blue 700 let me just confirm that by looking down at a few of these no okay so they are always the 7 100 level of whatever the color it is lucky I checked okay let's close that let's go in and apply this up here um oh I should just be able to do it here shouldn't I so blue 500 will become L1 outline blue 700 becomes L1 accents and then if we change this to an L1 oh my God because the mode was already set to Green it just changed it right there for me nice okay that is exciting that's very ### [7:30](https://www.youtube.com/watch?v=QXbGFDTgzKU&t=450s) Trying to create different modes exciting let's go back to our L3 now the real test in my understanding of this comes in trying to figure out how I can do essentially three modes of this so I'm going to have color mode which is what I just set so all the colors I just set are for how they should appear on colored background when they're on a white background the watercolor is actually one level lower so this is blue 100 and on a dark background I mean everything kind of changes to make things stand out so how can I do some like mode combining here H I was hoping that what I could essentially do was take this colored set and then apply a change based on um if it was on the white or the dark background but I have a feeling I might need to make like blue light background blue background blue dark background does that make sense let's think about this though how could this work can I add groupings to these can I do that no that doesn't seem to create like an extra layer of grouping here for me what does that end up looking like in here okay let's put that back okay let's try make a new collection okay so on a white background it's blue 800 on a colored and on a dark background it's white I could then come in here to illustration theming and instead of using outline here I actually use here we go okay that worked but I think that only works because that is the same case across all of the illustration all of the different colorways they all use blue 800 regularly and then swap to White when they're on a dark background I wish I could control it to say like move down a color level if that makes sense so instead of pulling from 300 it pulls from 200 or whatever unless I set it up like this let's say blue watercolor and then that's right I think it should be 100 on a way background okay on a colored background 200 dark background what have I got it set to here 500 I think and that means coming back into illustration theming watercolor is set to Blue watercolor ooh did you just see it swap out so now colored background white background we might be getting somewhere basically I set them all up in here and I shouldn't have but hey what else changes about the watercolor on dark um actually it looks like we kept other things the same like we're using 500 and 300 for the accents there as well as here what's changed though is the watercolor what about in this little guy okay so this one needs something special just like it did in the other one as well right let's add another variable for this then okay so the L1 outline we'll now use the L1 outline and the accents we use the accents let's see if that worked so we'll change this for our L1 there it is on a white background a color background see the waterc color got a bit darker and then on a dark background it all swaps out I'm just going to drag in a random block here to test that out with yeah I think that looks how we want it to so now basically I just need to duplicate this for the other three colorways and we'll be done 3 hours later and I'm just going to look along and see where I applied the blue one and go apply the yellow one as well and to do this I'm just going to like look along and see where I applied those variables to the blue one and apply them to the ### [11:00](https://www.youtube.com/watch?v=QXbGFDTgzKU&t=660s) The moment of truth! rest okay Moment of Truth did this complicated system of variables work can I reduce what this component looks like sitting here in our design system all of the different variants that we have can I reduce it down to just three let's see right now so this is our blue we can change it to Yellow Red we can change it to green and all the colors swap out let's check the other levels green red yellow blue level three yellow red green and then if we move this over here and have it on a white background and also can we put it on a color background and have the watercolor go darker wow okay I think we did it I honestly think that means that I could get rid of all of these I can just have this component and actually remove this component property completely three variants for the different levels of illustration and then we change out the colors as we please down here my concern is the mess ### [12:00](https://www.youtube.com/watch?v=QXbGFDTgzKU&t=720s) The issue with variables that I might have made in this file in doing this like say I have this rectangle and I want to apply our green to it I come in here and now I've got illustration theming sitting before all our colors and then we've got the blue red green whatever in here and that's yeah that's not so great I think what you can do is like I think you can hide it from appearing in the list by putting a dot in front of it is that true let's see if that turned out no it's still there it's possible that might hide it from being published but still that doesn't solve the problem of it being annoying to work in this file I wonder if I can change the order like make colors be the first collection you know that would be ideal cuz even if it's still in here but it's hiding at the bottom and so you don't you know it doesn't get in the way of the rest that might be okay so the verdict is yes I could greatly reduce the number of variants I have of my illustration components it can operate as a system just like this by using the variables to change the color but was it worth it I'm not sure yet if I can find a way to keep that collection list of variables out of the way and not appearing at least at the top of the list as we work in this shared design system file it might be worth keeping it around but hey even if we don't this was fun to get to know variables I always find that I learn best when I do something Hands-On that's like applicable to my real work that's how I learn best and how I can best learn how to operate the feature and I definitely feel like I've had an introduction to it after this I hope you enjoyed coming along with me on this journey of Discovery are you using variables yet in the work that you're doing how have you got them set up what would you recommend I do differently based on the setup that I ended up creating for this illustration component let me know down belond the comments let's have a chat about it in the meantime in case you missed it I actually attended config where they first announced this feature for the first time and I made a vlog of the experience that you can go watch right over here it's a pretty fun one so I'll see you over there --- *Источник: https://ekstraktznaniy.ru/video/17755*