Advanced Prototyping with Figma Variables — Complete Guide
Do you still use the spider-web alike for your prototyping in Figma?
If does, well … it’s time for you to level up the game.
In Config 2023, Figma recently released the new feature called “Variables”.
I spent 56 hours for learning the basic prototyping with variables in Figma. I repeatedly watched the tutorial and implemented it on my own canvas.
It was fun, yet frustrating.
Without further ado, let me explain what I experienced.
Get to know the new feature
Basically there are 4 types Variables that I already posted on Twitter. Before we jump into prototyping, it’s important to know what feature inside it.
As you can see the image above, when we click the triggers, it will show:
On Click, On drag, While hovering, and so on. There are the interactions that will help you in prototyping.
Then, where and what’s the new feature you talked about before?
Obviously, we now can use the various actions, including applying the variables inside our prototyping.
When I explored and learned this, I haven’t discovered all of them. And apparently the “change to” action cannot be used because it only applies if the element is inside the component set (❖).
I will talk about that later, let’s learn this further!
Introducing expressions
Expressions are mathematical operations that involves the variable’s values or literal number (such as 0,1,5 etc.) which can be used to generate dynamic variables.
In this case, you can use expressions by clicking the “Set Variable” action, if the selected variable is either a number, string, or boolean type.
Therefore, there are 3 types of expressions: numerical, string, and boolean.
You can write this function directly inside the field — since it’s already supported the syntax rules to choose variables and operators.
What is operator? And what is value? Well …
- Operators → the function you are performing or evaluating (such as addition or subtraction)
- Values → the items that the operators are performing on or evaluating
Numerical Expression
The following operators can be used in prototyping, especially in numerical expression:
As stated earlier, it is like mathematical operation, there are operators you can use in prototyping section just like coding with operators.
I learned and acknowledged this before from JavaScript operators — It’d be fun if I explain the correlation between two of these later ✌🏻
String Expressions
I already recognized the string in programming, and it has the same meaning and function in Figma design.
It can be written by these value types:
- String literals → “item 2”, “5”, “John”
- Number literals → 0,1,5,10
- String and number variables
While in string literals we must put the value in quotations (“), and number literals can be added on to a string value.
Boolean Expressions
This reminds me of coding something in JavaScript to generate whether the value of my variable is True or False. In Figma it can be written by these values:
- Boolean literals
- Number literals
- String literals
- Boolean, string, and number variables
Remember that in this prototyping section, you use mathematical operation, and boolean expression operators that performed, such as:
- Parentheses
- Comparisons (==, !=, >,<)
- And
- Or
Introducing conditional logic
Conditional logic will allow you to define different outputs depending on the input you entered. Rather than duplicating the screens and interaction to the flow of your prototyping, you can use conditional logic.
By setting the action type “Conditional” it will automatically generate the “if/else”. This means “if” condition is met, then an action is executed. Otherwise, “Else” will execute another action.
As your prototypes begin to depth and complex, you can use multiple actions and conditionals to handle and create multiple or different outcomes in the same interaction.
- Multiple actions → Stack an unlimited number of actions on the same trigger.
- Conditionals → Check if a condition is met before performing an action by using “if/else” conditional statement.
How to write conditional statements
In “if” statement and boolean expression, you can use and assign one of and yet more the operators below in prototyping section:
📝Note: Numerical and string operators aren’t used to execute boolean expressions, but it can be used to support operators in complex expressions that will be discussed in this article.
Complex Expressions
Complex expressions are built by using multiple operators within a single expression in the parentheses. Besides you can use the basic math operations in this section too.
- Parentheses “()”
- Multiplication (*) and or Division (/)
- Addition (+) and or Subtraction (-)
Negate Numbers
When you want to set a negative number value in prototyping, try to subtract the number value from 0 and multiplying it with the variable.
For instance, you have a number variable name #numVar that has a positive value. To get the negative number as I stated earlier, you can use this expression in prototyping section: (0 - 1) * #numVar.
Negate Boolean values
While in boolean, the value flipping its logical state.
As a result, negating a True boolean value would make it “false”, and so do the negating False boolean value would make it “true”.
Just like mathematical logic, the negation — it kind of reminds me of how complicated and fun to learn this math in high school.
To get the negate boolean, you can use this expression: boolVar != true
So far, I haven’t tried to use negate boolean and negate number in prototyping — but it’s so refreshing to review this as I code with JavaScript.
Introducing Variables Modes
Last but not least in prototyping, apparently you can use modes too!
Modes → A group of values for the same variable. It allows you to implement alternative values or tokens between different contexts.
Further in this case, it will make you easier to use in prototyping by customizing it. There are a few ways you can use modes to enhance the prototyping experience:
- Set mode values based on context: use multiple modes to customize the variable values without creating new interactions or edit it.
- Use modes in expressions: use the value of different modes to build interactions and perform calculations.
📝Note: Modes help to reduce the number of variables in prototyping setup. You can still customize interaction logic by just switching modes across a ton of different variables in your Figma file.
Therefore these are what I learned, read, summarized for Advanced Prototyping with Figma’s new feature in 2023.
Next, the learning documentation about how and what I learned after spending 56 hours using prototyping with variables and its characteristics in the real design. Thank you for reading!
Sources:
- Use expressions in prototypes
- Advanced Prototyping
- Office hours: Advanced Prototyping
- Advanced prototyping playground
- Multiple actions and conditionals
After reading this:
1 — Subscribe to this newsletter if you find out useful.
2 — Share this to your social media or friends. This newsletter update 2–4 articles once a month.
3 — Support or Like this article! It will help me to grow if my article is useful and interesting enough for you to read more about this kind of one again.
Continue Reading
Older post: Figma Variables: Complete Guideline and Learning Documentation
