Navigation via Variables

[random schooner]

Hey @radiant hearth ! So one thing with your proposal is that those will always be true statements

dogSpeaks is always equals to dogSpeaks

dogRepeats always the same as dogRepeats

a more correct way is to have a variable like: "state" then

if state == dogSpeaks
then set state to dogRepeats

if state == dogRepeats
set state = dogTilt

(assuming that the dog illustration is 3 different variants in a component set where the props are "Woof", "Woof woof", and "...")

other options you can try is to rename those props to for example 1, 2, 3

and then instead have the state as a number variable and have it either increase by 1 or decrease by 1 depending on which arrow the user is licking on

[radiant hearth]

Hello again Mai!
Thanks for your answer. For both options I would need components and create a lot of variants. So instead of doing that work I could go back to noodles and create frames (I wanted to get away from hardcoding and therefore a lot of different screens).

I think the limitations of the variables in figma are the problem. In any programming language you would create an array and call them I guess.

[random schooner]

hmm what do you mean by a lot of variants? wouldnt it be ust 3 dog variants?

in some ways, wouldnt having 3 variants of the dog with props 0,1,2 be basically an array with its indices?

and in that case the state basically being like an "i" that increases (or decreases)?

but i definitely agree that there are some limitations of variables and there can be a lot done to improve it and get it closer to coding in some sense when it comes to prototyping. But based on what i understand about your problem, I think it is doable - though I dont fully understand what you mean by lot of variants

[radiant hearth]

Regarding the variants: this is just a boiled down version to show what I want to achieve.
In my project there will be a speech bubble and a lot of different text aka lines that need to be shown. Therefore I wanted to load each line via variables in one frame and not create a lot of Frames each with one line.

[random schooner]

i see, i mean it might be a lot of variants, it can also depend on how you organize those variants. But it might be still easier to do it with eg numerical variable interactions

But i definitely get it

[random schooner]

it just somewhat reminded me of this too https://x.com/realvjy/status/1672932609930715142?s=20 in case if you also find it similar

vijay verma (@realvjy) on X

Okay @figma variables are very cool. With just one frame and a few different variables with smart components, I've created this dashboard for create and customize avatar 🤩. Variable list shared below.

Twitter · Jun 25, 2023, 11:39 AM

and this was made all by using variables

[radiant hearth]

Thanks. They use numbers Variables as I can see.

[random schooner]

yeah thats what i would suggest doing also. but ofc this takes some variants as mentioned above.

[radiant hearth]

True. They show briefly the components too.

[random schooner]

it really just depends on what you find easier. For me personally, i find it easier to do the variables and change them later on than the noodles if needed.

If you can give more background on how things will get complicated, I could maybe give you more advice.