Prototype with Variables in Figma

Build flexible design systems that can be customized to suit any and all use cases effectively. Harness the potential of variables and become proficient in utilizing Figma's groundbreaking new feature. In Figma, variables are dynamic elements that can change or hold multiple values. They store reusable information like colors and numbers usable across designs and prototypes. Variables are adaptable, enabling instant design changes for various scenarios. For example, toggling modes, language shif

ts, and adjusting sizes become effortless. So let's dig into this amazing new feature. A variable in Figma is a dynamic element that can change in value or encompass multiple values. These variables store reusable information like colors or numbers, which can be employed across various design attributes and prototypes. Unlike styles, variables possess a dynamic nature, allowing designs to adapt to different scenarios. They facilitate instant design modifications for diverse contexts. For example

, toggling between light and dark modes, altering languages for modal strings, or adjusting padding values for different device sizes can be accomplished seamlessly through variables. Variables can reference other variables, streamlining updates to design systems. This concept may be familiar to those with coding experience, though no coding knowledge is required. In this tutorial, we'll delve into the mechanics of variables and their utilization in representing design tokens. We'll also explore

their role in accommodating different modes and themes in design. With the introduction of a recent update featuring the addition of variables, this new feature is going to be super useful for designers like us. To follow along, make sure to access the design file linked in the description. Let's take the LifeTrip app design as an example. As you can see, the design incorporates different shades of purple and pink, with white labels creating a contrast. Consequently, what you see here will be g

enerated and incorporated into local variables. This concept is similar to the color style and design system, but offers greater speed and more powerful features. I've already prepared the color palette that we are about to integrate into the local variables for improved organization. Our first step is to create a variable for each color. Click anywhere on the canvas to access the local variables section in the right sidebar. This section covers variables specific to the current file. Click on t

he Open Variables button to access the Variables panel, and then select Create Variable to initiate our first variable. A drop-down menu will appear, offering four variable types, color for color fills, number pertaining to dimensions and auto layout properties, string for text layers and variant properties, Boolean for toggling layer visibility like layer visibility. We will discuss those variables in the upcoming course during the prototype section, so stay tuned. Let's begin with the color va

riables. Click on it and give the first color a name. Feel free to choose any names that help identify your color variables. In my case, I follow Apple's design system, but I also incorporate my own personal colors. This is because my design is more customized and I've included a custom color inspired by mid-journey. Additionally, you can find the Figma file "Apple iOS 17 UI Kit - Variables" in the community. This file can serve as inspiration for developing and labeling your variables properly.

Let's name the first color to gray. I'm going to copy this color code. In the subsequent column, input the variable's value or employ a custom color picker. Voila, our inaugural variable is now in place. For enhanced customization, hover over a variable's row and click the Settings icon. This provides options to describe variable usage, conceal it from publishing, and more. Let's proceed to create variables for the remaining colors. So repeat the same process, assign a name to the color, and pr

ovide a corresponding value for each color. Now Now let's add the brand color. Fantastic! Now let's organize these variables into distinct groups. Select the gray color variables by holding down Shift and clicking, then right-click and choose New Group with Selection. Double-click the group name in the sidebar to rename it to Color/Gray. Repeat the process for the other colors, creating a new group named Color/Brand. Notice how the use of forward slashes establishes a parent group structure, wit

h gray and brand groups nested within the color group. Alright, our color palette organization is now complete. To ensure efficient organization and retrieval, let's name our variable collection. Open the collection dropdown and select "Rename Collection." We'll go with primitives, reflecting these essential building blocks for the travel app. Semantic names like accent color or primary color express how an element should be used in designs. The variables within the primitives collection may lac

k such semantic names as they don't directly convey function or intent. This is because these variables won't be directly employed in designs. Instead, we'll establish a new collection of variables that reference the primitive assign them semantic names, and utilize them in designs. In the realm of software, this approach of defining values by referencing others is termed tokenization. It's widely adopted for maintaining design consistency. You'll see why in just a bit. Open the Collection dropd

own and select Create Collection. We'll call this Tokens. Next, let's establish variables to represent the required text colors according to their designated roles. roles, primary, secondary, brand, and invert. While the LifeTrip application employs semantic labels, 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 Primiti

