title
Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)

description
In this video, I'm going to show you everything you need to know about Figma's newest feature – Variables. Download the practice file from here (copy the frames and paste them into a new file)👇: https://bit.ly/3D64zBY 👉 Become a UI Designer with my UI Design & Figma Mastery course: https://bit.ly/43v79vX 📸 Instagram: https://www.instagram.com/uiux.arash Who is Arash Ahadzadeh? Well, I'm a UI/UX designer and a university instructor with 7+ years of experience, and I teach people how to design great user interfaces and experiences. I've helped over 30,000 students become UI/UX designers from scratch worldwide.

detail
{'title': 'Figma Tutorial: Use Figma Variables Like a Pro (+ Practice File)', 'heatmap': [{'end': 976.08, 'start': 927.088, 'weight': 0.705}], 'summary': 'This figma tutorial covers the use of variables, design tokens, and variable systems, demonstrating the creation and application of color and size variables for a cohesive and modifiable design system, along with variable scoping, modes, and automation for efficient design processes.', 'chapters': [{'end': 70.354, 'segs': [{'end': 31.18, 'src': 'embed', 'start': 0.069, 'weight': 0, 'content': [{'end': 3.15, 'text': "In today's episode, we are gonna talk about Figma variables.", 'start': 0.069, 'duration': 3.081}, {'end': 7.852, 'text': "And by the end of this video, you'll learn how to use variables in Figma like a pro.", 'start': 3.33, 'duration': 4.522}, {'end': 9.432, 'text': 'So what are variables?', 'start': 8.252, 'duration': 1.18}, {'end': 19.916, 'text': 'Variables allow you to save reusable values that can be applied to different design properties, like fill stroke, padding margin, et cetera.', 'start': 9.732, 'duration': 10.184}, {'end': 24.338, 'text': "But wait, isn't it the definition of styles? Well, not really.", 'start': 20.356, 'duration': 3.982}, {'end': 31.18, 'text': 'Although both styles and variables allow you to store reusable values, they have two fundamental differences.', 'start': 24.638, 'duration': 6.542}], 'summary': 'Learn to use figma variables for design properties efficiently.', 'duration': 31.111, 'max_score': 0.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM69.jpg'}, {'end': 73.897, 'src': 'embed', 'start': 50.208, 'weight': 1, 'content': [{'end': 58.721, 'text': "The other difference is that a style can't reference another style, but a variable can reference another variable or even a style.", 'start': 50.208, 'duration': 8.513}, {'end': 61.845, 'text': 'And this is what makes variables so powerful.', 'start': 58.861, 'duration': 2.984}, {'end': 65.571, 'text': 'Why? Because we are now able to create design tokens.', 'start': 62.186, 'duration': 3.385}, {'end': 70.354, 'text': "if you don't know what they are, don't worry, we are going to talk about them in this video all right.", 'start': 65.931, 'duration': 4.423}, {'end': 73.897, 'text': "now that you know what variables are, let's start creating them.", 'start': 70.354, 'duration': 3.543}], 'summary': 'Variables allow referencing other variables or styles, enabling creation of design tokens.', 'duration': 23.689, 'max_score': 50.208, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM50208.jpg'}], 'start': 0.069, 'title': 'Figma variables', 'summary': 'Discusses figma variables, emphasizing their distinction from styles, their role in storing reusable values, and their capacity to reference other variables or styles, facilitating the creation of design tokens.', 'chapters': [{'end': 70.354, 'start': 0.069, 'title': 'Understanding figma variables', 'summary': 'Discusses figma variables, highlighting how they differ from styles, their applications for storing reusable values, and their ability to reference other variables or styles, enabling the creation of design tokens.', 'duration': 70.285, 'highlights': ['Variables in Figma allow for the storage of individual raw values like hex color codes or text strings, distinct from styles that can be used for properties with multiple values, fostering the creation of design tokens.', 'Variables possess the unique ability to reference other variables or even styles, enhancing their versatility and enabling the creation of powerful design tokens.', 'Styles and variables in Figma have fundamental differences in their applications, with variables being capable of referencing other variables or styles, distinguishing them as a powerful tool for design token creation.']}], 'duration': 70.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM69.jpg', 'highlights': ['Variables in Figma store raw values like hex color codes or text strings, fostering design tokens.', 'Variables can reference other variables or styles, enhancing versatility for design tokens.', 'Variables in Figma distinguish from styles by referencing other variables or styles, enabling powerful design tokens.']}, {'end': 482.012, 'segs': [{'end': 120.905, 'src': 'embed', 'start': 94.631, 'weight': 0, 'content': [{'end': 101.875, 'text': "So here, if I select any of these elements, for example this button, as you can see, it's not using any color style or any variable.", 'start': 94.631, 'duration': 7.244}, {'end': 105.056, 'text': 'The same thing applies to these elements, these text layers here.', 'start': 101.995, 'duration': 3.061}, {'end': 110.059, 'text': "So now let's see how you can create variables in Figma and how you can utilize them properly.", 'start': 105.297, 'duration': 4.762}, {'end': 112.3, 'text': 'First of all, make sure to not select anything.', 'start': 110.179, 'duration': 2.121}, {'end': 113.661, 'text': "I'm just going to click somewhere here.", 'start': 112.42, 'duration': 1.241}, {'end': 117.003, 'text': 'And on the right side, you can find this local variable section.', 'start': 113.861, 'duration': 3.142}, {'end': 120.905, 'text': "I'm going to click on this icon and here this window pops up.", 'start': 117.183, 'duration': 3.722}], 'summary': 'Demonstrating variable creation and utilization in figma.', 'duration': 26.274, 'max_score': 94.631, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM94631.jpg'}, {'end': 171.854, 'src': 'embed', 'start': 133.628, 'weight': 1, 'content': [{'end': 137.189, 'text': "you can rename it to whatever you want, but i'm gonna name it primitives.", 'start': 133.628, 'duration': 3.561}, {'end': 141.19, 'text': 'so now, inside this collection, we can start creating our variables.', 'start': 137.189, 'duration': 4.001}, {'end': 149.655, 'text': "i'm gonna hit this create variable button and, as you can see, we can create four different types of variables color number, string and boolean.", 'start': 141.19, 'duration': 8.465}, {'end': 156.742, 'text': 'Figma mentioned that they are gonna add more variable types in the future, but at the moment, we only have access to these four types.', 'start': 149.815, 'duration': 6.927}, {'end': 160.046, 'text': 'So here I am gonna click on color to create a color variable.', 'start': 156.983, 'duration': 3.063}, {'end': 162.809, 'text': 'Just like creating a color style, we are gonna name it.', 'start': 160.226, 'duration': 2.583}, {'end': 169.113, 'text': "I'm gonna name it blue, dash 50 and now I can assign a value to this variable.", 'start': 163.009, 'duration': 6.104}, {'end': 171.854, 'text': 'Okay And the value should be a hex color code.', 'start': 169.393, 'duration': 2.461}], 'summary': 'In figma, users can create four types of variables - color, number, string, and boolean, with plans to add more in the future.', 'duration': 38.226, 'max_score': 133.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM133628.jpg'}, {'end': 317.677, 'src': 'embed', 'start': 290.077, 'weight': 4, 'content': [{'end': 297.247, 'text': 'so we basically created a color category and then the blue subcategory underneath, just like this.', 'start': 290.077, 'duration': 7.17}, {'end': 301.913, 'text': 'as you can see, we have this color category and then inside we have this blue category.', 'start': 297.247, 'duration': 4.666}, {'end': 309.515, 'text': "perfect, now i'm just going to click on this all variables and we just need to create different variables for this gray color scale as well.", 'start': 301.913, 'duration': 7.602}, {'end': 312.276, 'text': 'so basically, we need to repeat the same process.', 'start': 309.515, 'duration': 2.761}, {'end': 317.677, 'text': "i'm going to click on, create variable just like this, and i'm going to call it gray 50.", 'start': 312.276, 'duration': 5.401}], 'summary': 'Creating color categories and subcategories, including gray 50 variable.', 'duration': 27.6, 'max_score': 290.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM290077.jpg'}, {'end': 482.012, 'src': 'embed', 'start': 437.77, 'weight': 3, 'content': [{'end': 443.835, 'text': "i'm not gonna go ahead and create variables for all the numbers we need for a project, but you got the idea right.", 'start': 437.77, 'duration': 6.065}, {'end': 450.579, 'text': "so for this variable, i'm going to change the value to 4, assuming that we are using a four-point grid system.", 'start': 443.835, 'duration': 6.744}, {'end': 454.321, 'text': "For the second one, I'm going to set it to 8.", 'start': 451.12, 'duration': 3.201}, {'end': 457.362, 'text': "For the third one, I'm going to set it to 12.", 'start': 454.321, 'duration': 3.041}, {'end': 459.963, 'text': 'The next one is going to be 16.', 'start': 457.362, 'duration': 2.601}, {'end': 462.685, 'text': 'The next one is going to be 20.', 'start': 459.963, 'duration': 2.722}, {'end': 464.505, 'text': 'And the next one is going to be 24.', 'start': 462.685, 'duration': 1.82}, {'end': 470.348, 'text': "Now let's select these number variables and just group them just like this.", 'start': 464.505, 'duration': 5.843}, {'end': 473.269, 'text': "And this time I'm going to call it spacing.", 'start': 470.948, 'duration': 2.321}, {'end': 474.149, 'text': 'Okay, perfect.', 'start': 473.449, 'duration': 0.7}, {'end': 477.711, 'text': 'So we created our color variables and our spacing variables.', 'start': 474.209, 'duration': 3.502}, {'end': 479.351, 'text': 'And now you might say that all right.', 'start': 477.851, 'duration': 1.5}, {'end': 482.012, 'text': "now it's time to apply them to our design, right?", 'start': 479.351, 'duration': 2.661}], 'summary': 'Setting variable values for a project: 4, 8, 12, 16, 20, 24.', 'duration': 44.242, 'max_score': 437.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM437770.jpg'}], 'start': 70.354, 'title': 'Creating and utilizing variables in figma', 'summary': 'Explains how to create color variables, assign values, and create different collections and types of variables in figma. it also demonstrates creating and grouping variables, including color and spacing variables for a design system.', 'chapters': [{'end': 224.186, 'start': 70.354, 'title': 'Creating variables in figma', 'summary': 'Explains how to create and utilize variables in figma, including creating color variables and assigning values to them, with the ability to create different collections and types of variables.', 'duration': 153.832, 'highlights': ['The chapter explains how to create and utilize variables in Figma The tutorial covers the process of creating and utilizing variables in Figma for design elements.', 'Creating color variables and assigning values to them The tutorial demonstrates the creation of color variables in Figma and how to assign specific values, such as hex color codes, to these variables.', 'Ability to create different collections and types of variables It is mentioned that users can create different collections of variables and four types of variables are available: color, number, string, and boolean.']}, {'end': 482.012, 'start': 224.386, 'title': 'Creating design variables and groups', 'summary': 'Demonstrates the process of creating and grouping variables for a design project, including creating color and spacing variables for a design system.', 'duration': 257.626, 'highlights': ['The chapter demonstrates the process of creating and grouping variables for a design project The speaker walks through the process of creating and grouping variables for a design project, demonstrating the steps involved in creating and organizing color and spacing variables.', 'Creating color variables for the design system The speaker creates color variables for the design system, including blue and gray subcategories, along with base colors such as white and black.', 'Creating spacing variables for a design system The speaker creates spacing variables for a design system, setting values based on a four-point grid system, demonstrating the process of creating and organizing these variables.']}], 'duration': 411.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM70354.jpg', 'highlights': ['The tutorial covers the process of creating and utilizing variables in Figma for design elements.', 'The tutorial demonstrates the creation of color variables in Figma and how to assign specific values, such as hex color codes, to these variables.', 'It is mentioned that users can create different collections of variables and four types of variables are available: color, number, string, and boolean.', 'The speaker walks through the process of creating and grouping variables for a design project, demonstrating the steps involved in creating and organizing color and spacing variables.', 'The speaker creates color variables for the design system, including blue and gray subcategories, along with base colors such as white and black.', 'The speaker creates spacing variables for a design system, setting values based on a four-point grid system, demonstrating the process of creating and organizing these variables.']}, {'end': 813.332, 'segs': [{'end': 551.132, 'src': 'embed', 'start': 526.952, 'weight': 0, 'content': [{'end': 537.141, 'text': 'A design token is a simple, reusable design decision that represents a design attribute or style, such as colors, spacing, text, etc.', 'start': 526.952, 'duration': 10.189}, {'end': 540.023, 'text': 'So let me show you how to create your design tokens now.', 'start': 537.381, 'duration': 2.642}, {'end': 542.806, 'text': 'Under this collection, we are going to create another variable.', 'start': 540.184, 'duration': 2.622}, {'end': 546.989, 'text': 'Again, a color variable, but this time we are going to name it differently.', 'start': 543.386, 'duration': 3.603}, {'end': 551.132, 'text': "Okay So here I'm going to type surface primary.", 'start': 547.309, 'duration': 3.823}], 'summary': "Creating design tokens for colors, including 'surface primary'.", 'duration': 24.18, 'max_score': 526.952, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM526952.jpg'}, {'end': 615.302, 'src': 'embed', 'start': 588.941, 'weight': 2, 'content': [{'end': 597.408, 'text': 'We have primitives, color blue, color gray, and base colors, okay? For the surface primary, I know that it should be white.', 'start': 588.941, 'duration': 8.467}, {'end': 602.632, 'text': 'So I can just link it to this color base white, just like this.', 'start': 597.948, 'duration': 4.684}, {'end': 609.898, 'text': 'And now this variable, this surface primary variable is tied to this variable that we already created.', 'start': 602.972, 'duration': 6.926}, {'end': 611.319, 'text': "And it's called an alias.", 'start': 610.058, 'duration': 1.261}, {'end': 615.302, 'text': 'When a variable references another variable, we call it an alias.', 'start': 611.519, 'duration': 3.783}], 'summary': 'Using color primitives, linking surface primary to white base color.', 'duration': 26.361, 'max_score': 588.941, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM588941.jpg'}, {'end': 754.31, 'src': 'embed', 'start': 729.214, 'weight': 4, 'content': [{'end': 737.422, 'text': 'Perfect What else do we need? Before we go ahead and apply these design tokens to our card, we need to create our spacing system as well.', 'start': 729.214, 'duration': 8.208}, {'end': 740.343, 'text': "So here I'm going to click on all variables.", 'start': 737.962, 'duration': 2.381}, {'end': 744.785, 'text': "I'm going to click on create variable and this time we need a number variable.", 'start': 740.984, 'duration': 3.801}, {'end': 747.607, 'text': "And here I'm going to name it spacing none.", 'start': 745.005, 'duration': 2.602}, {'end': 754.31, 'text': "And as for the value, I'm going to click on this little icon and from the library, I'm going to set it to zero.", 'start': 747.847, 'duration': 6.463}], 'summary': "Creating a spacing system with a number variable named 'spacing none' set to zero.", 'duration': 25.096, 'max_score': 729.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM729214.jpg'}, {'end': 821.56, 'src': 'embed', 'start': 790.579, 'weight': 3, 'content': [{'end': 793.201, 'text': 'The next one is going to be spacing large.', 'start': 790.579, 'duration': 2.622}, {'end': 796.403, 'text': "And it's going to be assigned to spacing 5.", 'start': 793.481, 'duration': 2.922}, {'end': 799.145, 'text': "Of course, you don't need to use these values linearly.", 'start': 796.403, 'duration': 2.742}, {'end': 800.945, 'text': 'You can just skip one value.', 'start': 799.425, 'duration': 1.52}, {'end': 805.188, 'text': 'For example, you can assign this spacing large to this particular variable.', 'start': 801.006, 'duration': 4.182}, {'end': 807.429, 'text': "But for this project, I'm just going to keep it as is.", 'start': 805.368, 'duration': 2.061}, {'end': 813.332, 'text': "I'm going to create one more variable and I'm going to name it spacing X large like that.", 'start': 807.549, 'duration': 5.783}, {'end': 816.014, 'text': "And let's assign it to number six.", 'start': 813.892, 'duration': 2.122}, {'end': 821.56, 'text': "Now let's select them all, group them, and just call it Spacing System.", 'start': 816.954, 'duration': 4.606}], 'summary': 'Creating a spacing system with values assigned, including 5 and 6.', 'duration': 30.981, 'max_score': 790.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM790579.jpg'}], 'start': 482.692, 'title': 'Creating design tokens and variable systems', 'summary': 'Covers the creation of design tokens and variables, demonstrating their use for design attributes like colors, and establishing a spacing system with size variables assigned specific numerical values, such as spacing xxs set to 1.', 'chapters': [{'end': 710.923, 'start': 482.692, 'title': 'Design tokens and variable creation', 'summary': 'Explains the creation of design tokens and variables, illustrating the process of linking variables to represent design attributes, such as colors, and highlighting the power of design tokens in enabling variable referencing and reusability.', 'duration': 228.231, 'highlights': ['Design Tokens Definition A design token is a simple, reusable design decision representing design attributes or styles, such as colors, spacing, and text.', 'Variable Referencing and Alias Creation The process of creating variables and linking them to reference other variables, showcasing the concept of alias creation for reusability and flexibility.', 'Variable Creation for Design Attributes The creation of color variables for design attributes like primary surface, button background, button label, text primary, and text secondary, emphasizing the flexibility and power of design tokens.']}, {'end': 813.332, 'start': 711.163, 'title': 'Design tokens and spacing system creation', 'summary': 'Discusses the creation of design tokens for a card, including color variables, and the establishment of a spacing system with various size variables assigned numerical values, such as spacing xxs set to 1.', 'duration': 102.169, 'highlights': ['The chapter discusses the creation of design tokens for a card, including color variables, and the establishment of a spacing system with various size variables assigned numerical values, such as spacing XXS set to 1.', 'Creation of design tokens involves grouping color variables for the card, with an emphasis on keeping the variables concise and relevant for the project.', 'Establishment of a spacing system entails creating number variables for different spacing sizes, such as spacing large assigned to a value of 5, offering flexibility in assigning non-linear values for specific variables.']}], 'duration': 330.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM482692.jpg', 'highlights': ['Variable Creation for Design Attributes The creation of color variables for design attributes like primary surface, button background, button label, text primary, and text secondary, emphasizing the flexibility and power of design tokens.', 'Design Tokens Definition A design token is a simple, reusable design decision representing design attributes or styles, such as colors, spacing, and text.', 'Variable Referencing and Alias Creation The process of creating variables and linking them to reference other variables, showcasing the concept of alias creation for reusability and flexibility.', 'Establishment of a spacing system entails creating number variables for different spacing sizes, such as spacing large assigned to a value of 5, offering flexibility in assigning non-linear values for specific variables.', 'The chapter discusses the creation of design tokens for a card, including color variables, and the establishment of a spacing system with various size variables assigned numerical values, such as spacing XXS set to 1.', 'Creation of design tokens involves grouping color variables for the card, with an emphasis on keeping the variables concise and relevant for the project.']}, {'end': 1270.692, 'segs': [{'end': 976.08, 'src': 'heatmap', 'start': 927.088, 'weight': 0.705, 'content': [{'end': 933.751, 'text': "I'm not going to use any tokens at the moment because we are going to create another set of tokens for the corner radius value.", 'start': 927.088, 'duration': 6.663}, {'end': 938.793, 'text': 'But what we can do is select this card and if we head over to the auto layout panel,', 'start': 933.911, 'duration': 4.882}, {'end': 946.381, 'text': "here we can click on this little icon and from here I'm going to head over to tokens and here you can find all the spacing tokens.", 'start': 938.793, 'duration': 7.588}, {'end': 953.97, 'text': "So as for the padding, I'm going to set it to spacing medium and this one should be set to spacing medium.", 'start': 946.662, 'duration': 7.308}, {'end': 960.993, 'text': "Now I'm going to select this content frame inside and we just need to open up this drop down menu and just click on apply variable.", 'start': 954.15, 'duration': 6.843}, {'end': 964.935, 'text': "And from here, I'm going to choose number three, this one.", 'start': 961.493, 'duration': 3.442}, {'end': 969.717, 'text': "Then I'm going to select this button and let's apply variables here as well.", 'start': 965.135, 'duration': 4.582}, {'end': 976.08, 'text': "I'm going to select number six and for this one should be number three.", 'start': 970.237, 'duration': 5.843}], 'summary': 'Setting padding to medium spacing, using variables 3 and 6.', 'duration': 48.992, 'max_score': 927.088, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM927088.jpg'}, {'end': 1094.383, 'src': 'embed', 'start': 1068.744, 'weight': 1, 'content': [{'end': 1077.428, 'text': 'So we linked all these properties, the field property, the auto layout padding property, and also the corner radius property to our design tokens.', 'start': 1068.744, 'duration': 8.684}, {'end': 1080.711, 'text': 'Now let me show you why we went through this boring process.', 'start': 1077.668, 'duration': 3.043}, {'end': 1084.414, 'text': 'Okay So imagine you want to change the color of this button.', 'start': 1080.891, 'duration': 3.523}, {'end': 1087.897, 'text': 'What you can do now is head over to your design tokens.', 'start': 1084.554, 'duration': 3.343}, {'end': 1094.383, 'text': 'And here, the only thing you need to change is the value of this particular variable button background primary.', 'start': 1088.198, 'duration': 6.185}], 'summary': 'Linked properties to design tokens, simplifying color changes.', 'duration': 25.639, 'max_score': 1068.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM1068744.jpg'}, {'end': 1174.452, 'src': 'embed', 'start': 1146.207, 'weight': 0, 'content': [{'end': 1150.151, 'text': 'and imagine you want to make changes to multiple different elements.', 'start': 1146.207, 'duration': 3.944}, {'end': 1152.754, 'text': 'you need to go ahead and modify them one by one.', 'start': 1150.151, 'duration': 2.603}, {'end': 1157.558, 'text': 'but when you use design tokens, you can easily change the value of your design tokens.', 'start': 1152.754, 'duration': 4.804}, {'end': 1165.827, 'text': 'for instance, if you want to change this label color, you can simply head over to this button label primary and just change it to something else.', 'start': 1157.558, 'duration': 8.269}, {'end': 1168.929, 'text': 'you can change it to black, for instance, if you want.', 'start': 1166.227, 'duration': 2.702}, {'end': 1171.45, 'text': "okay, i'm going to set it back to white.", 'start': 1168.929, 'duration': 2.521}, {'end': 1174.452, 'text': "but let's suppose you want to change your entire color palette.", 'start': 1171.45, 'duration': 3.002}], 'summary': 'Using design tokens allows for efficient and simultaneous modification of multiple elements, improving workflow and productivity.', 'duration': 28.245, 'max_score': 1146.207, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM1146207.jpg'}], 'start': 813.892, 'title': 'Design tokens and variables', 'summary': 'Discusses applying design tokens to elements like background colors, text colors, and spacing values, linking them to specific design token variables, and emphasizes the benefits of using design tokens over color styles for managing properties like corner radius and color palette, resulting in a coherent and easily modifiable design system.', 'chapters': [{'end': 996.184, 'start': 813.892, 'title': 'Design tokens application', 'summary': "Discusses the application of design tokens to elements like background colors, text colors, and spacing values, linking them to specific design token variables, such as 'surface primary' and 'spacing medium', resulting in a coherent design system.", 'duration': 182.292, 'highlights': ["Elements like background colors and text colors are linked to specific design token variables, such as 'surface primary' and 'text primary'.", "Spacing values are also linked to specific design token variables, such as 'spacing medium', ensuring consistent spacing throughout the design.", 'The process involves applying the design tokens to various elements, such as cards, text, and buttons, by selecting the elements and linking their properties to the corresponding design token variables.']}, {'end': 1270.692, 'start': 996.184, 'title': 'Design tokens and variables', 'summary': 'Discusses the creation and application of design tokens and variables, emphasizing the benefits of using design tokens over color styles for managing properties like corner radius and color palette, with the ability to easily modify values for consistent design across multiple elements.', 'duration': 274.508, 'highlights': ['Design tokens provide semantic names and ease of modification for consistent design across multiple elements, unlike color styles. Design tokens allow for semantic names and ease of modification, providing consistency across multiple elements.', 'Ability to modify values easily for consistent design across multiple elements using design tokens. Design tokens allow for easy modification of values, ensuring consistent design across multiple elements.', 'The process of creating variables and design tokens for properties like corner radius and color palette is highlighted. The process of creating variables and design tokens for properties such as corner radius and color palette is emphasized.']}], 'duration': 456.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM813892.jpg', 'highlights': ['Design tokens provide semantic names and ease of modification for consistent design across multiple elements, unlike color styles.', 'The process involves applying the design tokens to various elements, such as cards, text, and buttons, by selecting the elements and linking their properties to the corresponding design token variables.', "Spacing values are also linked to specific design token variables, such as 'spacing medium', ensuring consistent spacing throughout the design.", 'The process of creating variables and design tokens for properties like corner radius and color palette is highlighted.']}, {'end': 1575.631, 'segs': [{'end': 1295.461, 'src': 'embed', 'start': 1271.232, 'weight': 0, 'content': [{'end': 1280.075, 'text': "i'm going to head over to the tokens collection and from here i'm going to select this variable and, as you can see, this icon appears here.", 'start': 1271.232, 'duration': 8.843}, {'end': 1281.736, 'text': 'it says edit variable.', 'start': 1280.075, 'duration': 1.661}, {'end': 1287.658, 'text': 'if i just click on it, this window pops up and here we have a section called number scoping.', 'start': 1281.736, 'duration': 5.922}, {'end': 1295.461, 'text': 'it basically shows you all the properties that could be linked to this variable, this particular variable, and, as you can see now, it says corner,', 'start': 1287.658, 'duration': 7.803}], 'summary': 'Demonstrating variable selection and number scoping in tokens collection.', 'duration': 24.229, 'max_score': 1271.232, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM1271232.jpg'}, {'end': 1337.389, 'src': 'embed', 'start': 1309.395, 'weight': 1, 'content': [{'end': 1315.941, 'text': "i'm going to make sure that this one is checked and uncheck the others, and this one as well.", 'start': 1309.395, 'duration': 6.546}, {'end': 1325.366, 'text': "i'm going to check this one And now, if I select this frame and if I try to head over to my library, as you can see now, those values are gone.", 'start': 1315.941, 'duration': 9.425}, {'end': 1327.566, 'text': 'The same thing applies to color variables.', 'start': 1325.526, 'duration': 2.04}, {'end': 1337.389, 'text': 'So here, if I just select any of these color variables, like this one, you can see that you can apply it to frame, to shape, to text, to stroke.', 'start': 1327.846, 'duration': 9.543}], 'summary': 'Demonstrating checking and unchecking, selecting frames, and applying color variables.', 'duration': 27.994, 'max_score': 1309.395, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM1309395.jpg'}, {'end': 1375.761, 'src': 'embed', 'start': 1349.536, 'weight': 3, 'content': [{'end': 1353.558, 'text': "I'm going to show you how you can create different modes for your variable collections.", 'start': 1349.536, 'duration': 4.022}, {'end': 1360.223, 'text': "This feature is only available to paid users, so if you don't have a paid account, you cannot use that, unfortunately,", 'start': 1353.838, 'duration': 6.385}, {'end': 1366.507, 'text': "but it's good to learn that in case in the future, you want to use a paid account, you know how to create different modes.", 'start': 1360.223, 'duration': 6.284}, {'end': 1370.493, 'text': "So let's say we want to create a light mode and a dark mode for this card.", 'start': 1366.747, 'duration': 3.746}, {'end': 1373.077, 'text': "How can we do that? It's quite simple.", 'start': 1370.853, 'duration': 2.224}, {'end': 1375.761, 'text': "Here I'm going to head over to the tokens collection.", 'start': 1373.377, 'duration': 2.384}], 'summary': 'Paid users can create different modes for variable collections, such as light and dark modes.', 'duration': 26.225, 'max_score': 1349.536, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM1349536.jpg'}, {'end': 1536.161, 'src': 'embed', 'start': 1504.537, 'weight': 4, 'content': [{'end': 1509.821, 'text': "i'm going to change it back to light And you can just change it back to dark.", 'start': 1504.537, 'duration': 5.284}, {'end': 1513.104, 'text': "It's quite cool, isn't it? But I'm going to show you one more thing here.", 'start': 1510.181, 'duration': 2.923}, {'end': 1514.745, 'text': "I'm going to set it back to auto.", 'start': 1513.324, 'duration': 1.421}, {'end': 1519.109, 'text': 'And here, if I select this frame, one which is the parent of this card,', 'start': 1515.006, 'duration': 4.103}, {'end': 1523.653, 'text': 'I can change the mode of its parents and the mode of this card will be changed as well.', 'start': 1519.109, 'duration': 4.544}, {'end': 1525.255, 'text': "So I'm going to select this frame one.", 'start': 1523.793, 'duration': 1.462}, {'end': 1528.697, 'text': "And from here, I'm going to change it to dark.", 'start': 1525.875, 'duration': 2.822}, {'end': 1536.161, 'text': 'And now, as you can see, the mode of this frame one has been changed, but the elements inside are also affected.', 'start': 1529.037, 'duration': 7.124}], 'summary': 'Demonstrating changing modes of frames and cards, affecting elements inside.', 'duration': 31.624, 'max_score': 1504.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM1504537.jpg'}], 'start': 1271.232, 'title': 'Variable scoping and modes', 'summary': 'Explains editing variable scoping in tokens collection to remove unwanted values and creating different modes for variable collections in figma, enabling easy mode switching and color changes.', 'chapters': [{'end': 1327.566, 'start': 1271.232, 'title': 'Variable scoping in tokens collection', 'summary': 'Demonstrates how to edit variable scoping in the tokens collection to link properties, unchecking unnecessary checkboxes, and retaining desired variables, which results in the removal of unwanted values from the library.', 'duration': 56.334, 'highlights': ['The chapter explains the process of editing variable scoping in the tokens collection to link properties such as corner, radius, width, height, gap, and text content to a particular variable.', 'It details the importance of unchecking unnecessary checkboxes while ensuring the retention of desired variables, resulting in the removal of unwanted values from the library.', 'The chapter also highlights the application of the same process to color variables, ensuring the removal of unwanted values from the library.']}, {'end': 1575.631, 'start': 1327.846, 'title': 'Creating variable modes in figma', 'summary': 'Demonstrates how to create different modes for variable collections in figma, allowing users to easily switch between light and dark mode and apply color changes to elements within the design.', 'duration': 247.785, 'highlights': ['The feature to create different modes for variable collections in Figma is only available to paid users.', 'Users can create different modes, such as light and dark mode, for variable collections by adding columns and assigning new values to the variables.', 'Changing the mode of a parent frame in Figma affects the mode of its child elements, demonstrating the cascading effect of variable modes.']}], 'duration': 304.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM1271232.jpg', 'highlights': ['The chapter explains editing variable scoping in the tokens collection to link properties to a particular variable.', 'It details the importance of unchecking unnecessary checkboxes while retaining desired variables, resulting in the removal of unwanted values from the library.', 'The process is also applied to color variables, ensuring the removal of unwanted values from the library.', 'Users can create different modes, such as light and dark mode, for variable collections by adding columns and assigning new values to the variables.', 'Changing the mode of a parent frame in Figma affects the mode of its child elements, demonstrating the cascading effect of variable modes.', 'The feature to create different modes for variable collections in Figma is only available to paid users.']}, {'end': 1829.147, 'segs': [{'end': 1605.758, 'src': 'embed', 'start': 1575.911, 'weight': 3, 'content': [{'end': 1578.652, 'text': "i'm going to show you how you can localize your elements.", 'start': 1575.911, 'duration': 2.741}, {'end': 1582.833, 'text': 'okay, so, basically, what we need to do is create another collection.', 'start': 1578.652, 'duration': 4.181}, {'end': 1588.674, 'text': "here i'm going to go ahead and create another collection and i'm just going to rename it to text.", 'start': 1582.833, 'duration': 5.841}, {'end': 1591.134, 'text': "and here i'm going to create a string variable.", 'start': 1588.674, 'duration': 2.46}, {'end': 1595.075, 'text': "i'm going to name it product name and the value is going to be lemon.", 'start': 1591.134, 'duration': 3.941}, {'end': 1597.416, 'text': "so i'm just going to change it here to lemon.", 'start': 1595.075, 'duration': 2.341}, {'end': 1601.397, 'text': 'what else should be translated this label available in?', 'start': 1597.416, 'duration': 3.981}, {'end': 1605.758, 'text': "i'm just going to copy it, And here I'm going to create another string variable.", 'start': 1601.397, 'duration': 4.361}], 'summary': 'Demonstration on localizing elements by creating collection and string variables.', 'duration': 29.847, 'max_score': 1575.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM1575911.jpg'}, {'end': 1711.637, 'src': 'embed', 'start': 1666.744, 'weight': 0, 'content': [{'end': 1671.106, 'text': "and now let's go ahead and link these text layers to our variables.", 'start': 1666.744, 'duration': 4.362}, {'end': 1673.267, 'text': "okay, so i'm going to select the product name,", 'start': 1671.106, 'duration': 2.161}, {'end': 1681.71, 'text': "i'm going to head over to the text section and from here i'm going to click on this icon and under the text category i'm going to choose product name.", 'start': 1673.267, 'duration': 8.443}, {'end': 1683.751, 'text': "then i'm going to select this price tag.", 'start': 1681.71, 'duration': 2.041}, {'end': 1687.235, 'text': "Again, I'm gonna link it to price.", 'start': 1684.532, 'duration': 2.703}, {'end': 1689.918, 'text': "Then let's select this label.", 'start': 1688.036, 'duration': 1.882}, {'end': 1695.244, 'text': "That's why I created two different text layers because I wanted to show you this feature as well.", 'start': 1689.998, 'duration': 5.246}, {'end': 1698.548, 'text': "And I'm gonna link it to available in.", 'start': 1695.864, 'duration': 2.684}, {'end': 1705.833, 'text': "And finally, I'm going to select this button label and just link it to add to cart, just like that.", 'start': 1699.248, 'duration': 6.585}, {'end': 1707.694, 'text': "Now let's see how it works.", 'start': 1706.333, 'duration': 1.361}, {'end': 1711.637, 'text': "Here, I'm going to select the main frame, the parent frame.", 'start': 1708.254, 'duration': 3.383}], 'summary': 'Link text layers to variables for product name, price, label, available in, and button label in a design demo.', 'duration': 44.893, 'max_score': 1666.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM1666744.jpg'}, {'end': 1782.453, 'src': 'embed', 'start': 1758.482, 'weight': 1, 'content': [{'end': 1765.204, 'text': 'you can just run this plugin and it will automatically create variables for you based on your color styles.', 'start': 1758.482, 'duration': 6.722}, {'end': 1770.486, 'text': 'So it converts all your color styles to variables in seconds.', 'start': 1765.585, 'duration': 4.901}, {'end': 1777.689, 'text': "And that's amazing, isn't it? The other thing I'd like to point out here is that you can link a color style to a variable.", 'start': 1770.847, 'duration': 6.842}, {'end': 1779.33, 'text': 'How? Let me show you how.', 'start': 1778.049, 'duration': 1.281}, {'end': 1782.453, 'text': "i'm gonna quickly create a color style.", 'start': 1779.89, 'duration': 2.563}], 'summary': 'Plugin automates creation of variables from color styles, converting them in seconds.', 'duration': 23.971, 'max_score': 1758.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM1758482.jpg'}], 'start': 1575.911, 'title': 'Localization of elements, linking text layers to variables, and automating color styles', 'summary': 'Demonstrates localizing elements, linking text layers to variables, and automating color styles using a plugin. it includes creating string variables for product details, setting up language modes, linking text layers, and converting color styles to variables, facilitating efficient design processes.', 'chapters': [{'end': 1666.744, 'start': 1575.911, 'title': 'Localization of elements', 'summary': 'Demonstrates the process of localizing elements by creating a collection, adding string variables for product name, available in, price, and button label, creating english and german modes, and translating the values to german. a total of four string variables are created and two different modes for english and german are set up.', 'duration': 90.833, 'highlights': ['The chapter explains the process of localizing elements by creating a collection and adding string variables for product name, available in, price, and button label.', 'It demonstrates the creation of English and German modes for localization.', 'The speaker quickly copies and pastes the translated values for the German mode.', 'A total of four string variables are created for localization, including product name, available in, price, and button label.']}, {'end': 1735.241, 'start': 1666.744, 'title': 'Linking text layers to variables', 'summary': 'Demonstrates linking text layers to variables for product details and language options in a design, showcasing the process of linking text layers and changing language versions.', 'duration': 68.497, 'highlights': ['The chapter demonstrates linking text layers to variables for product details, such as product name and price tag, streamlining the process of updating product information.', 'It also showcases the process of linking text layers to language options, such as changing from English to German, providing a simple method for creating language variations in a design.', 'Additionally, the chapter highlights the ease of changing design elements, like switching to dark mode, demonstrating the flexibility of the design.']}, {'end': 1829.147, 'start': 1735.681, 'title': 'Automating color styles with variables', 'summary': 'Discusses how to automate the creation of variables for color styles using a plugin, converting all color styles to variables in seconds and linking color styles to variables, saving time and effort in design projects.', 'duration': 93.466, 'highlights': ['A plugin can automatically convert color styles to variables, saving time and effort in creating primitive variables.', 'It demonstrates how to link a color style to a variable, enabling the continued use of color styles while being linked to variables.', 'The video encourages viewers to like and subscribe for more design tutorials, promoting engagement and growth of the channel.']}], 'duration': 253.236, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fn4rP20U2UM/pics/fn4rP20U2UM1575911.jpg', 'highlights': ['The chapter demonstrates linking text layers to variables for product details, streamlining the process of updating product information.', 'A plugin can automatically convert color styles to variables, saving time and effort in creating primitive variables.', 'It showcases the process of linking text layers to language options, providing a simple method for creating language variations in a design.', 'The chapter explains the process of localizing elements by creating a collection and adding string variables for product name, available in, price, and button label.']}], 'highlights': ['Variables in Figma store raw values like hex color codes or text strings, fostering design tokens.', 'The tutorial covers the process of creating and utilizing variables in Figma for design elements.', 'The creation of color variables for design attributes like primary surface, button background, button label, text primary, and text secondary, emphasizing the flexibility and power of design tokens.', 'Design tokens provide semantic names and ease of modification for consistent design across multiple elements, unlike color styles.', 'The chapter explains editing variable scoping in the tokens collection to link properties to a particular variable.', 'The chapter demonstrates linking text layers to variables for product details, streamlining the process of updating product information.']}