5 steps for prototyping with variables in Figma

This week I finally opened enrollment for Figma Academy 2.0 🙌

One of the biggest challenges with the new curriculum was wrapping my head around variables... not just how to use them but when to use them.

It's taken a lot of work, but I'm officially at a point where I feel 10x more confident using variables 💪

Hopefully, these 5 steps make prototyping with them a bit less intimidating 👇

1) Create the variable you need

Start by asking yourself "What piece of UI do I want to change in my prototype?"

You'll need to create a variable for that 💡

Which type you choose depends on what you're trying to accomplish 👇

🔤 Are you updating text? ☞ Use string/number variables

🧱 Are you updating components? ☞ Use string/boolean variables

👀 Are you changing visibility? ☞ Use a boolean variables

🎨 Are you updating styling? ☞ Use color/number variables

For example, if you want to update the state of a card you might add a string variable called `CardState`, or if you're updating a completed task count you might create a number variable called `TasksCompleted`.

2) Define your DEFAULT value

Once you have your variable created, use that first column to define your DEFAULT value. This is what will show in your UI when you first open the prototype.

For `TasksCompleted` it will most likely be `0`.

But if you're using string variables to control your `CardState` then you'll have to write the name of your starting variant exactly as it appears (~1 min video with more info) 👀

3) Assign your variable to your UI

You're going to hear the word "bind" a lot... all that means is that you're assigning a variable to a piece of UI.

You'll always bind variables in the relevant section of the properties panel. Just look for the little variables icon 👀

So for your `CardState` that will be in the component properties, and the `TasksCompleted` will be in the text properties 👇

4) Test your connection

Before jumping into prototyping mode, I like to run a test to make sure things are behaving the way I expect.

Open up your local variables and make a change to the default value... Did it update your UI?

If yes, then you're ready for step 4 👇

5) Set up your triggers

This is where it starts to get fun 🤩

There's WAY too much for this post to cover it all. I have a whole module of videos in Figma Academy on this topic...

But I do want to leave you with one idea that hopefully simplifies this whole feature set for you 👇

Every variable-powered prototype you make will end with at least one `Set Variable` interaction.

That's ultimately the goal... to use variables to trigger a change in your UI by updating the variable you've assigned.

Here's the question you have to ask yourself though 👇

Do I have to first see if a separate condition is met before I can change this UI?

If no ☞ `Set variable`

If yes ☞ Add a `Conditional` first and THEN nest your `Set Variable`

💡 Thinking of `Conditional` as a wrapper for `Set Variable` was a huge unlock for me

Variables are great when used strategically but they can also add a lot of unnecessary complexity too! So don't feel like you should go add them to ALL of your prototypes...

Btw if you want a sneak peek of this full lesson reply to this email and let me know ✌️

Once you're ready to dive into the deep end of prototyping with variables and the rest of Figma's updates...

Claim your spot in Figma Academy 2.0

I even made a little video walkthrough if you want a glimpse into what the all-new training program looks like 👀

Hope to meet you in there!

If you want to go deeper on this topic you can also check out my free advanced prototyping crash course to get a sense for the quality of the curriculum :)