ves collection. We'll go with color gray 6. Let's create a few more color variables for the remaining text functions. Next, we'll create color variables for surfaces, in particular background colors that align with functions similar to those used for text. We'll also create a color variable to be used for borders. Finally, let's group these new variables into the surface text and border categories respectively. Text, surface, and border. Alright, let's integrate variables from the tokens collect

ion into our design implementation. Observe the model associated with the passenger option. Let's select the button "Add" 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 are represented by circles. Locate the Surface Brand variable within the tokens collection and employ it to adorn the button. As for the frame's background color, target the highest level frame

and employ the surface primary variable. Additionally, we will address stroke properties in text layers, ensuring the appropriate colors are assigned to each of them. Within this collection, a handful of variables draw upon a common reference. Take for instance text primary, text brand, surface invert, and border primary. These variables find their definition in a shared color variable sourced from the primitives collection, Color Gray 6 to be precise. In the event that we modify the characteris

tics of Color Gray 6, the variables intertwined with it will naturally adjust accordingly. But what if we want to change just the border color? Using styles would have required us to painstakingly locate and manually select each layer containing a stroke in order to modify its color. This process is not only laborious but also susceptible to human errors, especially when dealing with designs spread across multiple files. On the other hand, by organizing styles in a semantic manner and subsequent

ly updating them to match the color palette, we would have been obligated to individually revise every occurrence of that specific color style. Unfortunately, styles lack the ability to reference other styles directly, as our approach involves variables pointing to other variables. Nevertheless, this approach allows us to redefine a key element such as "border primary" by adjusting the associated variable from the primitives collection. Consequently, any layer utilizing the border primary variab

le would automatically reflect the change, and this entire process took only a matter of seconds. This efficiency is a direct result of our practice of tokenizing variables. It is important to note that this does not imply that the use of style should be discarded altogether. 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 the design between light and dark modes, but the q

uestion Boolean remains, how can we achieve this? This is precisely where the concepts of modes and variables come in. Modes serve as a powerful tool to facilitate design adaptability across varying contexts. For example, string variables can be used for contacts like localizing language. Number can effectively address spatial adjustments required for diverse device dimensions and sizes. and variables, can toggle layer visibility to show a warning if a product is almost sold out. Let's go back t

o our tokens collection to set up light and dark modes using color variables. Click the plus button in the column header to initiate a new mode column. Figma duplicates colors from the initial mode column to the new one. The original column represents the dark mode. Rename this column to dark. The new column will represent the dark mode so name it "Light". Now choose different variables from our Primitives collection to define these modes. Select the frame and go to the layer section in the righ

t sidebar since the frame has layers with variables applied, the change variable mode button appears. Click it, explore tokens and choose light. The entire frame adapts to the dark mode values we've set. The auto option is particularly noteworthy. When set in object mode, it adapts to its parents mode. By dragging it between frames with different modes, the object aligns with the context. If the parent lacks a mode, the object defaults to the first mode within the variables collection. In this c

ase, it's the light mode. Following the successful implementation of color variables, let's apply a similar token-based approach to number variables for defining spacing and corner radius values. Open the Primitives collection which contains the basic elements of our design to define these values, as this segment is aligned with the color variables will go straight to the spacing and corner radius values. Spacing and radius variables have their own dedicated groups. Spacing variables adopt names

and values based on multiples of 8 in line with LifeTrip's 8-point grid system. Meanwhile, corner radius variables adopt t-shirt sizes, also with values in multiples of 8. With our primitives established, let's proceed to reference them from the tokens collection. Spacing tokens will use t-shirt sizing as names. For instance, spacing-none possesses a value of zero, while others refer back to spacing variables within the Primitives collection. Create radius tokens, such as radius_minimal, radius

_rounded, and radius_full. These variables will reference radius variables from the Primitives collection. Lastly, organize our fresh variables into two groups, spacing and radius. All right, it's time to use the new variables we've just created from our token collection in our design. Let's take this page as an example and apply the variables to the auto layout of these form buttons. To begin, select all the form layers by clicking and holding down the shift key while selecting the layers simul

