Figma tutorial: Intro to variables

by definition a variable is something that can vary in value or take on multiple values variables in figma store reusable values like color values and numbers that can be applied to all kinds of design properties and even prototypes sounds similar to Styles well not quite because of their Dynamic nature variables allow designs to change when used in different contexts for example you can switch your designs between light and dark modes instantly change all the strings of a modal to a different language or have padding values change when designing for a different device size a variable's values can also reference other variables making updating Design Systems a breeze if you have coding experience you may be familiar with the concept of variables already if not don't worry no coding knowledge is needed in this video we'll cover how variables work and how to use them to represent design tokens and account for different modes and themes to follow along grab a copy of the design from the community file Linked In the description below already got the basics down check out the next video to learn how to use variables in prototypes world peace is an e-commerce site that delivers organic produce to your home like most brands World peas has a set of colors used repeatedly for different functions like paragraph text or to call attention to a primary button we could use styles to create reusable colors for our palette but let's see how variables can offer a more flexible design process here is the color palette for the World Peace website first let's create a variable for each color deselect everything on the canvas and find the local variables section in the right sidebar local variables include all variables created in the current file click the open variables button to open the variables panel then click create variable to create our first variable a drop down appears with four types of variables color used for color fills number for Dimensions Corner radius and auto layout properties string or text layers and variant properties and lastly Boolean defined by a true false toggle to toggle things like layer visibility support for variable types will expand in the future so stay tuned let's choose color and give our new variable a name in the next column type the variable's value or use a custom Color Picker we've created our first variable for more editing options hover over the variables row and click the settings button there you can describe how to use the variable hide the variable from publishing and more we have a few more colors to go so let's create variables for each one [Music] great now let's organize them into groups let's select the gray color variables right click and choose new group with selection double-click the group name in the sidebar and rename it to color forward slash gray select the rest of the colors and create a new group called color forward slash brand notice how the forward slashes turn color into a parent group with gray and brand groups nested within it our color palette is all set up let's name our first collection of variables this will help us organize and find them later open the collection drop down and select rename collection we'll call it Primitives as these are the core building blocks for World peas [Music] semantic names like accent color or primary color Express how an element should be used in designs the variables in The Primitives collection lack semantic names as they don't express a function or intent this is because they won't be used directly in designs instead we'll create a new collection of variables that reference the Primitive values give those variables semantic names and use them in designs to learn more about semantic naming check out lesson 2 Define Your Design Systems documentation from our intro to Design Systems course in software this method of defining values by referencing other values is called tokenization it's widely used because it helps maintain consistency in designs you'll see why in just a bit open the collection drop down and select create collection we'll call this tokens now we'll create variables for the text colors we need based on their functions primary secondary brand and invert while world peace is using semantic names use whatever suits your design best create a new color variable and name it text primary then click the fill box and select the libraries tab here we'll see a list of color variables including the ones we created for The Primitives collection we'll go with color gray 900. let's create a few more color variables for the rest of our text functions [Music] next we'll create color variables for surfaces such as background colors with functions that match the ones used for text [Music] we'll also create a color variable to use for borders lastly let's group these new variables into the respective categories surface text and border great now let's apply variables from the tokens collection to our designs take a look at this watermelon product page let's select the button and go to the fill section of the right sidebar open the style picker and you'll see a list of variables and color styles the variables appear as fills and rectangles while Styles appear in circles find the surface brand variable from the tokens collection and apply it to the button for the web pages background color select the top level frame and apply the surface primary variable we'll also go through stroke properties and text layers to apply the appropriate colors to them a few variables in this collection reference the same variable for example text primary text brand surface invert and Border primary are defined by the same color variable from The Primitives collection color gray 900. if we change the definition of color gray 900 then the variables referencing it will follow suit cool but what if we want to change just the Border color [Music] if we used Styles we would have had to find and select every layer with the stroke to update its color tedious chore with a higher chance for human error especially if your designs live in multiple files if we organize Styles semantically and update to the color palette means we'd have to individually update every instance of that color style since Styles can't reference other styles since we used variables to reference other variables we can change the definition of border primary to a different variable from The Primitives collection any layer using border primary updates accordingly and it only took a few seconds this is why we tokenize our variables keep in mind this doesn't mean you should get rid of using styles Styles can store sets of values allowing for reusable properties like gradients or Shadows variables can only store raw single values we want to be able to quickly switch World Peace designs between light and dark modes but how this is where modes and variables come in modes allow designs to change when used in different contexts for example string variables can be used for contacts like localizing language number variables can account for spatial changes across different device sizes and Boolean variables can toggle layer visibility to show a warning if a product is almost sold out let's go back to our tokens collection to set up light and dark modes using Color variables click the plus button in the column header figment duplicated colors from the first mode column to the new one the First Column already accounts for our light mode let's rename it to light the second column will account for our dark mode so let's rename it to dark then choose different variables from our Primitives collection to Define them all our hard work is about to pay off select the frame for the watermelon listing and go to the layer section in the right sidebar since the frame has layers with variables applied the change variable mode button appears let's click it open tokens and select dark the entire frame changed to The Valleys we set for dark mode but wait what was that auto option in the drop down Auto means in objects mode is based on its parents mode so if we set this object's mode to Auto and drag it between a frame with light mode and a frame with dark mode it changes according to the context if the parent has no mode then the object defaults to the first mode of the variables collection in this case it's light mode foreign variables worked out so well let's try using the same token and semantic methods on number variables to Define spacing and Corner radii values let's open the collection of Primitives the core building blocks for World peas to Define their values since this part is similar to color variables let's jump forward to our spacing and Corner radii values all finished neat spacing variables and radius variables live in their own respective groups the spacing variables have names and values based on multipliers of eight since World Peace uses an eight-point grid system while Corner radius variables use t-shirt sizes also with values in multiples of eight now that our Primitives are set up let's reference them from the tokens collection spacing tokens will use t-shirt sizing as names the first one spacing Dash none has a value of zero while the rest reference the spacing variables from The Primitives collection [Music] thank you let's add radius tokens radius minimal radius rounded and radius full each referencing radius variables from The Primitives collection lastly organize our new variables into two groups spacing and radius it's time to use the new variables from our tokens collection on our web page select the container with categories and product information and hover over the gap between field in the auto layout panel click the variable icon and choose spacing 2XL from the tokens collection for horizontal padding choose spacing 2XL and vertical padding spacing XL lastly select the add to basket button click the variable icon in the corner radius field and apply the variable radius full let's finish applying our new number variables to the rest of the web page now what happens if we change spacing to excel to a different value just like before we can easily choose a different value from The Primitives collection and anything referencing spacing 2XL will change accordingly currently world peace is set up for light and dark modes but what if we need a brutalism aesthetic as well we could go into our tokens collection to set up one mode for light with brutalism and one for dark with brutalism however if values from the brutalism modes change we might have to double the work to update them instead let's open our Primitives collection and create a new mode we'll name it brutal theme and update the first mode to Modern theme for the Shades of Gray let's use shades of purple instead for brand colors we'll use the same orange color since we're using a brutalism aesthetic we want corners of objects to be sharp instead of rounded so let's change the radius values to zero we'll leave spacing values as is and that's it let's select the product page and open the change variable modes drop down since The Primitives collection now has multiple modes it appears as an option hover over and select brutal theme amazing the colors changed and Corners that were once rounded are now sharp edges now let's change the tokens mode to dark nice because we already did the heavy lifting to Define and apply light and dark modes creating a new brutal theme made this a breeze [Music] this is just the beginning of variables if you want to learn more check out the resources linked below want to know how to use Boolean and string variables in prototypes check out the Prototype of variables tutorial where we use expressions and conditions to create realistic prototypes if you're wondering how to incorporate variables into your team's design system or curious what's coming next with variables be sure to like And subscribe to get notified of future tutorials and product news see you next time foreign

Channel: Figma

Views: 175,241

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, tokens, variables, figma tokens, figma variables, product:figma_design, audience:designer, language:english, format:standard, produced_by:product_education, theme:other, event:config, series:figma_tutorial, type:feature_tutorial, level:intermediate, primary_feature:other

Id: 1ONxxlJnvdM

Length: 14min 50sec (890 seconds)

Published: Wed Jun 21 2023