While a relatively new feature, variables are a powerful tool in Figma that can be used to store data and control the behavior of your prototypes. It lets you to create more complex, yet seamless interactions,, hence allowing you to create dynamic prototypes that can change their appearance or behavior based on user input.
In this blog post, we will discuss how to use local variables to create advanced prototypes with set variables, and conditional logic in Figma. We will also provide examples of how to use these features to create different types of prototypes.
In Figma, think of variables as little containers that hold special values that describe how your design looks or works. These values can be things like words, numbers, colors, or even yes/no choices.
Using these variables, you can make your designs come to life! Imagine you have a button, and you want to show different words on it depending on what the user picks. With Figma’s magic, you can do that! You can also change how big things are, how round the corners are, or even if something should be hidden or shown – all using these variables.
And guess what? You don’t need to be a coding wizard. You can do all this by playing with your design, like arranging pieces on a board. This helps you create cool examples of how your app or website will work, and it changes when you click around. Super cool, right?
In other words – Just like how programmers use variables that can change based on what’s happening in their code, Figma now has design variables. These design variables make it easier for teams to create and keep track of different brands, devices, and themes.
Figma variables also help with something called design tokens, which are like a single source of truth that designers and developers can use to make sure things like colors and sizes in their user interface always look the same.
| Pros | Cons |
| Variables can help you save time and effort by making it easy to update multiple elements in your prototype with a single change. | Variables can make your prototypes more complex, so it’s important to use them wisely. |
| They can also help you create more complex and realistic prototypes by allowing you to simulate real-world interactions. | If you’re not careful, variables can also make your prototypes slower and more difficult to debug. |
| Variables can be used to create conditional logic, which allows you to change the appearance or behavior of your prototype based on user input. | Switching between color styles and variable groups can be complicated. |
| They can also be used to create reusable design tokens, which can help you maintain consistency across your designs. | On this date the figma prototype with variable has a limited / basic functionality. |
You could use a variable to store the user’s preferred color, and then use conditional logic to change the color of an element to the user’s preferred color when they select it.
Expert tip: You can create multiple new variable modes for changing color or language depending on user input.
You could use a variable to store the user’s selected product, and then use conditional logic to navigate to a frame that shows more information about that product when the user clicks on it.
Expert tip: During user testing, the prototype will retain information regarding the items added to the cart and their quantities when the user selects the cart option from the product page.
You could use a variable to store the user’s cart total, and then use conditional logic to calculate the shipping cost based on the cart total.
Expert tip: Create your own formula on paper before adding it to the conditional or set variable logic. This will save tons of time.
You could use a variable to store the user’s progress through a tutorial, and then use conditional logic to hide a tutorial step when the user has completed that step.
Expert tip: To apply a boolean variable on the select component > layer section of the right sidebar > right-click the visible / hidden icon > Choose a variable from the picker. Boolean variables are noted with a toggle on or toggle off icon.
Design tokens are reusable values that can be used to maintain consistency across your designs. You can use variables to create design tokens, and then use conditional logic to change the values of the design tokens based on different conditions.
Expert tip: Figma set variable and conditional logic can be used to create dynamic and interactive prototypes for B2C e-commerce designs. For B2B applications at the moment figma has limited functionality.
In summary, advanced prototyping in Figma offers a powerful toolkit through variables, set variables, and conditional logic. Variables act as dynamic containers, altering design aspects without coding.
Set variables add interactivity by allowing changes based on user actions. Conditional logic takes it further, enabling designs to react intelligently to user choices. Figma empowers designers to craft immersive and engaging prototypes, showcasing not just visuals, but interactive narratives that resonate with users.
