Functional text input in Figma - Using
HTML-код
- Опубликовано: 11 июл 2024
- Finally, we can have text inputs in our prototype that users can really type in and we use the given value in our design.
I will use variables and then #conditionals prototyping to make this input. so get sure to watch this video until the end.
🔗Link to the #figma file:
www.figma.com/community/file/...
⚠️ new update:
• Functional login form ...
📌 Timestamps:
0:00 - Intro
0:25 - What you will see in this video
1:26 - Step one: design the input
2:21 - Step two: Create a variable
3:12 - Step three: Prototype the active state for input
3:41 - Step four: Interaction
6:06 - Step five: Delete the icon
6:19 - Make an example
7:10 - Demo
Whether you're a beginner or an experienced designer, you'll find valuable insights in this tutorial. Follow along and take your Figma skills to the next level with this captivating micro-animation technique.
👍 If you found this tutorial helpful, don't forget to give it a thumbs up and subscribe to the channel for more design tips and Figma tutorials!
Let's Learn together #UX and #UI , #Design, #figma #prototype
🔔 Subscribe for weekly design tutorials:@Kimoartcave
--------------------------------------------------------------------------------------------
🔥 Check out some of my other popular tutorials:
Variables: create dial pad: • #figma Tips and Tricks...
Advance micro-interactions in Figma: • Level Up Your Micro-In...
--------------------------------------------------------------------------------------------
🌐 Connect with me:
Instagram: / kimo.artcave
Photography: / kiagraphy.a. .
Twitter: / kiarashmoazzez
TikTok: / thekimo.artcave
LinkedIn: / kiarashmoazzez 
Наука
Finally the first video that states the answer to my questions about how to create a text box where text input is possible. 😊👽
❤️
@@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!
Sure, sound interesting. However in reality we would not use Figma to prototype such logic@@M_Ehson
@@Kimoartcave so how can I take the figma design and put it into action?
@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.
Hey, you're incredibly cool! I've been binge-watching your videos for the past two days. Massive respect, man!
Thank you, Akshit. I am very happy you found the content helpful. ❤️❤️
Excellent describing, and job. Thank you.
❤️❤️
One of the simplest explanations ever!😍
Happy it was helpful ❤️
Thank you very much, awesome tutorial! This explained even more than I expected
I am happy this video could help you ❤️
I really love this channel. Please post more content on micro-interactions using variables and interactive component.
❤️❤️❤️
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!!💪🏽
Yes exactly, I made the same way. I have a video in which I used the same approach you mentioned. ❤️
Really helpful for my assignment! Thank you✨
I am very happy to hear ot. Good luck with your assignment !
Wow! That is totally game changer! Thank you a lot!
❤️❤️
thank you brother
❤️
Huge timesaver thanks. I did not want to add a reset icon since it does not form part of the design so I added a Drag interaction to reset the input.
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.
Thank you for this video sir
it has answered the question I had
❤️
love it!
❤️
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.
Hi there, that's a good idea. I assume based on restrictions, there is no other better way so far.
do we need a condiotional here , like if else ? can you please elaborate
I just figured that out and was about to comment it here
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?
If they added wildcards this would have made this way more easy.
please can you do a video explaining how to create an instance that if we click the text box then mobile keyboard pops up and allows input text
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.
I think this would work for me but my school does give us access to advanced features because when I try it it says I need advanced features.
thanks, but I still find it tedious, wish Figma did just like framer to be honest.
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.
A litle bit sad that figma can not build in a element for that. In Axure, XD and other prototype programms its a 2 second job.
You are right. I guess soon we will have those types of featurs in Figma as well.
Thanks for the great video, I just can't get the space bar to work not sure what i'm doing wrong?
Did you try to add empty char to a string variable? Like " ". I am not sure if it works, but let me know if you already tried.
Hi Kimo, is there any way to find out how to make delete/ backspace button interactive?
Hi Ritika, unfortunately, I could not find any proper way to achieve it. please let me know if you find any solution for it. thank you.
Maybe you could of also shown if you wanted to hit backspace to delete characters, but im assuming its the same idea?
Unfortunately, it is not easily possible to delete characters one by one from string variables. That is why I did not focus on it in this video.
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: ruclips.net/video/Syk6YWKtxmg/видео.htmlsi=-Gcymd_U6CYp2lxI
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?
Does this work if opened on mobile phone also?or is there any way that if we click the text box then mobile keyboard pops up and allows input text?
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'
Hey man, nice tutorial.. Im facing the problem when I want to insert all of the keys in Intercations. How do I insert delete key (backspace key)?
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.
Thanks for your reply, I'll try to make it somehow@@Kimoartcave
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:
ruclips.net/video/Syk6YWKtxmg/видео.htmlsi=toGY13a1GRsWb7Wn
Amazing Experience to see your video and you are explain everything in a simple word bro
Huge Respect to you bro❤❤️🩹
Will this work if i created the prototype on a laptop but i tried it with an iphone? Or it doesnt work with the iphone’s keyboard???
Hi joud again, for mobile we need to have overlay keyboard, in this video I explained how you can make this prototype:
ruclips.net/video/Syk6YWKtxmg/видео.htmlsi=-Gcymd_U6CYp2lxI
Is there a way to add a blinking cursor once the inactive state is selected and before any text is entered?
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
@@Kimoartcavehow would I do this where the cursor moves when you type??
@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. ❤️
Thanks for your video bro! But i have a problem, how do I use this box multiple times individually without each box typing the same thing?
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?
@@axelsosa5973 I am making a new video about text input and trying to show you a smarter approach.
I have to do this with every letter? Are you insane?
Make each letter a variable first speed up the process
@@jabrilpressley6109Can you explain better
Damn that's still a lot of work i wish there was a better and more automated way to enable user key inputs than having to set variable per key stroke.
Yeah, it is true. This is not the best way. Hopefully, we will get this feature in new updates later on.
When I click the reset button, I want to see the text "type here", but now it shows the last name I used. How can I see the text "type here"?
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?
How do I use this box multiple times individually without each box typing the same thing?
Hey bro, were you able to solve that problem?
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:
ruclips.net/video/Syk6YWKtxmg/видео.htmlsi=qfSu7kvHxlDn6NyJ
@@Kimoartcave
I watched the video but it still isn't working :( I have to finish my project today and this is the only thing holding me back.
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.
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.
I'm looking forward to having it in Figma. So true!
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 there! Yeah, it might happen that some features are not available on the free version. That's true.
ahhh ok i see, thank you for your explanation, i still enjoyed the tutorial! 👍Thank you and have a good day!
@salty_buck1864 Happy to hear that! ❤️
I followed same process but my interactive component is not responding , can you tell me why its not happening
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.
Great video! Any guidance on my Numbers cannot be added
Sorry I could not get the issue, can you explain a bit more?
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.
It should be possible, very time-consuming but possible.
is there a solution now for backspace key @Kimo?
Did not give a try yet. I will check it soon and see if there is necessary to update this video. Thank you
@@Kimoartcave i try to used tohave an ascii code but i think figma will define it literally as string.
WHEN I TRY TO ADD CONDITIONAL PROTOTYPE IT SAYS I DO NOT ACCESS TO IT ANS ASK TO PAY 12$ TO IT TO GET ACCESS WHAT TO DO NOW IS THERE ANY ALTERNATIVE
Yes, you need to upgrade to pro version to be able to use the variables. not really, don't know any way to use variables on free license!
@@Kimoartcave ok thanks
is it possible in figma to save this input someone gave and display it on another frame?
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.
what if have a multiple text fields how do i add text to them individually
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.
@@Kimoartcave okay i will thank you so much
could you say how can i change that ?@@Kimoartcave
@@KimoartcaveHow do I make the text in the box not transfer over when previously typed on pages?
Can it work on mobile keyboard also
Not really. I made a video about mobile keyboard
Check that out. Let me know if you did not find it.
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. ruclips.net/video/Syk6YWKtxmg/видео.htmlsi=OSGY0vrH-MaVgE_b
Let me know if you made it happen.
@@Kimoartcave thank you for your prompt response , sure I will 🙏🏼
Can I do also small and BIG Letters?
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.
@@Kimoartcave Thank you sir, this works using shift + M
@stonestone90how how did you do it
@@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
I try to input @, any clues?
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!
@@Kimoartcave Actually it did work, don't know why I didn't manage it earlier :)
@@henkegiaretta Nice, good to hear it.
hey, I appreciate this valuable video, but the sound of the music is really loud I think I died xD
Hi there 👋! I understand your point. I tried to use no bg music in my latest videos. Thanks for sharing your feedback
@@Kimoartcave great happy to hear that 🙏
Жаль, что только с подпиской эти функции работают.
unfortenantly i need figma with premium but still thx for help
❤️
You put Q in the key field? Isnt it suppose to be A in your example? lol
Yeah 😂 I used to do voice-over and not real-time recording. That is why I had these types of mistakes in video. Nice attention to the details!
Oh ok good to know bc for a second I thought Figma was getting way to complex lol @@Kimoartcave
Why mine is'nt working?
Is there anything I can help you with? Can you share more details?
@@Kimoartcave I just follow the procedure that you give but is not working
can you help me?
You need to share more details that I can help. where in the process do you face problems?
@@Kimoartcave I can't input a text
Just a feedback.... Cutting the figma screen to you talking doesnt help that much on keeping track of what`s happening and the steps I should follow.
I understand your point. Hopefully, soon, I will start to record real-time, it should be better as you mentioned.
thank you brother
Amazing Experience to see your video and you are explain everything in a simple word bro
Huge Respect to you bro❤❤️🩹
Amazing Experience to see your video and you are explain everything in a simple word bro
Huge Respect to you bro❤❤️🩹
Amazing Experience to see your video and you are explain everything in a simple word bro
Huge Respect to you bro❤❤️🩹
I am happy you found my video helpful. See you around ❤️