@@Kimoartcave hey, I actually wanted to create a working application page where you can create an account, I would love to see a video where all these keyboard creation and text input box comes in use with a series and successful account creation page. Hope you can help me!
@M_Ehson no coding web development tools such as webflow or framer can be good options. Or maybe prototyping tools that have more prototyping features such as protopie. The fact is that in the design phase, it is very important to keep the effort as low as possible. The question is, why do we need the prototype? The flows that matter a lot and we need to test should be in our prototype. And we need to make the interaction as real as possible. Otherwise, we can fake those flow in figma.
If you wan to achieve some kind of delete function try this - While you can't currently remove a character from a string in Figma, you can remove the entire string. So just program your delete key to update the string variable to " " or whatever your original placeholder text was. Seems to work well and in my opinion better than having a separate key to click on.
Key / gamepad Set variable to text-input " " That clear all text entered To bring back the placeholder text: Hit the plus to right of key/gamepad Conditional If text == " " Set variable to "type here" The else isn't needed This brings back the original active state Did anybody figure out how to delete one character at a time ? I'm thinking we have to use JS on the programming side to keep the current user input. Am I correct?
It worked! Now, to work on the smartphone, I made a keyboard and added variables to each letter, number and symbol, I just changed it to “on tap” instead of “key/gamepad”. Thanks bro!!💪🏽
I am happy that it was helpful. It is good to use drag to reset the component, just It might be necessary to add some micro interactions to make it easy for users to understand the interaction logic. It is not very common.
I will do a video about it❤️❤️. Until then, you can design a mobile keyboard and then add the same interaction to each btn instead of keys on the keyboard. Also, you can use overlay as interaction, that whenever the user clicks on input, the overlay gets opened.
@Kimo do you think you'll update this tutorial for Figma's new UI? :) Around the 4:15 mark, there's a difference in the UI between old Figma (choosing "Conditional" for an interaction) vs. new Figma (they seem to be calling it "Check if/else" now) and I'm sure there'd be other discrepancies. Great tutorial though!
I followed your steps and everything works, however, when I am using multiple input fields on the same page, once you enter something into one input they all repeat the same text. How do you stop them from all being all identical?
I have explained some approaches later in another videos, you can check my channel and write me if you couldn't find them. Hope you find answers to your question ❤️
Impressive tutorial Kimo! Let me ask, all this is for prototyping purposes right? I mean, If the designer just designs the different states of the text fields, the developer can implement the whole typing in functionality, right?
Indeed, you are right. It is not needed for the development process. Just to show how we can use variables and conditional prototyping. However, it might happen that we can do this for preparing our prototype for a test or something.
can you also add a part where one can incorporate a "backspace"... using the backspace key from the keyboard. I added the space & the dot character also addressed the optical illusion created by clicking the back icon.. but wasn't able to activate the backspace for a single character
Thanks for sharing your experiment. Tbh, I am waiting for a new update that we might get in config 2024 to see if we have more options to make functional user inputs. Otherwise, I will make another video that will try to make the functional backspace that needs a bit complex logic using conditional prototyping.
Thank you for this great tutorial, has helped a lot. I have a quick question though, I want to add multiple text boxes in the same frame, however every time i type something all the boxes all filled in. How can I make the text boxes fill in one by one? I hope this makes sense
@nickyesser thank you. I made another video about this topic. I used some plugin that help us to make text inputs faster. Please check that video and let me know if you could not find it. ❤️
Thank you for the great video! Question: if I have several text boxes with different texts, does that mean I will have to reset interactions of all letters for every single text box? Cuz it seems that if your text changes, the string you used for the conditional settings doesn't change. Thank you!
You can add a state for the text input component as an active state and then add a blinking element as a component next to the text layer that you connect to variable. You can make blinking animation in that component separately
@Derny_Boy try to use auto layout and hug as Horizental resizing behavior for text layer. In this way, when the text expands, it will push the blinking indicator. Just an Idea. Let me know if it works. ❤️
Wouldn.t be easier for Figma to implement an input text, a select, a checkbox and radiobutton components and implement them. Then to give you the way to copy some event from one component to other? When? Axure has all these features for 10 years at least.
Did you try to use different modes or creating different variables to connect to the text layer with in the text input? I made one video and made a version for mobile keyboard that might be helpful. Let me know if you figure it out. Thank you ❤️
@@Kimoartcave Hi! Thanks for your answer. I tried to create different variables but I had a new problem: replace the old variable with the new one on each key asigned in the interactions section. Do you have a quickly solution for this?
I wish I could, I lost the file myself, maybe I can make a new one, however I have made another video later showing some plugins that make the input with one click. did you check that? thank you♥
For Backspace you can't delete one by be but the whole word or sentence. Just ("Key=Backspace", Action= Set variable, Variable=txt-input, Value=""). This will clear the whole text box,
great video but you lose me around the 4:51 mark -- imputing "a" , it does not allow me, i want me to choose a variable, am i missing a step? is there a prerequisite video before this one ? HELP!
Hi Liz, I see you have some issue, I need to know a bit more to be able to diagnose the problem. So you can not set the trigger type on the key press? And set the key of the keyboard to it?
Thanks ❤️. Tbh, there is no simple way to achieve what you mentioned. For now, you can have a delete btn in your input to reset the value of the input.
Ok nice but just what can be the interaction that backspace is going to trigger? how we remove one char from the variable. For cap letter maybe we need to add another condition like if user click on "shift+char" then use the cap letter. I have not tried it yet. let me know if you did. thank you❤️
I don't think so by default, but we can use the same method to make a functional mobile keyboard, that move in as overlay when user click on input. do you think you can make one?
@@Kimoartcavei have done the keyboard overlay as u mentioned however i got issue on how to remove last character in the string .. for example ' kia' .. i want to remove the last character which is 'a' soo my string will be 'ki'
Hi sir, If Multiple text input box in one screen how wiil we manage (text-input) variable, because if i create for one input fild it will be reflected to others also.
I used one trick in another video. Check it and see if it can be helpful for you and let me know: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Syk6YWKtxmg.htmlsi=toGY13a1GRsWb7Wn
You need to reset the initial value for the variable tot type here when the user clicks on reset. Otherwise, the variable would still have the last value it got. Did you try this?
I need a more specific explanation to be able to help you. Does your input have a different state? Are you sure you add interaction to the correct state. Also, check if you connect the text layer of your input to the right variable. Let me know if you could not solve your problem.
Aha, you are right I have transferred my working environment, and that might be the reason that I have lost some of the files. did you check my latest video about text input in Figma? there is a plugin that can help you save some time.
I have more than one field so i have to add more than one variable for each one, what should i do in this case? For the interactions? Should i make a condition for each variable?
Hi joud, here in another video, I used a trick to have more than one text input. I used different modes for one variable. Watching this might be helpful: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Syk6YWKtxmg.htmlsi=-Gcymd_U6CYp2lxI
hi sir, i tried doing this using the starter pack on figma, however I was only able to follow the tutorial till the conditional prototyping part, could it be that I require the professional starter pack to use functional text input in my prototype?
Hi joud again, for mobile we need to have overlay keyboard, in this video I explained how you can make this prototype: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Syk6YWKtxmg.htmlsi=-Gcymd_U6CYp2lxI
I downloaded your file but I need to create two more fields for my component. I did this by copy and pasting Serial 2, renaming it Serial 3, then creating a third text string variable exactly how the first two you created are setup. But for some reason it is not replacing "Third Text Value" with nothing even though I set the variable in the prototype connection to "". Any ideas??
Hi Brandy, I have tried a trick in this video that might be helpful for you. If you could not find the answer to your issue there, please let me know: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Syk6YWKtxmg.htmlsi=qfSu7kvHxlDn6NyJ
So, the overall process is to make a variable with different modes to store the input of each text field. In the mobile version, we will have different keyboards with the same logic. If we use the mechanical keyboard, it is possible that this approach does not work. Right now, I can not diagnose what can be the issue in your prototype unless I see what you have done. For tomorrow, I can't help you, but if you could manage to buy some more time, you can share your file with me to see what the solution can be. Thank you
Also, I recommend that if the text input is playing an important role in your user flow, it might be good to think about another tool, such as a protopie, which has more advanced interactions.
Yes, when we manipulate the value for a variable while running the prototype, the value will be changed. So if we connect the variable to a text box to read its value, we will see the new value assigned to it. You can see the example in the same video. Let me know if you have further questions.
@@Kimoartcave I am creating a prototype for a workout tracking app where the user can type the name of an exercise and then have a list of their saved exercises somewhere. So thats what I want to do in Figma. Thank you for your help
@user-qh5zw3ex5z I see. I have to say, it would take you a lot of time to make a logic like dynamic searching, using conditional prototyping. Tbh, it is not worth it. So you can have collections of variables to store the title and the rest of the information related to exercises and then use modes to store different types of exercises. Then, make a component and connect all fields to respective variables, duplicate it, and then use mode to show different exercises. I am pretty sure you already did this. Then you can fake the searching part, so you can write condition to check if the word that user write is matching with the keyboards that you are prepared for, and then in that case navigate user to specific pafe that you are showing some certain sort of exercises. It is hard to explain here in chat.
could you please explain what to do when i wanna use this component several time in one project ?i tried that but when I am typing in one box , it's written to other box as well !
Hi there! I will share a link to a video with you. In this video, I used a trick to have more than one text inout. It can be helpful to watch it. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Syk6YWKtxmg.htmlsi=OSGY0vrH-MaVgE_b
The fastest way comes to my mind write now is to use modes. you can define different modes for your variable. And set the specific mode for your input. Let me know if you tired this way.
Good question. Maybe you can also add a new logic to your prototype in which you use key as a triger, shift + letter, and then you store the capital form of the letter. It is just an idea I did not try myself yet.
@@jabrilpressley6109 you choose shift + M, cause lowercase is normal m. When you want to type the larger M in the textbox, you select shift + M to show large letter
Have anybody tried adding a drop-down to the search to show results? I started building the structure last night but didn't finish because it was late but will explain how's it's done when I finish. I am redesigning a car dealership site. So far I added one variable of the word car and made the search return car if the letter c is inputted. I plan on making variables for words like car names and other keywords a user may search. So I can have a database. It's complicated so any suggestions is appreciated. That is like using word suggestion. And I programmed the enter key to open A link . I will explain what I accomplished when done and suggest everyone to share their progress / end results so we learn from each other because it's endless possibilities with this search prototype.
Good point! Did you try to use the combination key "Shift + 2" (@) as a trigger for the interaction instead of only a key on the keyboard? Let me know if this helps you. Thank you!
@@tara730 Yes, that would be head to achieve in Figma, maybe you can make another condition and interaction on the page in which you change the state of the input each time user click on the "Tab" button. but still I do not recommend to spend so much time to prototype it in Figma, better to use another tools. thank you❤