taneously and hovering over the gap between field and the Auto Layout panel. Click the variable icon and choose spacing medium from the tokens collection. For horizontal padding choose the same spacing medium, then for vertical padding choose spacing small. Lastly, click the variable icon in the corner radius field and apply the radius rounded variable. Repeat this process for the rest of the design, applying the new number variables. But what if we want to modify spacing from Excel to a differe

nt value? Just as before, we can effortlessly choose an alternative value from the Primitives collection and any reference to spacing to Excel will update accordingly. We also have the option to incorporate a Brutalism aesthetic into our tokens collection. Currently, our design is set up both light and dark modes established, but it is conceivable to introduce additional modes if desired. However, for the scope of this course, this expansion is not necessary. The process remains consistent with

what we employed for implementing the light mode, entailing the careful allocation of distinct colors for each component. This is just the beginning of variables. If you want to learn more, check out the resources linked below. Alright friend, you've just completed the Mastering Variables in Figma course. You should now have a comprehensive understanding of how variables work and how to use them to improve your design workflow. Prototypes are interactive designs. They allow people to engage with

and experience how your designs will work in the real world. Imagine a prototype that can make calculations or perform actions based on conditional logic in just a few frames. Actually we don't need to imagine we can build it right here in Figma. Thanks to variable prototyping, a multitude of possibilities emerge through logical constructs. You can even create quick and fun games such as Flappy Bird and Tic Tac Toe using the set variable action with the on click trigger. You can create a realis

tic telephone keypad with real input and a realistic timer using a conditional action. You can create a switch to turn the light on or off using the boolean variable we use for the visibility layer and so on. This feature seems complicated, depending on what you want to build. Is it a simple prototype with a few functions, or a complex prototype with several logics? The important thing is to understand the functionality and the order of the logic. It's the same way as coding. In this video, you'

ll learn how to use variables to build advanced prototypes. Looking for a refresher on variables or guidance on getting started with prototyping? Check out related tutorials in the description below to make sure you've got your foundations covered. Who has access to this feature? The feature of using variables with prototypes is available for users on any paid plan. The number of variable modes accessible per collection may vary depending on the specific plan. Users with CANEDIT access to a file

are allowed to create prototypes. And users with CANVIEW or CANVIEW prototypes only access to a file can view prototypes. Variables are like little containers that hold important information about your design elements. Vigma has introduced two super cool prototyping actions called set variable and conditional. However, these actions are available only for folks on the paid plans. With the set variable action, we gain the power to change the value of any variable we have. For instance, let's con

sider a variable that represents the initial price of a hotel room on a booking page. This variable can be effortlessly updated with new values, whether they are specific numerical figures or derived from expressions and operations. Plus, we can even reference other variables to create our new values. Conditional action is a real game changer. It allows us to use if-else logic in our prototypes. This means we can set specific conditions or requirements before certain actions take place. To get h

ands-on experience, just grab a copy of the design file linked in the description and follow along with the magic. With variables, we can save a lot of time by avoiding creating a bunch of frames with multiple connection nodes everywhere. Instead, we'll have all the logic implemented inside the interaction detail. Let's take a look at the flight page. By selecting the passenger option, a modal window emerges, offering the opportunity to provide comprehensive information. This includes specifying

the count for both adults and children, facilitated by the intuitive stepper buttons, plus and minus. When engaging with the plus icon, the number increments by one, and when interacting with the minus icon, it decreases by 1. Furthermore, if the minus button is persistently clicked until the value reaches zero, the icon becomes inactive. The challenge now is, how can we infuse these elements with functional dynamism and the required logic? Let's begin with the easy simple interaction. Every ti

me a user clicks the plus button, we want to increase the number of passengers by 1. To begin, we need to add a local number variable to represent the number of available items. Local variables are variables created directly from the file. To choose collection to initiate the creation of a fresh variable collection. Next, ensure clear differentiation by renaming the application to "Life Trip", preventing any confusion with existing collections. Then select Create Variable to initiate our first v

ariable and select Number. Now, proceed to establish a numerical variable labeled Number of Adults. By default, our initial value is set to 2. Typically, in travel applications, the default adult passenger count remains fixed at 2. However, you retain the flexibility to choose any desired number. Let's duplicate it and include the count for children as well by selecting Shift Enter from your keyboard shortcut and rename it Number of Children. By default, establish the number of children as zero.

