Figma Variables & Advanced Prototyping - Crash Course

bit.ly/3CPOIaD 👈 Design like me. Use "UI2023" for 23% Off!
designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- Today, we're going to embark on a crash course where you'll learn Figma's new variables, modes, collections, and advanced prototyping with conditional logic. There's a lot to unpack here, so I made it as easy as possible to follow along.
Grab the follow along project here:
www.figma.com/community/file/...
0:00 - Intro
0:26 - Grab the file
0:50 - Project 1 - Like Button
5:52 - Project 2 - Cart
13:25 - Project 3 - Dark Mode Toggle
16:49 - Project 4 - Boolean Toggle
23:22 - Project 5 - Color Modes
Let's get started!
#figma #prototyping
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Who else thinks it's just a matter of time before Figma competes in the no code space? Ie webflow/framer

[@mrdomhare]

Exactly what came to mind watching .. Yes

[@judgementrizzy]

I've already seen someone make a playable Flappy Bird in Figma so, yeah, absolutely.

[@keish.studio]

They're already partnering with Framer so I wouldn't be surprised if they expanded on that partnership to compete more in that space.

[@nagaistark]

23:00 Just a quick tip: you do not necessarily have to choose a different transition mode. You just need to move the _Set Variable_ interaction up (so that it comes before animation).

[@chriscasey2353]

Quick tip: for the Purchase A License example it would have been better to make the Cost the cost of a seat $39 and then add a totalCost which would have bean seatCount * Cost. It's more future proof because if the seat cost changes, you only need to change one variable

[@frogman86]

Great video, very easy to follow. Along with this and other figma elements admittedly I've been feeling a little overwhelmed recently, content like this is a great help, subscribed

[@GGg-qr6vw]

I've been scared of this for months and your video fixed that in 30 minutes!🥳

[@kufreimoh3531]

Gary, you are talented ! Thank you for doing this. Watching your videos have always been instrumentsl to my design growth ❤💡

[@user-tx4lq9uh8m]

Thank you!!! This was one of the best tutorials I've seen of the new Figma features!

[@TamaraLaforest-o7v]

Omg thank you! i had a hard time trying to find how to do this :) super clear.

[@maasivetv]

Best crash course on Variables and Conditions I've found. Thanks! 👏

[@ogunsolajulius5424]

Thank you so much, Gary! This is incredible and now I understand how to work with variables and advanced prototyping. Thanks again.

[@shanomac]

Thanks for sharing! Wow - so nice to see and get an understanding of the new features.

[@EMMANUELKIPNGENO-si6me]

You deserve the very best, you have really improve my skill. Once again thank you.

[@raskarjr]

Truly enjoyed this tutorial. You made so many errors, I was laughing while learning it. Amazing work, thank you!

[@johanguams6619]

This video was PERFECT. Thanks a lot I've just discovered your channel and subscribing right NOW. :)

[@daferichards]

Thank you so much for the tutorial. I especially enjoyed and learned a lot from the mistakes you made while trying to teach. It helped me understand the process and also troubleshoot what steps I missed or didn't add while I tried to replicate. Thank you! ❤

[@DGFactsZone]

this is awesome stuff I found.. just loved this

[@cameaann]

Thank you for video! It is very useful!

[@hilla2661]

Great tutorial - thank you ever so much!

[@ehsantalebi8383]

great as always

[@creativelizzy.wonder]

Thank you soo soo very much. This made my day honestly. God bless you !

[@mikedunlapdesign]

Thanks Gary, very helpful.

[@atanumojumdar]

Thanks for this video 💜

[@bolkhayegakya]

22:15 I was laughing so hard in the room 🤣🤣🤣🤣🤣 Why are you in so hurry sir😅😅😅😅

[@chimdiBAM]

Figma is definitely going to become a no-code tool by next year

[@TechDesignHub]

my thought exactly

[@user-on8gh2yv6s]

After evaluating their new tool it might take more than that, there is more needed to be compared with protopie or framer, etc at this point is good for layout

[@idrisayinde1612]

Awesome Tutorial

[@clevermissfox]

On project four, the reason you couldn’t use smart animate was because of the order of the prototype triggers. Any trigger that deals with “change to” has to be last in the list If you’re using variables + smart animate

[@TwizzlyStick]

Super helpful, thanks!

[@Factsmachine92]

Ultimate thank you

[@AnitaPrasad12]

This is an awesome tutorial

[@michaelreddington9145]

Great video! Is there a way to publish these interactions with conditions and variables to a team library? When I use these components in my projects the interactions don't work

[@uxdworld]

Great video, thanks

