Hello friends, and welcome to today's episode called variants
or variables with modes.
Which one do I use?
Help please.
Now, um, this is way more complicated than even I thought it was.
So I wanted to break this down for you all.
And this is going to be a little bit longer of a video.
so I've also broken it into sections so you can pop to
whatever is most helpful for you.
We're going to talk about what is first of all, the difference between
a variant and a variable with a mode.
Then we're going to break down which one do I use, the simple answer, which
will work maybe 80 percent of the time.
Then we're going to break down, which one do I use, the complex answer.
And then we're going to go through a couple examples.
So let's get into it.
Okay.
Part one, let's start out with what is even the difference
of a variant and a variable.
So a variant is a variation of a single component.
If we create these as variants, we would go up to our top nav.
Create a component set, and if I were to drag one of these out now,
I have variations of this component.
I can click on these different variations here and switch between
each of the different types.
Now a variable Is a reusable value that can be applied to all kinds of design
properties and prototyping actions.
And our variables are going to be right over here on our right hand side.
And specifically today, we're talking about variables with modes, because this
is where the confusion gets of, do I create modes or do I create variants?
So variables with modes, you're going to create your modes right
in here within our variables.
And this is allowing us to have different modes of each of these variables here.
And these are going to be applied to.
Any of our design properties versus over here with our variants,
we're creating multiple different variations of a component.
okay, so that's the difference of the two.
Part two, when do I create each one?
So originally, I made this little flowchart, and I thought it was
going to be very simple, and I was like, great, this is dope.
It's a lot more complicated than this.
This flowchart is going to work majority of the time, so let's break this down.
You're asking yourself the question, Should I use variants or variables?
And then you need to ask yourself another question.
So all these pink stickies are the question you need to ask
yourself to get the answer.
Does the change apply to the entire frame or only to a particular component?
If it applies only to a component, we're going to use variants.
And if it applies to the entire frame, we're going to use variables and modes.
Now, if only everything was that straightforward, but
alas, it's product design.
So there's edge cases and we got plenty, we got plenty edge cases here.
So again, 80 percent of the time, this logic will probably work.
If the change is being applied to the component, use a variant.
If the change is being applied to the entire frame, use a variable.
Let's break down part three of what are those edge cases.
Okay, so again, we're starting with the same question.
Should I use variants or variables?
And we're asking the same question again.
Does the change apply to the entire frame or a particular component?
If it's a component only, use
variants.
But wait.
Are you prototyping with logic?
This is the next question we need to ask ourselves.
If no, great.
Stick with variants.
If yes, then maybe use variables with modes.
But also, you may have already set up your variants, and that's okay because you
can apply variables on top of variants.
And we'll get into that with the examples.
Now, the other side.
If the change applies to the entire frame, then one more
question we have to ask ourselves.
Is the change a big visual difference or is it a change in color,
size, text string, or boolean?
And these four things basically I'm asking.
Is it a big visual difference, or is it a change that we have a variable for?
Because right now, September 12th of 2023, these are the options.
Color, size, test string, and boolean.
These are what we have for options for variables.
Now, if you're watching this in the future, hello future
selves, how's everything going?
if you're watching this in the future, We probably likely have
more options for variables.
We know that images are coming eventually, so this might change.
But right now, as of September 2023, we have to ask ourselves, basically,
can you apply a variable to it?
If it's a big visual change that is outside of variables, and we'll
go over some examples too, then we're going to use a variant still.
And if it is something that we can apply a variable to, so color, text,
string, size, or boolean right now.
We're very close to the answer.
We're leaning towards variables with modes, but one more question we have
to ask ourselves, are you going to set everything on the frame to be a
mode or just this one particular item?
So again, remember that we had said, this is the line of this
change applies to the entire frame.
So maybe it's something that applies to a mobile mode and a desktop mode.
Everything on that frame is going to be a mobile mode.
And everything is going to be a desktop mode.
And you've created modes for all of those things on the frame.
If you have created modes for everything on that frame, great use
variables and modes, but if you've only created modes for one thing
on that frame, maybe it's a header.
of that frame, and everything else on the frame doesn't have a mode.
You could use variables, but variants is probably going to
be an easier way to go here.
You could also, if you're really unsure at this point, my suggestion
would be, check in with your developers, see how they're doing it.
Check in with your designers, see how they prefer it.
So this is more of a conversation that we want to have over here.
Ok, now,, this is still, this is quite confusing just to go over
on its own, so let's go to part four, let's go over some examples.
Ok, so for our examples, we're basically going to look at those pink stickies, the
questions that we need to ask ourselves to figure out what it is, starting with,
does the change apply to the entire frame or only to a particular component?
So, let's look at something like a button state here.
We're trying to determine if we want to do variants here or variables.
And we're looking specifically again at the state of here.
So let's pop back the UI.
We're looking at our default hovered, focused and disabled state now, since it's
specific to the state of the component, nothing else on the entire frame on
the entire screen that we're looking at when this button is in hover state
is also going to be in a hover state.
It's very, very unlikely that when you want to be on the hover state of your
button, you also want to be on a hover state of say your nav bar or a card
or anything else on the screen, which therefore is telling me it's really
just component specific, which then is telling me, okay, use a variant here.
You can also kind of see how I would break it down if I did do it as a
variable and why this doesn't really make sense because I would have to have
modes for each of these states here.
And now I'm kind of asking myself, okay, what would the next row even be?
Mmm, there probably wouldn't be another row here.
And if you can only get one row in with your variables, The chances
are that it shouldn't be a variable.
Now, again, like we said, always exceptions to the rule.
Maybe with prototyping, you do only have one row, and again, we'll talk
about prototyping stuff in a minute.
But here, if I can only get one row in, there's nothing else that would be always
in the hover state, or always in the default state, or always in the focus
state at the same time as this button.
So therefore, it doesn't really make sense to do this as a variable.
Now, just to make things a tiny bit more complicated, the colors that are applied
to these states, those can be a variable.
So let's take a look at our variables over here.
Here we have, we've created our light and dark mode.
It's the light and dark mode that we're using for modes, not the default,
hovered, focused, disabled, etc.
These are not our modes.
These are just kind of colors that we want versus the modes specifically that
we're looking at are light and dark.
And this makes a lot of sense to put these as modes because we want to easily
be able to change between light and dark.
And we don't just have to have our states here.
We can have things like we have text colors here, any other
colors that are within the screen.
On that entire frame, everything on the frame is going to change
from light mode to dark mode.
So therefore, it makes a lot of sense to have variables here.
Okay, let's look at our second question on this left side here.
Are you prototyping with Logic?
We've determined we want to use variants.
Now we have to ask, are we prototyping with Logic?
So let's take a look right here at these product cards.
so we have these product cards and the difference between the cards
is the item that's on the card.
Watermelon, cherries, pears, radishes.
And we've already determined that this is probably going to be a variant
because the modes that we would apply to these are the modes of the item.
So watermelon, cherries, etc.
And not everything on my entire frame needs to be in
watermelon mode or cherry mode.
So, on their own, if we're just using these cards without prototyping,
variants makes sense here.
But, if we do want to add prototyping, and specifically we want to add
logic, so something like, when I click on the plus here, I want this
number of watermelons to go up.
And I want to be able to know how many watermelons are in my cart.
And I want to be able to add another card to my basket that says
how many watermelons are there.
That is all logic that we're applying with prototyping and
therefore we do need variables.
So we're switching our answer here now from variants to variables.
Now this can get tricky because not everything right now is
supported with variables.
So for example, right now, again, like I said, in the future, hopefully
you're watching this in the future and you're like, Lauren, this is wrong.
We can support images.
Yes, great day.
Um, but right now, September 20 23, images are not supported.
So, maybe you have to create your variants of your images so that you can
swap the images out, or just manually swapping it out on the image down here.
So you can do it that way and still have just one variable for all of your
items here and just change out manually what isn't available with variables.
Or you can still create the variants here and then apply variables on top of it.
So you can see, right over here, we have applied variables
on top of these variants.
And that's okay, it works perfectly fine.
so the question to ask yourself is if you're starting this out and
you know, your main intention is to prototype using logic, then maybe
do it as a variable to begin with.
If you start this out and you don't know if you're going to prototype or you're
not really sure that's not your main intention, then it makes sense to do these
as variants and then apply the variables on top of them once you decide you do
want to do the prototyping with logic.
Okay, let's look at the other side of our chart where we're
leaning more towards variables.
So we've determined the change is applied at the entire frame level.
And then we have to ask ourselves, is the change a big visual difference?
Or is it a difference in color, size, text string, or booleans?
Basically, is it a difference that a variable supports?
Let's look at something like this.
So we have two groupings of cards.
Here we have our mobile and our desktop.
And here we also have our mobile and our desktop.
Now the ones on the left, these are kind of small visual changes.
It's more about change in size.
So we're going from a smaller to a larger card here.
And more about a change in hiding or showing something.
So this description down here, we're hiding this description
when we go into a mobile mode.
Because these changes are smaller And it's just size, which we know is
supported in variables, and basically a boolean, hiding or showing, which
we know is supported in variables.
These we can definitely do with variables.
But if we look at something over here, even though it's a mobile and a
desktop card, which is being applied at the whole frame level, so your
frame would be mobile versus desktop, it is applied at the frame level, but
these are very different looking cards.
So we have an image on the left, versus the top here, we have totally different
buttons here for adding to cart versus just one large button over here.
We might be able to figure this out with booleans.
We might be able to figure out with auto layout wrap.
I'm not even sure here.
Um, there's a possibility, it would be a lot of extra work though.
And some things, honestly, we might not even be able to do.
and because things are changing with the image and location, it would
be a lot to set up here and maybe not even possible with variables.
So even though it is something that could be applied at the frame level
again, it's mobile versus desktop.
Here we're going to go with variants.
It's because it's such a different visual change.
Okay, last one.
We are on the maybe variables side and we've gotten down
to, it's not a huge change.
It's something that is possible with variables.
And then we have to ask ourselves, are you going to set everything on the frame to
be this mode or just one particular item?
So let's go to this example.
Here we're looking at two different groupings We have our mobile and
desktop, and then we also have our mobile and desktop, but you can see the
changes visually are very different.
On our left one here, everything on the entire screen has
a variable applied to it.
we can easily swap between desktop and mobile.
And everything will change how it's supposed to be.
But on this screen, for example, there's a lot of differences going on here.
We already talked about how the card makes more sense as a variant because
it's such a visual change here.
There's information on this left side of the screen that's not
going to be present on mobile.
There's a lot of stuff on this screen that just probably won't be present on
mobile or would look totally different.
Which is making me say, even though this top navigation bar, even though this nav
bar here does have a variable applied because it can easily swap between
these two as variables using booleans, because we can hide the hamburger
menu, we can hide the card icon, and we can show the nav items over here.
This is going to be the only thing that's created with variables on this screen.
And because of that, we're not going to be able to easily swap between
the two screens like we could over here by just changing the mode.
Since not everything is set to a desktop or mobile mode on these screens.
So in this case, if it's the only thing that's going to be set as a
variable, does it really make sense?
This is where you want to start to talk to your developers and say, okay,
are you creating this component as just one, or do you have it as two?
If it's just one, then maybe it makes sense for you to create it as a variable.
So you have it as just one component in your library.
But, if your designers would prefer to see both of them out instead
of having to change the mode to see the desktop version, if they'd
like to see both of them out,
which, with variants, you'd be able to see the desktop and the mobile
at one time, because over here we showed you'll see all the options and
then be able to change from there.
If that's the case, then maybe variants does make sense here.
So, my answer would be, I'd make this a variant, but At this point, totally your
call, makes most sense for your team.
Okay, that's a lot.
I think we made it through the flowchart.
Lots going on here.
Basically, TLDR is there's an easy ish answer sometimes.
And that is going back to our flowchart over here of figuring out if the change
that you're making is going to be applied to the component or the whole frame, but
also there's many exceptions to the rule.
So hopefully that's helpful.
If you made it through this whole video, thank you.
You deserve a snack for staying here the whole time.
Go get yourself a snack.
See you later.
Bye.