Before delving into the prototyping part, let's implement our variables for the passenger count. Select the text layer with the number two, then click the Apply Variable icon from the text section of the right sidebar. Select the Number of Adults variable to apply it to the text content. And you can see the variable listed at the bottom of the Text Properties section, highlighted in a gray pill. To unlink a variable, you can click on the Detach Variable icon or edit the text layer directly, sim

ilar to the process of applying a text style. Repeat for the children, so select the text layer 0 and apply variable, then select number of children. Notice that the text layer is now associated with the number of adults variable. For example, when I switch to a different value, the number will automatically adjust accordingly. Now that we've created and applied our variable, let's switch to the prototype tab and build our interaction. The trigger or what causes the interaction to start is click

ing the Add button. We've already built a component set for this button with an idle state, showing the button when a mouse hovers over it. The trigger will take place on the hover variant. You have the option to establish the interaction right from the component set itself, allowing you to create a hover state with a button click. Alternatively, if preferred, you can directly define the interaction within the design if you don't have any other interaction. To begin, we'll initiate the hover sta

te interaction within the component set. Start by selecting the initial variant, then drag the connection node to the second variant and set the trigger to on tap. And then select the smart animate option with a gentle transition effect, keeping the duration unchanged, which is 800 milliseconds by default. Next, proceed to drag the second variant back to the first one, utilizing the touch-up interaction this time while retaining the same transition setting. Let's see what it looks like before we

continue. Great! When I clicked, the button changed for a different effect. All right, let's copy the default variant directly from the component set using the Command + C shortcut. Then, select the plus button in the design, right click, and choose Paste to Replace. This action will replace the new component while maintaining its original position. Subsequently, we're going to add a new interaction to the second variant. When hovering over the button, it should transition to the hover state. T

his necessitates generating new interactions in this context. To initiate the process, select the hover button and set the interaction to on click. When clicked, we want the value of our variable to change. So select the set variable action, then select number of adults as the target variable. So from number of adults to the same variable, so select number of adults again on the right expression field. As you can see, variables and supported operators suggested as we start typing our expression.

These operators enable us to perform actions such as addition, subtraction, multiplication, or division on our numerical values. In this case, choose the addition operator followed by the number 1. Consequently, with each click on the plus button, the value will increment by 1. By utilizing the shift plus space shortcut, we have the capability to instantly view our prototypes within the canvas itself through an inline preview. This feature greatly enhances our ability to visualize and refine th

e prototypes simultaneously during the editing process. You possess the capability to adjust the frame to match the aspect ratio seamlessly. Additionally, you can restart the prototype directly from this point and you have the option to open it in presentation view on a spacious canvas. Alright, our subsequent task involves setting the variable for the minus button. This time, we'll reduce the value by 1. Follow the same procedure, but before we proceed, we need to introduce additional variance

into our component. Begin by selecting the default button within the component set. Click on the plus icon to add a new variant. Repeat this process for the hover variant as well. To prevent confusion, arrange them side by side. the symbol with a minus sign on the new variants. Remember to adjust the connection nodes appropriately. When duplicating from the original, the interaction remains the same. To rectify this, detach the connection node from the plus button and reconnect it to the appropr

iate minus buttons. Moving forward, let's proceed to appropriately rename the variants. Begin by selecting the component container. At this point, I've already established the state property. Now, let's introduce a new property by clicking on the plus icon located on the right sidebar within the Properties panel. And give a name to our new property, labeling it as "Type." Alright, let's proceed to rename the variants correctly. Begin by selecting the first variant. The state is already preset as

"Default" by default. For the type, rename it to "Add" or "Plus." Repeat this process for the remaining variants, ensuring each is appropriately named. When duplicating the variant, the interaction that we established with the variables remains unchanged. In this scenario, we simply need to reverse the process. Instead of adding by 1, we'll subtract by 1. Next, let's copy the default state of the minus button from the component set. Replace the existing design element by right-clicking and sele

cting "Paste to Replace". Alright, let's assess the inline preview using the Shift Space shortcut to see how it looks like. When clicking the plus button, the number increments by 1. Let's also verify if the number decreases by 1 when the minus button is clicked. Cool! Everything is working well. But what happens if I keep clicking on the minus button? You'll notice that the count for adults goes into negative numbers. To prevent this, let's add a conditional action. Conditionals are used to est

