Skip to main content
Question

Connecting 2 sets of variants using variables or conditions?

  • April 16, 2024
  • 2 replies
  • 514 views

How do I connect 1 component/variants to interact with another component/variant? I’ve tried using variables and conditions in prototype and have searched online, but haven’t found what I’m looking for.

I connected screenshots and a quick recording of what I would like to do.

Screenshot 2024-04-16 at 3.19.49 PM

Screenshot 2024-04-16 at 3.19.54 PM

I created variants for "10 AM’ to change when ‘hovering’ and ‘clicked’
I also created a variant for “check seats”

How do I create an interaction or variable/condition or whatever I need to do so that “check seats” which remains disabled, becomes enabled when “10 AM” or another time is selected?

Thanks!

2 replies

  • Figmate
  • 1763 replies
  • April 18, 2024

Hi @Michael_Taylor, Thank you for reaching out about your prototype. The screenshots and recording you’ve provided are fantastic - I can already tell your project is going to be amazing when it’s finished!

One suggestion that comes to mind is to create and apply variables to your design. Then, you could use the ‘Set variable’ action to change the color of the target variable.

You might already try using variable but if you’d like to learn more about this, I recommend checking out this YouTube Figma tutorial here: Prototype with variables Create an onboarding flow

Here are a few other resources that might be helpful:

Also, I came across this sample file in our community that might inspire you:

Feel free to explore on your own!

I hope this information is helpful! If I’ve missed anything, please let us know.
And remember, our community is filled with experts who may have even more insights or suggestions for your design. We’d love for you to join the conversation!

Thanks,


Thanks! I will definitely check these resources out.
I tried creating set variables, but there is something I’m missing. I’ll refer to these resources and see how it goes.

Thanks again!


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings