Using conditionals with typing in figma

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:

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

After that, it should work properly like this:

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.

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?

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.
   

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.
   

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

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

Hey there, I hope you’ve already resolved the problem! You can achieve this using Figma’s interactive components and prototyping features! Set up your input field as a component with variants for different states (e.g., less than 3 characters and 3 or more characters). Then, trigger the button to switch from disabled to enabled based on these states.

Although I am a beginner on this platform, I have recently enhanced my knowledge about Figma conditional logic through an educational resource. Also, I am trying to improve my knowledge and skills through active engagement with this forum. Pardon me for any misinformation!

If you're trying to use conditional logic with typing animations or interactions in Figma, keep in mind that native support is limited. You might want to explore plugins or external prototyping tools that offer more advanced logic capabilities.

Also, if this is part of a portfolio or CV project you're designing, CV Folks can be a helpful resource—they specialize in professional CV writing and design, which could give your project a more polished edge.