ablish criteria for actions. When a particular condition is met, a corresponding action can be triggered. On the other hand, if the condition is not met, it may be possible to designate the else action, or even opt for no action at all. Let's go back to our minus button interaction. Click the plus sign and this time opt for conditional to establish a new conditional rule. Our condition is "If the number of adults is greater than zero." For the If action, we want to use the same action we created

earlier. We can rewrite it, or we can drag and drop the Set variable action and place it as our conditional If action. Alright let's take a preview of the changes. What happens when I continue clicking the minus button? As observed, the number will eventually stabilize at zero. Next, let's create a new set of button components for the children count. For example, if we use the same button instance which is related to the adult count, the value will be the same. Is not what we want? In this case

, let's create the logic separately to not confuse them. Let's do the same thing for the children variables. I'm going to duplicate the components set and change the value for number of children instead. Click on the interaction details and replace number of adults with number of children, following the same procedure for subsequent interactions. To avoid confusion, ensure proper component naming. Rename the initial component set as button_adults and the second set as button_children. Next let's

replace the new component in the design. Alright let's preview this. Great! Everything is working well. Moving forward, it's time to establish the Boolean action. Boolean variables can only have a true or false value. We can use Boolean variables with properties that also have true and false values such as layer visibility or variant properties. Let's start with an example that uses Boolean variables with layer visibility. What if the age details appeared once when clicking on the plus button?

Our objective is to trigger the appearance of the age detail option when the plus button is clicked. This will provide you with the opportunity to specify the age of the passenger. The question now is, how can we achieve this? First, let's add a Boolean variable to our collection. Go to the local variable, initiate the creation of a new variable, and choose the Boolean Label it as "Child 1" and set the initial value as "False". This will keep it hidden until you engage the plus icon. Select the

"Child 1" age layer, navigate to the layer panel, right-click on the eye layer, and opt for the Boolean child 1 that we just created. As evident, when we designate the Boolean value as "False" by default, the "Child 1" layer is automatically hidden. employ the same procedure for the remaining layers. Select the plus button on the component set. Click on the plus icon to introduce a new interaction. Opt for the conditional option, then select the number of children variable and choose greater tha

n zero. Configure the action as set variable and designate child one inch as true. Consequently, when the count of children surpasses zero, the age layer will become visible, as the value we've set is now true. Now proceed to establish an additional three condition actions for the remaining age detail layers. Click the plus icon to add another conditional action on the interaction if the number of children is greater than 1. Then set the boolean child to variable to true. And so on. Let's previe

w our prototype again to confirm that now once we click the plus button by by 1, the layers appear with the respective value. In the upcoming steps, we aim to establish the opposite process for the minus button. We'll need to replicate the same procedure, but in a reversed manner. Now let's introduce an additional conditional action. If the number of children is less than 4, we will make the Boolean child 4 inches vanish by setting its value to false. Let's quickly review if my logic is working

well. Okay, cool, so let's continue for the rest of the Boolean variables. So voila, we just set all the conditional action in order. When you have multiple actions on a trigger, actions run in the order in which they're listed from top to bottom. So the order you place them in is important. However, it's crucial to note that altering the order of conditions can disrupt the intended functionality of the interaction. You also have the option to incorporate an additional Boolean to hide the minus

button once the count reaches zero, although this step is optional. The procedure is similar to the previous action. Begin by creating Boolean variables within the variables collection specific to this minus button. Set their values to true, as the default state should keep the minus button visible. Subsequently, apply these variables to your design. Then, configure your conditional action. If the number of passengers is less than zero, set the Boolean variable associated with the minus button t

o false. This will ensure the minus button is no longer displayed when the count is negative. Great! We were able to update multiple elements with a single click, all in the same frame. Congratulations! You have completed the Advanced Prototyping with New Features in Figma course. By now, you should be equipped with the knowledge and skills to create sophisticated and interactive prototypes using Figma's advanced features and the new Variables functionality. Hope you find this course useful, so

see you on the next video! [BLANK_AUDIO]