[@SehrishMoujahid]

thanks learn a lot

[@guacamolen]

Thanks for putting this together! I found it very helpful. Quick question: In the case of the Boolean toggle, do you need to create a separate toggle component for each Boolean being applied? For example, if there were two avatars instead of one and I wanted one to be visible while the other is not, would I need to two separate components or can it be done with two instances of the same component?

[@Jiten_dave]

Awesome awesome stuff

[@indrequinn330]

Great video! 😊🙏 instantly helped to improve the prototype I'm working on 🥳 one thing I have a question about, in case there are multiple cases in the design where the like button would be used, is there a way to make each of them independent from each other without having to create a separate number variable and individual component to each use case? Now if I apply same component throughout all of the items, once the like button is clicked on one of them, the like count is increasing for all. Would really appreciate a tip on how to solve that 😊

[@Skr0mny]

Thanks!

[@hnquran1002]

Thank you

[@JMach4217]

For the Dark Mode Toggle section (or for color variables in general), is it possible to do a color FADE instead of an instant swap? I suppose I don't really understand why the color variable change wouldn't come with an option to set it to "smart animate" The specific use case for me is...I want to animate one of my color styles upon the click of a button. I can currently do that by doing a "set variant" action, but it is instantaneous. I couldn't find any other way to pull this off, as Figma doesn't allow you to tie the visibility of a fill layer to a Boolean within a color style.

[@traveller3534]

i learned more in thank you

[@BrunoAlves-uy3sl]

Amazing content. As a suggestion it would be great avoiding or removing quick flashes. It might be a bad thing for people with epilepsy.

[@tychiu6271]

Thank you very much ! My teacher sucks ! You saved my life

[@OneandonlyFranklyn]

Figma on some vibes!!!

[@KalvinPatel]

Man this is great! however I can't do the variable prototyping cuz I'm on the free Figma version lol!

[@unique_kannadiga]

Tq

[@dovas90]

gg figma, gg dude for making the video also.

[@vrealizer]

Hi, I was thinking while watching your KZbin videos, but I'm not sure if it's better to just study framer or write a program like jitter or learn pygma prototyping. Are there any more lectures or courses that combine components and prototyping? If there are several advanced lectures, I'd like to take them. I'm not very good at English, so I used a translator, so please understand. I want you to comment. Thank you for the great videos. I hope you're always happy.

[@jose_reyes1111]

What‘s the benefit of the Show avatar variables? Before doing the exercises I did my own version, I just create a component showing the avatar and checked box and a variant with an unchecked box and 0 opacity avatar, then connect both through a click animation and is basically the same with less steps.

[@RebeccaWalshh]

It was just a simplified way of showing show and hide layer functionality using variables. In this particular case, you probably wouldn't do it.

[@BarrettBiggers]

When will Adobe make figma standard in CC? WIll XD be merged into figma?

[@teresan4625]

Hello! Thanks for the video. I have a problem. When I select the Avatar layer and go to the little eye next to layers, it just turns the visibility on and off, there is no variables menu or anything. What am I doing wrong? Thanks

[@scarlydesigns]

Hey Teresa, he explained in the video in order to apply the boolean value that turns off and on the avatar, you need to go to the "Layer Panel" and "Right-click" on the eye icon that on the right of the layer to apply that boolean, hope that helps. :3

[@kwekudon76]

anyone get stuck at 11:50 ? I cant seem to drag the the first row under the conditional bit - it worked for him but not working for me

[@chantalaafjes4140]

Awesome course! I only run in to a problem when I work on the toggle to switch between light and dark mode. I followed all the steps in the tutorial but for some reason the background color will not change and stays the same blue color... What am I doing wrong?

[@yashshetty3208]

I faced this problem too. Turns out the issue was, I had selected the "toggle" element for adding an interaction, whereas you have to choose the entire frame with the words and toggle. That seemed to do the trick :)

[@innamashek2609]

@@yashshetty3208 I faced this problem too, thank you so much for the tip, it worked!!

[@iredeadekunle2707]

Very insightful, and easy to follow. In the second example, you didn't touch on how you connected the +1 variable to the overall cost ($39). I understand the +1 and -1 variables, but how did we connect +39 such that when we increase the number of items in the cart, it increases the cost? Can you provide some clarity please?

[@GiraLoid]

It's actually explained in the tutorial, it's just a matter of adding another $39 variant, you can watch the video again

[@ellycooke2634]

The shopping cart worked thank you. Did you use an auto layout set up to include the dollar sign?

[@gabyu]

yes it was. hoever the figures were text left aligned, in reality I would have aligned to the right :)

[@MeetRayka]

