Skip to main content
Solved

Using number variables to control the state of other components? Is it possible?

K

Hi all! I wanted to know if the creation of a particular conditional flow would be possible using the new variables feature and conditional expressions. The flow can be phrased as a bit of a pseudo code ‘else if’ statement. (my js is terrible btw)

if the number of selected pills >= 3 ==>The other unselected pills in the group of pills should turn to a disable state elsethe user can continue to select pills.

The idea is that the user can tap on any three pills and it changes the state of the unselected pills to indicated that they have selected the max number of pills.

Hoping the images shared below can paint a clearer picture. I do not know if this is possible since component props cannot be linked in variable values? I think?? It feels like it should be doable but I’m just missing something.

Screenshot 2023-06-27 at 12.52.26 AM

Best answer by Haroll

Hi @Matti
On this screen you will find all the properties of my component + the variable attached to the instance I used for the prototype and then all the variables
variables

This one will show you the On Click interaction between the different variables of the components Pill

interactions

Regarding what you are building, it’s almost the same, when you click on

  • a small card: you need to trigger a “On click” interaction, and set a boolean variable to true (or false, depending of your card’s property definition).
  • a full screen card: you also need to trigger a “On click” interaction, and set back the boolean variable to its default value.

then on all your card instance you have to bind the aforementioned boolean variable to the property of the card that defined its disabled state.

View original
This topic has been closed for replies.

12 replies

Haroll
  • Haroll
  • Active Member
  • 273 replies
  • June 29, 2023

Hi @Kashish_Naidu1

This is doable

You need at least two variables :

  1. tags selected number : it will count the number of tag selected
  2. disable tags : it will toggle every tag in a disabled state whenever your tags selected number reach the maximum tags allowed (3 in your case)

Tag component need to have a boolean property in order to toggle itself between available and disable state.

image

You need to bind the variable disable tags to the boolean property of your Tag component instances (as shown above) and then you’ll be able to change all of their status at the same time.
To do so, add to the component interaction On click a condition to check if the total number of selected tag as reach its maximum. Then set your variable disable tags to true if it reach the max and false otherwise.

Hope it helps

tank666
  • tank666
  • 4873 replies
  • June 29, 2023

Could you record video in Presentation mode? It seems to me that your solution does not match the author’s question. Note that the example uses 3 states (disabled, not selected, selected).

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Haroll
  • Haroll
  • Active Member
  • 273 replies
  • June 30, 2023

I’ll do you one better, here is the link of the prototype Figma prototype : tag list item disabling

Note that the example uses 3 states (disabled, not selected, selected).

I cut the selected state of my component part out on my screenshot, to focus on the main thing, because it looks like they got this part figured out.

image

Theo_Sandstrom
tank666
Matti
3 people like this
  • Theo_Sandstrom
    Theo_Sandstrom
  • tank666
    tank666
  • Matti
    Matti
tank666
  • tank666
  • 4873 replies
  • June 30, 2023

Oh, great catch. Thanks for sharing. I originally thought about creating as many variable modes as there are instances. And you made it much easier by using 4 variants.

UX/UI designer. Figma expert. Creator and developer of plugins and widgets for Figma and FigJam. Check out my resources in Figma Community: figma.com/@tank666
Haroll
1 person likes this
  • Haroll
    Haroll
Matti
  • Matti
  • 1 reply
  • July 3, 2023

Hi, I was following this post as I’m trying to build something similar, so thanks for sharing this! I didn’t quite get it though, could you share a screenshot of your interactions and the variables, that would be great!

For context, this is what I’m trying to build:
A card component that has a small variant and a full-screen one.

So if I have a scrollable feed of distinct cards of the small variant and click on of them I want that one to change to full screen and all of the others to disappear (or to also change to full screen but align in a vertical feed in the same order as they were)

Haroll
  • Haroll
  • Active Member
  • 273 replies
  • Answer
  • July 3, 2023

Hi @Matti
On this screen you will find all the properties of my component + the variable attached to the instance I used for the prototype and then all the variables
variables

This one will show you the On Click interaction between the different variables of the components Pill

interactions

Regarding what you are building, it’s almost the same, when you click on

  • a small card: you need to trigger a “On click” interaction, and set a boolean variable to true (or false, depending of your card’s property definition).
  • a full screen card: you also need to trigger a “On click” interaction, and set back the boolean variable to its default value.

then on all your card instance you have to bind the aforementioned boolean variable to the property of the card that defined its disabled state.

Alexandre_Pinhas
K
2 people like this
  • Alexandre_Pinhas
    Alexandre_Pinhas
  • K
    Kashish_Naidu1
M

Hi @Haroll

Thank you for sharing your workflow! Is it possible to build a radio button menu using a similar approach? I am trying to build it inspired by your workflow, with the difference that the button has the additional hover state along with the default and the selected.

Haroll
  • Haroll
  • Active Member
  • 273 replies
  • July 4, 2023

Hi @Marius_Calude,

I’m assuming that you want a list of radio button and when on is checked, all the others become unchecked?
In that case, yes it’s quiet the same things : the boolean variable must be applied to the property of your component triggering its state change (in this case the check status)
As for the hover state it shouldn’t be a problem, it just some extra-step to account for the hover state :

  • add a “while hovering” trigger on the component’s default state
  • add the “on click” trigger on the hover state
M

Thank you @Haroll for your quick reply. Here’s what I have set up on the hover state on click trigger:

image

image
My issue is that once I select a button it remains selected so I get similar functionality as in your example. I don’t know what I am missing to have only one button selected at a time.

K

Wow, i just checked back in this thread after a while. Can’t wait to try these solutions, thanks!

Eduardo_Assuncao1

It’s so annoying that I can’t make it work and mine is so much simpler. I just want the counter on the title decrease 1 number unit if a checkbox on the list below is unchecked and to go up 1 if it’s checked. It worked once and I have changed the UI now it’s not anymore and it’s driving me insaaaane. The variables are there, are connected to the title, the action is set to when the click is made, even when there’s a hoover state… BY the way, when it hovers it works 😭

Screenshot 2024-02-09 at 16.38.06

Eduardo_Assuncao1

There’s a hovering state in between that breaks things… what I did was:
I have a design system where the interaction happens - default → while hovering → click → check. I set the action to happen on the click and it doesn’t work, if I put the action on the hovering it does work, so apparently the action can’t go one state further by itself

Terms & ConditionsCookie settings

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