Using conditionals with typing in figma

I’m trying to create the following scenario in my Figma prototype:

  • There is an input field and a disabled button. Once the user types at least 3 characters, the button is enabled. Is there a way to use conditionals and variables in Figma to do this?

Here’s an example of what I’m working with: https://www.figma.com/file/UbQIf2uwqG8bxYIIX1gh2D/Typing-prototype?type=design&node-id=1817%3A47672&mode=design&t=MRMxUzaH6xB5K0GK-1

Any help is appreciated!

Hi, Licazali.

It seems like you’re in the right track after looking through your file.

What you need to do is to get the “#Characters” number variable to “3”. You can do that by adding another set variable to all your keyboard like this:
image

and then, don’t forget to set the characters back to “0” and the state back to “false” like this on the back button:
image

After that, it should work properly like this:

1 Like

Thank you so much, @Raphael_M ! Do I add this logic to the individual keys on the keyboard in my components, or on the whole keyboard component itself? I tried both, and the button is not changing, so I’m not sure what I’m doing wrong.

Hi.

Yes. You have to put them in the keyboard keys that can be used for input so we can determine the number of characters by letting the variable know that every click on the key is equal to an additional 1 character.

And then on the next click and when the variable is already equal to three, the state will be set to true using the Conditional prototype. Make sure that the Conditional is on the last because the prototype reads the script from top - bottom.

Take note that you have to put a variable string for your states on the button or else it won’t switch.

image

1 Like

Hi Raphael. Thanks again for you help. I’m really having trouble figuring this out. I tried to put the variable string of State on the button, but it removes the true/false drop down. I tried setting the variable of State to true on the keyboard letter, but now it doesn’t look the same as yours. Is there a file you can share with me to see how you did it?

A-screenshot-2
button-variable

Hi, Cayte.

It seems like you’ve changed the properties of your button haha. I’ll just use your current implementation.

  1. Create a string variable with default value, disabled since the component is disabled.

  2. Apply the string variable to the button-contained component on the state property.

  3. the number variable #Characters should have a value of 0.
    image

  4. Apply this onClick function on all the inputs A,B,C… and so on.


    But there is a problem with your current component. Enabled and Disabled state looks the same so for the meantime, I’m going to switch the button to hover

  5. Apply this onClick function on the backspace or delete.
    image

Here is a copy of the file. Take note I only put the input function on letter A.
cayte.fig (235.2 KB)

1 Like

Aha, I got it! Thank you so much for that explanation. The sample file really helped too. I appreciate your help with this, Raphael. :slight_smile: