Deep Dive: unlock design system scalability with variables - Luis Ouriach, Jacob Miller(Config 2023)

foreign [Music] hi everyone how are y'all doing [Music] [Applause] welcome to config day two it's been an awesome conference so far my name is romelia Thai and I will be your host for the next few hours a little bit about me I'm a brand designer on the brand Studio team shout out to Brand Studio I've been around since the very first config and I recently worked on the dev mode launch video as well as other Dev mode branding moments super fun super challenging because I'm not a developer I like to tell people part of my job is pretending to be a product designer and or developer but what a ride it's been Make Some Noise if you're super hyped about Dev mode and all the new features that just dropped [Applause] I'm a mom before bear in Bay area native and washi tape collector okay enough about me anyway I'm so excited to be with you all and share all the amazing things we've been working on truly you are in for a treat we have an exciting lineup of some of my favorite fig mates as you explore and make your way around config for day two we encourage you to share your adventure on social use hashtag config 2023 on Twitter Instagram LinkedIn be real wherever you hang out on the interwebs cool so let's get started welcome to the Deep Dives where you get exclusive in-person only access to demos and sneak peeks of the newest release figma features I cannot wait to watch everyone's jaws drop over the next few hours in the first two sessions we'll be walking through all aspects of how to use variables in the context of Design Systems and variables Jacob and Louie are going to be showing us how to use variables within the context of Design Systems showing you how to equip your components with theming and dimensionality as well as giving us a sneak peek into what's coming up next for variables but first let's take a look at this short video something that can be like simple is not always simpler to our scale when you want to change some button spacing or you want to change iconography we are affecting millions of lines of code over 10 products instead of having to maintain multiple components for different individual modes figma variables allow us to have that applied completely automatically being able to literally just like right click mode equals dark or light and just switch between it's so hard to build the tooling to do that now it's just literally a fraction of a second you can switch between mobile to web without having to manually create different screens for different breakpoints you save by not having to do things five times over and it also makes the Handover process so much easier what we're actually referencing Now using Sigma variables and engineer can then see how it's realized in code you sort of have one source of truth from the design system of all the color tokens that doesn't get lost in translation one of the core principles at Spotify is ubiquity wherever you want to use Spotify we want to be able to be there that of course causes us to have design decisions at scale customers pick up on the small differences between different platforms and being able to deliver a consistent Vision really helps this promote a unified customer experience it introduces a lot of overhead for us to maintain all those complexities now we have the opportunity to really bridge the gap between all these platforms with the spacing tokens there's a lot of potential to cut down all the libraries that we need to maintain we pretty much closed out a bunch of tickets because it solved a lot of issues I think that seems to listen to the community in a way that makes it seem like they're actually using their software themselves [Music] hello hello everyone and welcome to some variables fun so excited to have you here today my name is Jacob Miller I'm a product manager over here at figma and I was very lucky enough to actually be the one running variables super excited for that and with me today is The Dashing I'm there everybody nice to meet you I'm from London and I'm a designer Advocate that basically means that this is kind of my job I get to talk to all of you about components Styles and now variables before we jump in though Jacob quick bow tie check let's go we're good all right before we jump straight into variables one of the things that I want to talk through is something Dylan was talking about yesterday which is it is variables not tokens design tokens have been a thing that we've really been getting asked for from the community for ages and a bit about myself personally one of the things that really motivated me to join figma was I was just tired of waiting for design tokens and so just like you know what I'm going to join them and go ahead and try and ship that and let's jump into it a little bit more though as we were getting these requests for things such as design tokens we are also getting other requests such as string dictionaries or conditional logic or calculations and expressions or parametric design etc etc etc we had all of these things that were really interconnected and related and really we built out a single solution for design tokens we'd end up with disparate systems for all of these individual use cases instead of that we wanted to build something more foundational something that supported not only all of these use cases but also that next big thing and who knows what that'll be that'll be driven by you the community and we're super excited to see that and how you use this foundational feature because that's really what variables is it's a foundational feature that allows you to express all of these items as one feature and so we're super excited to actually show off variables today which is exactly that it's a common Foundation to build all of these things and now I'm going to pass off to you Louie who's going to jump us through the basics of variables yeah indeed before we jump in and start showing you how to create these things how to use all the different types that we have I think it's incredibly important to set these foundations for the foundation feature the foundations for the foundational feature if you will we want to set this concrete base before we go and build our house which is effectively the design system so we want to go and support in the next coming years I mentioned types at launch we'll be launching with four different types of variable color pretty self-explanatory you can use your color values in here string variables for things like text you can see these being applied in different language and translations and those kind of things in your systems number variables as we saw yesterday you can apply these in your height and width Fields also in Min and Max and in any auto layout property and Boolean or if you want to pronounce it like Jolene from the song Jolene by Dolly Parton feel free to go ahead in V2 we'll also be supporting images and typography so bear with us while we continue to turn the key on those ones then they'll be coming before the end of the year as for variables themselves we bundle them in what we call a collection so a collection is the overarching group of all of those different variables within our files if we think about an example collection maybe something like colors you might have some semantic variables called something like text default text success text danger etc etc these similar variables are what we've intentionally grouped into that collection itself you might have a collection for something like sizes to all those translation strings that I mentioned before within the collection we have what are called modes so if we think about our individual variables text default again the mode will be contain the value for that variable so if we take the text D for example the mode value might be two two two two two pretty straightforward where we can extend this though is by using multiple modes so a mode contains the value for that variable but many modes can contain variations of those variable values and I'm starting to get into a little bit of mouth soup here but stick with me if we take the text default example from before 22222 that might represent what we condition can commonly see as our day mode if we want something like a night mode however the next mode will contain a variation of that that might have the string value of eee for a light gray so we end up with two modes in this situation text default translates into a darker color in day a lighter color in the night mode we've intentionally called these day and night mode in these versions because we have seen during our beta customer programs that when we press drive light and dark mode people think that that's exactly what they need to be called you can call these modes whatever you like day night German French Spanish Etc then we're going to move into something called aliases and then Alias is where you effectively reference variables across different collections so if we take this text default example again that is likely to re-referencing a gray from our hex ramp so we might have a gray 800 which feeds into text default that means we're now not storing raw hex values inside of our currently Styles and we're powering these up with the variables that we're launching with those aliases can happen between the same collection between multiple collections in the same file or even between files if we want to so don't feel like you're going to be constrained to that individual Library file when you start to build out your variable collections as it comes to down to the types of token we're trying to push for three main types the first one is primitive and this is effectively where you describe what the token looks like or what it effectively does before in a world of styles so red 100 red 200 red 300 would be exactly that they would be red alternative names for these which we've seen in the wild are things like base tokens Global tokens Atomic tokens these are great but we would really love it if we could try and push primitive as the name for that foundational layer in our variables the next layer up is what we call semantic this is where we start to reference those Primitives into something that's way more descriptive and describe describes the intention of how you want to use that variable so red 500 for example May feed BG danger as an alias so then we're introducing this multi-level approach to managing something that describes its intention as something that describes it is what it looks like this is way more sophisticated and if we decide it in any point that BG danger needs to be referencing yellow 500 we can do that under the hood without having to change that semantic layer alternative names for these are Alias tokens brand tokens or reference tokens Alias tokens is a pretty common one but again we would love it if we could all align on calling these semantic layers because what we look at the Alias is actually the reference between the variables not the variable itself Jacob's doing some very handy hand motions if you can't see what he's doing over here the last layer is quite contentious this is the component layer Jacob and I have actually had many a fight over this internally about whether we want to promote this as a practice I personally love it Jacob's not so sure he believes it lives in the shadow root which is a fair argument the component token is where we go into another third layer so if we take our Button as an example the button may get a variable called button BG totally optional we may not need to go to that layer if we just rely on that semantic layer for BG action for example it can be useful if you have a really detailed sophisticated system that relies on something like a b testing at the component level or if you want to test out a new release of a specific component itself you may rely on that component layer but as I said it's totally optional okay I've been talking a lot maybe let's have a look at how you actually create these things we have a a typical component here for a notification it's a success State and what we have here are four different properties that we have inside we've got the radius the Border color the foreground and the background I'm going to pull back my panels and deselect everything on the canvas in the top right hand corner we now have a local variables option and I can open up the variables panel by clicking on the little settings icon from within here you can see on the top left that we already have three collections inside this file the first one is my favorite icon is the component one the next one is our primitive colors which has all of our very descriptive colors based off what they look like and this is a color ramp from 1 to 500. and then we have something which we'll come back to in a moment I'm now going to create a new collection in here called notification demo I wouldn't recommend you call your collection demo but for the purposes of today we're going to run with this now what I'm going to do is sample these colors from the canvas to create a variable our empty state in the center provides me with a button to create that variable and I have the four types that we're launching with if I create my color uh it's one second love the live demos nothing better can we see if yours is running let's find out all right we're gonna switch over can we just make sure production's got the second screen please in the meantime yes in the hardest part about this project I think the interrupt between all of the features that it's supporting right now so if you have obviously the Design Systems use case that is obviously one of them but we're using variables for so much more than that as well including things like prototyping or then handoff for Dev mode as well that's been one of the biggest things for us personally yeah and your favorite part the mode switching it's just magical seen it drop and drag into things and just automatically adopt those contacts it's just it's so cool to see as a designer and I don't know for me I think that's somewhere where we're going to be building in a bunch of really big improvements for it as well yeah I'm excited for that yeah I can't wait for the teams to start using these things because we've been talking about this for a while yeah and I know you're really ready to go here we go Rebecca let's jump over so let's just pretend that didn't happen I'm going to open up my local variables panel on the right hand side thank you and to just delete these so we can start again okay we've got empty state of our variables panel I'll create a variable for my color and that's now activated that field so now we can go and name this whatever we want I'm going to use some colors just for the demo purposes today to make them extra descriptive so we can jump into them and reference them a little bit later so first thing we're going to do is create a background so BG notification and now I can sample this using the Picker on the canvas the next one is our FG so foreground notification again nominal culture is something you can decide but for the purposes of today we're using BG FG for reference I'm gonna zoom in here I'll sample this on the canvas the last one I'm going to create for the colors is border border and Sample this too the last one I'm also going to create here for the different type is I'm going to select my component on the canvas and see in the top right hand side we have a number 48 for the radius which is pretty round so I'm going to create a number here for radius and write 48 inside as I mentioned before this could be aliased between collections so if you need to go to that layer you definitely can now with that component selected I can apply them similar to how you would apply Styles scrolling down on the right hand side I now have my selection colors and I can apply them from the panel here so you see we've got FG notification border and BG notification what you'll notice now is that these have switched to be a pill so now we know that we're supplying these feeding these variables instead of them being raw hex values or Styles previously lastly in the radius panel at the top right we now if I hover on here you'll see we get a variables icon which will start to see feeding throughout the entire product now selecting this I now have the radius property in my drop down and I can apply it this also gets fed with that pill shape that should be now quite familiar nothing has changed visually here but under the hood we now know that we're feeding this with those local variables in this file back to Jacob alrighty I want to talk through obviously one of my favorite things in here is modes and modes is an awesome superpower that variables has obviously you can do simple things with this such as we can do light and dark mode Made Easy and here we can just simply drag this over and inherit this context and we can see that update immediately oh and can we switch screens over to mine let's see are you presenting it let's just drive from here let's drive from there easy enough and so modes are really one of the superpowers that we have over here one of the things that we can do with them is obviously this dragging and that's really supported by going forward and creating semantic references between light and dark mode for example we can have over here as Lou is showing things like text background or border things that are describing how you use these variables and represented them across multiple modes to bring it down to the real world I want to create an actual example over here today Louie would you step one step to the left now some people have been saying online that Louis was stealing my can fit and they may have a point I personally would argue that it's just a different mode representation of it and that's dope I'm down with that thank you for entertaining us absolutely but before we go in and see how we actually create this let's look one more time at the old way that we went forward to actually create variables with or do theming without variables so I'm going to go over here and I'm going to try and use your keyboard from another country how do I hide the UI thank you how do we get the UI back bless you all right let's look at this label over here previously what I have to do is I have to select this and go ahead and create a component over here then from there I'd create a variant of that name that a dark variant then in that dark variant I'd go through down to the selection colors change the fill to a lighter color like this change the actual text over here to a darker color then go ahead and add a colorblind mode and a different mode for high contrast and then do this over and over again for all the different components inside of my system over and over and over and over until I was maintaining hundreds of thousands of variants which sounds fun is it that does not sound fun at all anybody else had that amount of fun before in figma in absolute pain but now one of the things that we can do is we can represent this exact same component across multiple different modes so you're now only having to update a single source of Truth and that is really the power of variables going forward even further I want to show you how we can do that utilizing the notification example that Louie was showing us previously and so let's look into this really quick over here I'm going to select this notification example and what we can already see is that is equipped with our BG notification our border and our foreground notification but I'm going to go ahead and set up that collection that Louie had set up earlier to enable multiple modes so the first thing I'm going to do over here is open up my local variables authoring window and then in here I'm going to go and add a new mode once I do this immediately what we're seeing is that we have mode one and mode two I'm going to Simply rename these to be my light mode and my dark mode and then from there what I'm going to do is I'm going to change my dark mode references to the color palette that we have over here so I'm going to change my BG for dark over to this background I'm just going to sample that and then for my foreground over here I'm going to sample this one and then likewise for my border I'm going to go ahead and Sample that one as well and now here's one of the fun things once I do that we'll notice that I can go over here into the layer panel and I can click on this and I can switch this into dark mode and we immediately see a different representation of this notification component in addition to that though what we also have in the layer panel is description showing you that this has been explicitly set to dark mode that way you can understand what the context of this layer is but you can also understand what layers underneath it are inheriting but I'm going to go a bit further than that as well I want to show off a a pro tip over here from Louis first of all so that that pill that he just showed you for the variable switcher that appears in the layers and it appears in the properties panel only it plays if you have a variable that has multiple modes applied so think of that as like a hey this is happening as well that also enables us to unlock something else which is an auto mode which Jacob's going to run through now absolutely Otto is one of the really cool things inside of variables if we actually look over here in this drop down for the layer panel we'll see that this selection here has three options auto light and dark but if we go back to the actual authoring model over here one of the things that we'll notice is that I've only set up two modes that third one Auto is a special one and what it means is look through my parent lineage and if there's any explicitly set mode automatically inherit that and apply it to myself so let's see that in action I'm going to go ahead and expand this over here and what we're going to see is we have a few different options over here as well I'm just going to move this over here and I'm going to set up some context for each of the elements that we have over here right now I have a light mode and a dark mode frame set up I'm gonna go ahead and just bind each of these to have my foreground uh color over here and I'm also going to steal internet from Louie over here so I can get it on this laptop fingers crossed allow accessory to connect let's find out libraries smooth light butter smooth like butter I love seeing it nada oh there we go we saw some look at that and thank you for the notification that there was no internet on this laptop Louie very kind of you I'm just looking out via Jacob and so I'm gonna go ahead and set this bill over here two inside of the library oh we got some things happening I'm going to set this to my foreground and then I'm going to set this one over here also to my foreground and you're going to see why in a second so now what I can do now that I've applied these variables inside of this Frame at the parent frame level I can go ahead with this layer and now explicitly set this to light mode and likewise with this one over here I can explicitly set this to dark mode and you would have noticed the dark mode text change color there too Magic and now what we're going to do is with this notification example I'm going to set this back to auto and once I've done that now what I can do is I can drag this notification over here into light mode and we'll notice nothing changes there because I'm going from light mode into light mode but as soon as I drag this into dark mode we'll notice that automatically changes and inherits that update it took us a little while to get there but we got there got there that was Auto that was Auto and now I'm going to pass it back to Louis on this laptop where he's going to walk through some numbers take it away Louie thank you so let's go and take a look at a few more different variable types and I'm going to start with numbers and I run through booleans as well numbers just like the general variable token itself has a few different types of applications that we can put it inside so height and width as I mentioned before as well as that Min and Max that we are really thankful that are shipped as well border radius as I showed you before as well as all the auto layout properties so space between and padding around your elements this will also be fed into typography once we ship that as well as shadows and layout grids So eventually we're going to be having variables for numbers almost everywhere inside the product similar as well to the general variables different types that I mentioned at the start would align with those for our numbers as well the Primitive number type would be something like size four where you'd expect that to be something like four pixels in size feeding that into our semantic layer something like radius small you might be feeding that with size 12 for a 12 radius and then lastly again the component layer which is definitely optional but I would like to you to think about it is that you might have something like a title margin bottom I've kept these names intentionally vague to show you that they're definitely not something you should be thinking about but maybe you should you might have a toast padding horizontal something like that in practice we typically find ourselves building components that look something like this where we have what is everybody's favorite component the button in a few different states default hover inactive and a few different densities compact comfortable spacious at the moment this is fine we can add as many different variants as we need until performance starts to hit and we pull our hair out what we can start to think about is how we can look at this in a much larger scale across our system where we might have and definitely do have more than just one button in this instance where we have three buttons we've now got 27 components that are really really similar and that just is not efficient that's just not how we want to be running our systems so what you want to start thinking about is how can we consolidate these things using those number variables I mentioned if we zoom in and look at our densities now we've got that compact comfortable and spacious setup in the file already I'm going to create another collection in here suitably named button demo now what I'm going to do is just take a look at the properties we have inside this button if I select the compact in here you can see we've got 12 radius 12 horizontal padding for vertical if I look at the last one the spacious one we've got 100 which is effectively all round then we've got a 24 horizontal and a 12 vertical let's maybe think about how we can supply these with number variables just create those number variables I'll create one for radius I'll set the default value for this to be 100 to match what we have selected I'll create another number variable for horizontal padding just like before these names are to be confirmed this one will be 24. and then we'll have a vertical one too spelled correctly this is set to 12. so let's go and apply these similar to before in the radius input on the top right I can now apply my radius from this collection swap to the pill everything's cool next up we've got the auto layout we've got our horizontal padding and we've got our vertical padding here so I've now applied that to all three of those components imagine this in your system where you could select infinite amounts of components that have the same values and apply them all in batch like that back to what Jacob mentioned before we can have multiple modes inside of here so now we can think about these effectively modes for our densities and apply the variables for those as well in this top level mode I have my spacious the next one I have my comfortable and the lastly we have compact for the comfortable ones let's select them we've got 16 on the radius we have 16 horizontal and we have eight on the comfortable on the vertical for the last one we want to go look at our compact so this one we have 12 on the radius 12 horizontal and four vertical let's now apply those two bump that down we've got radius we've got horizontal and we've got vertical and you're probably thinking wait a second they're changing they look exactly like this last one bear with me a second let's now finally apply those to the center the radius horizontal oops horizontal and vertical if I take an instance now we still have that variant switch over here for density but we can totally remove this because what we can now rely on is that mode inheritance so if I scroll down into the right panel to my layer section that I that variable icon has popped up again and I can change the variable mode from here so I've got my collection Auto is spacious because that's the first mode that we have in the collection we can change it to comfortable and I can change it to compact so what we can now do is just delete all these reducing our pretty limited set [Music] reducing our pretty limited set of nine components down to three and at scale we've gone from 27 down to nine across the entire system of real world components and hundreds of them you can imagine the consolidation you can imagine the performance improvements and you can imagine usability improvements from having trying to find a component in a system from things that look pretty similar next up is slices so I've touched just Loosely on sizes here but we're going to create some more variables and use an example from from us which is the auto layout launch RCS model this is something that we launch and usually have in desktop and mobile which in the current state means supporting effectively two versions of the same component again inefficient we should be able to consolidate these down to one component so let's go and do that before open up my variables panel create a new collection and call this card demo and then have a look at our layer structure for any of you that know me you know that I love layers and how to structure them so there's quite a few in here and they're all named very important here what we have is a wrapper for our content so our content is wrapped at the bottom here we have our artwork at the top and we have our copy and then the button at the bottom we can now apply some values to make this look a little prettier by navigating back up to the layer tree shift and enter I'm starting to look at the values that we want to apply to this card let's create a new variable for number and call this radius and I'm going to start with 12 here then we're going to start thinking about our content So within here I don't know let's pad this out by 16. number variable I'm going to call this space between just to match what the terminology is with auto layout I would encourage you to use a sizing variable for this again for today we're going to run with this one I'll set this to 16. then create a padding variable and I will set this to 16 2. selecting my component I'm going to apply the radius again going back to my card demo collection you'll see the collections are split by the Bold labels so if you have a ton of collections in your file that's how you'll be able to distinguish between them if you split your collections up between files you can also manage permissions between who gets access to what collections as well that may end up in a world where your Primitives read 100 live in a collection that people don't see so you can start to split up the Privileges and who gets access to the right tokens and the right variables wherever they need them let's apply that radius starting to come into shape already a nice 12 radius let's apply some spacing to our content for the padding coming together and maybe the space between as well for the auto layout space between variable you'll notice this is slightly different we drop open the panel within that that field and we can apply a variable at the bottom here and apply our space between lastly I'll select my button jump back to the parent and apply our padding here as well this is fill container so there'll be no horizontal difference you can start to see us coming together maybe it's a little chunky but I'm okay with that we've got a radius at the end as well the last one I want to do because I mentioned at the start that this is a desktop and a mobile component so let's now create another variable for a number for the width and I'm going to set this width to be 360. and change the mode to be mobile over to the right hand side I now have two panels which I'm going to drag an instance into and this is where we can start to rely on mode inheritance again to think about that desktop and mobile option this is an instance component so it's inheriting all of those variables straight from the top if we take an option and pull it to the right hand side and want the desktop version right now either we'd have to manually resize this or ship another component as a variant or a separate component itself again inefficient inefficient inefficient let's pull open the variables panel create another mode called desktop and now I'm going to select a parent here so this is the top down option for how you can inherit those modes select my layers panel card demo desktop no change because we haven't changed the values yet let's now make some changes in here so I'll zoom in a little bit change the radius to be 24. you'll see that rounding up already space between us match that 24 and padding let's go big let's go 48. lastly because this is desktop before they want something to be slightly wider let's set the width to be 480. and now I just need to apply that so if I head back to the main component in the width field we drop this down apply the variable width and see that automatically applied in a desktop version so we're managing all those values in one collection here for our card component and that propagates to every single instance that we have wherever we're using it consolidating components introducing those variables next up is booleans so this is something that actually applies really well this one works incredibly well in tandem with prototyping but it does have some real big impact to our Design Systems too again historically if we're looking at something like a menu we've got a black menu here for the contrast on the screen desktop version mobile version you might have a tablet version you might have a different version for different platforms they'll all either be different variants or different components themselves again let's consolidate those down and try to work out how we can have one component for many different instances so the before and the after are drastically different right now the after has everything inside which would probably match how we'd structure the HTML what we want to be doing is looking at our display non-display visible to show the elements within this menu rather than having somebody shipping a different component and confusing our engineers let's open up the variables panel and create another collection called menu demo and within here I'm going to start creating some Boolean options so within this menu we have the mobile hamburger the logo the menu items for desktop and the basket or cart icon for mobile the first variable we'll create is that Boolean option at the bottom I'm just going to call this hamburger and I'm going to set this to false if this is working on the assumption that we want desktop to be the default option it'll be the other way around if you want your mobile menu to the first one the next variable Boolean as well will be menu items I'm going to set this to true because you're on desktop those menu items to display and lastly we're going to have the basket icon set defaults too rename the mode to desktop and start to apply these if I drill down into the layers I've got my hamburger selected and to apply the Boolean variable still in the same position in the layers panel there's an eye icon which you may never have paid attention to but if you right click on it we can now apply those Boolean options we now see all those Boolean variables appearing in that in that drop down list and I can go and apply the hamburger that automatically hides it from the canvas in the layers panel you'll see the visibility is now switched to off and we have the hamburger Boolean applied in the right hand side in the properties panel for the other options too select my menu items right click apply my menu items no visible change we want those to be on lastly select the basket icon right click toggle off we now have our desktop menu a new mode will be created where we go for mobile we basically want to reverse all of these so we want on and off for different platforms on off on now taking instance of that component I can again use the the toggle for that inheritance menu demo Auto desktop again because that's the first mode in the collection change it to mobile we switch them out we've got our mobile items and we get the desktop items in the desktop version but because I'm very particular about sizes I know that I want my desktop menu to be 1440 and my mobile menu to be 375. so let's bring back the number variable for width I'll set my desktop to 1440. my mobile to 375. select them both and now apply that width apply it to both mobile switches to 375 we've now got our same component of being powered by the booleans all right back to Jacob to wrap up alrighty y'all uh obviously so excited to show all of this here today but in addition to that one of the things that we want to do for all of you is to talk a little bit about what's coming next for variables one of the things that we're deeply aware of over here is that you are depending on us to build out your road maps and to architect Your Design Systems so you want to give you a little sneak peek about what we're working on and what's coming next for this feature one of the first things is obviously typography support this is a huge one and we're totally aware that we need this for a true multi-product multi-brand experience trust us when we say that we are working on this really hard and we're trying to get this out before the end of the year one of the next things that we're looking at doing as well is equipping all of the other elements inside of figma to allow you to bind variables to them some highlights here are effects so you can apply to things such as the effect color or the blur or layer opacity and also binding to individual gradient stops that's really what we want to allow variables to do is to allow you to bind to literally anywhere inside of figma that you want to control with the variable the next thing is we're going to make this work hand in hand with component properties so you can then bind a variable to a component property and use that to dynamically control your components one of the other elements that I want to talk through though is the next big thing which is really the biggest superpower of variables and that's going to be something known as extended collections extended collections is going to be one of our answers for solving this multi-product multi-brand approach for variables I'm going to walk you through today a little bit of how it works first and foremost oftentimes when we're designing these modes we have two axises one is our brands for example we may have a base brand we may have a sheets brand as well but in addition to that we also have things such as light and dark mode how we represent this today however is a little bit difficult because we have to have a sequence of all of these inside of our mode for example we'll have our base light our base dark and then our sheets light and our sheets dark and this becomes a problem as we go to a larger scale where we have many products such as if we have a ton of things inside of our system suddenly we have this exponential growth of modes and so what we want to do instead is allow you to go ahead and Define your base color system where we just have things such as your default BG and default text as well as your brand VG and brand text and then create another collection that's an extension of that where you can add your overrides only to the elements that you want to override such as the brand BG or the brand text and then what we can do is we can create this inheritance pattern so some of these elements will be inherited while other elements will be overridden and the great thing about that is then what we can do is we can use that hand in hand with your core design system and it'll allow you to go ahead and switch some of these components between one brand or another and so that's one of the superpowers that we think we're going to give you with extended collections but we've got a little bit of time left Louie and we took a look at Twitter as we do and so there's a ton of questions coming in we weren't editing this backstage so we took a few questions I'm going to try and answer them live for you first one Jacob what's the difference between Styles and variables that's a great question styles are something that we're looking at for a group of values for example a style today for a fill can often incorporate things such as a backing image as well as a gradient on top of that all with layer modes applied to each of them with variables we're looking to represent one and only one value and so that's really the biggest difference between these things if we compare this a little bit to the web one of the ways to think about it is a style can be something that is analogous to a CSS class whereas a variable is a single CSS variable and so those hand in hand and you can back those styles with variables as well next question what do we got oh are you deprecating Styles Louie I'm going to tell this to you absolutely no that styles are still very important to us and we'll be continuing to be supported variables are different and effectively what you want to do is work with what works for your team if you need Styles use Styles if you need variables use variables they will also work pretty well in tandem with each other so keep doing what you're doing now and we'll continue to support you as you go forward next question why can't I use a full stop or a period in the variable name it's a great question one of the things we're aiming to do with this is to align as close as possible to the w3c community token spec right now when variable names periods are not allowed in them per the spec however one thing we're looking at doing in the future is allowing you to separate out what name you have in figma from the code syntax representation of this token and one of the things we'll be trying to do is pushing that out so you can customize that yourselves once we do that we'll have a little bit more flexibility but for now we really want to align with that spec as much as possible I'm looking forward to designer friendly names and developer for anything I'm so excited for that all right next question how do I import an expert Louie thankfully it's a couple of people on my team uh Jake and Akbar built a couple of plugins for us so these are something you can run their stored on GitHub you can run them locally in your organization and you can then Import and Export your Json files as you need to run the variables that we just launched so we have plugins you can use them please go ahead and give us feedback as well if they're not suitable for what you need we're looking to publish more updates to these in the future now you're all ready to go before you do that we've also prepared a variables playground file which you can go and find in the figma community go and search variables playground there's a ton of other examples in there to get you up to speed with the four different types of variable that we have supported at launch as well that will be updated as we continue to ship updates as well as that we'll have another live stream on July 29th where we will be focusing specifically on migration so make sure you go and sign up to that on our events page and we'll see you all there thank you so much this has been fun enjoy the rest of your conference [Music]

Channel: Figma

Views: 29,725

Keywords: figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, Figma tutorial, Config, design system, tutorial, product:figma_design, audience:designer, language:english, format:standard, produced_by:other, theme:design_systems, event:config, series:other, type:feature_tutorial, level:none, primary_feature:variables, secondary_feature:

Id: M0NU5QFLCl4

Length: 47min 3sec (2823 seconds)

Published: Sun Jun 25 2023