The tutorial that makes variables look as easy as stealing candy from a baby : )

[@KristianTheDesigner]

Great tutorial. i find the whole variables thing in figma to be quite overcomplicated. Lets say i would like a component that contains two versions of a card; unselected and selected. i have a button that is outside of this component, but i want said button to control what version is being showed based on click on or off. You would think you could set up the state of the card variants (unselected === false, selected === true) then set the button variable to set that boolean to true....and that is it. but no?

[@jayt3972]

Thanks for sharing. I was looking for a toggle to switch between light/dark variable modes, is that possbile at this point?

[@DesignCourse]

Nope. Not sure why. Hopefully soon.

[@jayt3972]

@DesignCourse Thanks! Yeah does not really make sense.

[@jacquelineasare5994]

I was too

[@MelinaBering1]

#3 toggle did not work for me. back ground color will not change Update: The smart animate setting doesn't allow it. I had to turn it back to instant. Seems like a bug Figma will need to fix, eventually

[@belabako8045]

Feature unavailable in the free version... in Protopie you could do these things years before and free...

[@skiphanson5020]

On the Boolean example, the eye icon does not show the boolean variables?

[@skiphanson5020]

Oh shoot "RIGHT" click...doh!

[@mintcat81]

Is there a way to make the color transition softer? like smart animate

[@anastasiakuzmina5632]

A good point. I had the same sense of slight mismatching in the toggle animation. Otherwise, very good stuff !

[@zubairrahman3679]

Dark mode toggle ain't working for me!? Why?

[@TommyGunner86]

a lot of this just feels like adding extra steps to simple interactions. like the avatar one, why cant you just have the avatar hidden in previous states. what benefits does having all these variables to do what we could do before.

[@Underhills]

Figma and prototyping is querky at best. It's also very unstable, always been. Take notice of what happens to any element with a hover event attached for instance, they change their position ever so slightly, resulting in the typical Figma "tremble" effect. Look @21:30 - both label and checkbox move on hover.

[@facuh3o]

That mostly happens in the new preview mode. If youre following this tutorial try launching the prototype in Present mode or simply expand the Preview window so the content inside has that extra margin and it should work without trembles

[@Underhills]

@@facuh3o Actually when viewing prototype in the old manner in the separate section that has a menu, the frames skips all the time. When clicking from frame to frame it skips hugely, impossible to keep the same coordinates. That goes for 100% and zoom. I've never seen a worse prototyping tool than Figma and I always miss XD for prototypes. I'm forced to use Figma due to the current project I'm in now. To me Figma is more for system based design, administrating design systems and collaborations. But prototyping and simulating user flows is a true nightmare.

[@josecassola]

Sadly, using variables in prototyping isn´t available for Figma free users

[@footballscoreupdate]

I’m using a free version of figma and I have access to the figma variable and even the mode

[@aadichester]

how?@@footballscoreupdate

[@samuelakigbogun7610]

Free users have access to Figma variables for 2023

[@aimhigh3701]

Sadly some people want everything for nothing.

[@ende9806]

@@footballscoreupdatenot for advanced variable

[@madnad9634]

aye...

[@alexbramwell1870]

I'm really on the fence with this. Devs have never needed this much fidelity on handover. To spend all this additional time visually hooking up variables/conditionals/loops & booleans etc seems like a waste when we already have the assets to develop? Time better spent by contributing to the repo unless the client has categorically stated they NEED a high-fi prototype 🤷‍♂

[@user-zr7ep7ce5f]

Очередные продавцы лопат

[@uimass]

how do I do the dislike too?

[@amrsharif8859]

To be honest with you, I hated figma and hated this whole field, and I no longer have any enthusiasm for learning new things in it. What we do in months, after what we learn, a tool appears that summarizes this in a minute. This is very frustrating. Add to that the ease of creating a design in the future, which will make the profession of designer a normal profession. From the designer, learn the code. God Almighty alone knows what this matter will lead to

[@user-cf5rk8fc2o]

If anyone else was getting a negative cost value - repeat the same steps that stop the #SeatCount. So: Add a conditional If #Cost != 0 Set Variable --> #Cost-39 Great tutorial thank you!

[@okarin2463]

Designers who have never had to deal with a minimum of programming be like: 💀🫠 We are not at ProtoPie levels, but it is a tremendous improvement 💪 Question 1: so advanced prototyping, in the case of the avatar, still does not work with the smart animate option? Question 2: I have always built component sets by also inserting Dark Mode via a Boolean property that allowed the component to be switched between light and dark. Now with variables you say there is no longer a need for this, or do these options have to be used in pairs?