Functional text input in Figma - Using

[@M_Ehson]

Finally the first video that states the answer to my questions about how to create a text box where text input is possible. 😊👽

[@Kimoartcave]

❤️

[@M_Ehson]

@@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!

[@Kimoartcave]

Sure, sound interesting. However in reality we would not use Figma to prototype such logic@@M_Ehson

[@M_Ehson]

@@Kimoartcave so how can I take the figma design and put it into action?

[@Kimoartcave]

@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.

[@edmondg]

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.

[@Kimoartcave]

Hi there, that's a good idea. I assume based on restrictions, there is no other better way so far.

[@maaz8748]

do we need a condiotional here , like if else ? can you please elaborate

[@jabrilpressley6109]

I just figured that out and was about to comment it here

[@jabrilpressley6109]

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?

[@akxhit]

Hey, you're incredibly cool! I've been binge-watching your videos for the past two days. Massive respect, man!

[@Kimoartcave]

Thank you, Akshit. I am very happy you found the content helpful. ❤️❤️

[@ghqdeluca]

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!!💪🏽

[@Kimoartcave]

Yes exactly, I made the same way. I have a video in which I used the same approach you mentioned. ❤️

[@ajadmusharraf7750]

Which video?

[@Shubham_Toshniwal]

One of the simplest explanations ever!😍

[@Kimoartcave]

Happy it was helpful ❤️

[@belsnickel5538]

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.

[@Kimoartcave]

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.

[@digdemertan3538]

Excellent describing, and job. Thank you.

[@Kimoartcave]

❤️❤️

[@jatinraj4974]

I really love this channel. Please post more content on micro-interactions using variables and interactive component.

[@Kimoartcave]

❤️❤️❤️

[@olamidebabalola588]

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

[@Kimoartcave]

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.

[@irenegeller]

@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!

[@irenegeller]

Ah, looks like he did :) kzbin.info/www/bejne/b6fUhICYqr2oeMk

[@Kimoartcave]

Exactly! I have made some updates, and I see you found them.

[@ElenaZoro]

Sadly also your linked Figma file doesn't seem to be accesible anymore :(

[@alvonagustinojunior]

The first one I came across that answered my question. :)

[@Kimoartcave]

❤️

[@orianatoubia681]

Thank you very much, awesome tutorial! This explained even more than I expected

[@Kimoartcave]

I am happy this video could help you ❤️

[@nicolo1620]

I don't understand how you made an input at the minute 2:40

[@Kimoartcave]

@@nicolo1620 it is just a component set, which I made a new variant for it and set the compoment property to active. To show the state of the input. Please let me know the part that is not clear. I need a bit more explanation of your confusion. Thank you ❤️

[@arindamnag2430]

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

[@Kimoartcave]

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.

[@kaseyroualdes]

Is there a way to add a blinking cursor once the inactive state is selected and before any text is entered?

[@Kimoartcave]

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]

@@Kimoartcavehow would I do this where the cursor moves when you type??

[@Kimoartcave]

@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. ❤️

[@kryczus]

Wow! That is totally game changer! Thank you a lot!

[@Kimoartcave]

❤️❤️

[@SANDHIYAJ.S]

To use if else ,do we need pay for it to get that feature ?

[@Kimoartcave]

For variables, yes. We need to have the paid version. 😢

[@fathimaashfa6115]

Sir can't we get the local veritable in the free version

[@souradeepnath1]

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,

[@Kimoartcave]

yeap, that's right. thanks you for sharing it with everyone❤

[@souradeepnath1]

@@Kimoartcave Sharing knowledge is sharing light.. 😇

[@Kimoartcave]

@@souradeepnath1 that is indeed true

[@alvonagustinojunior]

I cannot find your template page; the page can't be found. Currently, my login page isn't functional in the text input of Figma.

[@Kimoartcave]

Unfortunately, I moved the file and lost it. So the link is not updated. Thanks for informing me

[@ffranea]

Really helpful for my assignment! Thank you✨

[@Kimoartcave]

I am very happy to hear ot. Good luck with your assignment !

[@hroman_codes]

Dude this video was great an exactly what I was looking for 👍👍👍👍👍👍👍

[@Kimoartcave]

I am happy to hear it ♥

[@bellatrixhp7]

Is there any way to allow the user to type a random number, that gets saved into a string variable that later update a number variable. For example the user type 123 is set the variable "number-string = 123" string and then, updates the variable "number =123" so you can make a two inputs calculator on figma?

[@Kimoartcave]

You can't assign the value of a string variable to a number variable. What you can do maybe is to write a condition that if use type any number save it in number variable and if not save it in string variable. What do you think about it?

[@Kimoartcave]

I have made a calculator before, please check the videos. If you could not find it, let me know ❤️

[@mrair8259]

thanks, but I still find it tedious, wish Figma did just like framer to be honest.

[@sumit_singh_31]

Hey @kimoartcave , I love the video and the explanation part, But the link given in the description ain't working.

[@Kimoartcave]

Hi there, thank you for your comment ❤❤️ yes Unfortunately, I messed up with the file.😢

[@DrNSoos]

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?

[@Kimoartcave]

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 ❤️

[@DrNSoos]

@@Kimoartcave Which videos specifically?

[@11Bashar]

@@DrNSoos Have you figured this out yet ?

[@TheCds777]

Maybe you could of also shown if you wanted to hit backspace to delete characters, but im assuming its the same idea?

[@Kimoartcave]

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.

[@the_other_ritika]

Hi Kimo, is there any way to find out how to make delete/ backspace button interactive?

[@Kimoartcave]

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.

[@uiuxliz]

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!

[@Kimoartcave]

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?

[@Derny_Boy]

How do I use this box multiple times individually without each box typing the same thing?

[@axelsosa5973]

Hey bro, were you able to solve that problem?

[@Pomelo119-f9y]

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!

[@Kimoartcave]

Hi pomelo, Can you try watching my latest videos? I have some vodeos regarding this topic that you might find them helpful. ❤️

[@AmmarGhaswala]

Amazing Experience to see your video and you are explain everything in a simple word bro Huge Respect to you bro❤❤️‍🩹

[@nickyesser]

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

[@Kimoartcave]

@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. ❤️

[@lancelegoff8770]

Thanks for the great video, I just can't get the space bar to work not sure what i'm doing wrong?

[@Kimoartcave]

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.

[@menekamrudy5861]

Thank you for this video sir it has answered the question I had

[@Kimoartcave]

❤️

[@axelsosa5973]

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?

[@Kimoartcave]

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 ❤️

[@axelsosa5973]

​@@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?

[@Kimoartcave]

@@axelsosa5973 I am making a new video about text input and trying to show you a smarter approach.

[@yoongi-r2o]

why i can't find the conditional option on my interaction in figma?

[@Kimoartcave]

Do you have a paid account or use the free version? Maybe this can be the reason. Or maybe the new UI3 looks slightly different, and that is the reason for confusion

[@jmanned]

If they added wildcards this would have made this way more easy.

[@BookerOfTheYear]

Maybe it's because the video is old, backspace works as a parameter in the condition now. What I don't know is what I can only introduce Cap letters

[@Kimoartcave]

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❤️

[@ytRap007]

is there a solution now for backspace key @Kimo?

[@Kimoartcave]

Did not give a try yet. I will check it soon and see if there is necessary to update this video. Thank you

[@ytRap007]

@@Kimoartcave i try to used tohave an ascii code but i think figma will define it literally as string.

[@kaelmolo1432]

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.

[@Kimoartcave]

Yeah, it is true. This is not the best way. Hopefully, we will get this feature in new updates later on.

[@kamalakhatiwada4288]

Amazing !!

[@Kimoartcave]

@@kamalakhatiwada4288 ❤️

[@esrayaman5380]

Thanks for the great video, is the file you shared moved? I cant reach by using the link anymore. Could you reshare it?

[@Kimoartcave]

Hi Esra, yes unfortunately I have transfered my files and lost many of them. Currently do not have the files any more. Sorry for that ❤️

[@LaziKingo]

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?

[@Kimoartcave]

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?

[@lolanano]

@@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'

[@masatoz]

The figma file link is not working. Could you share the file again please? 🙏

[@Kimoartcave]

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♥

[@masatoz]

@@Kimoartcave ok thank you I will take a look.

[@SHOKS22]

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)?

[@Kimoartcave]

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.

[@SHOKS22]

Thanks for your reply, I'll try to make it somehow@@Kimoartcave

[@AshishShiposkar]

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.

[@Kimoartcave]

I used one trick in another video. Check it and see if it can be helpful for you and let me know: kzbin.info/www/bejne/iarOZ4yNgNmro8ksi=toGY13a1GRsWb7Wn

[@humbertoventura1344]

I have to do this with every letter? Are you insane?

[@jabrilpressley6109]

Make each letter a variable first speed up the process

[@thestranger8528]

​@@jabrilpressley6109Can you explain better

[@alxxalbu]

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.

[@Kimoartcave]

I'm looking forward to having it in Figma. So true!

[@salty_buck1864]

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?

[@Kimoartcave]

Hi there! Yeah, it might happen that some features are not available on the free version. That's true.

[@salty_buck1864]

ahhh ok i see, thank you for your explanation, i still enjoyed the tutorial! 👍Thank you and have a good day!

[@Kimoartcave]

@salty_buck1864 Happy to hear that! ❤️

[@KaspervanderHorst]

is it possible in figma to save this input someone gave and display it on another frame?

[@Kimoartcave]

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.

[@KaspervanderHorst]

@@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

[@Kimoartcave]

@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.

[@JoudNovember]

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???

[@Kimoartcave]

Hi joud again, for mobile we need to have overlay keyboard, in this video I explained how you can make this prototype: kzbin.info/www/bejne/iarOZ4yNgNmro8ksi=-Gcymd_U6CYp2lxI

[@dansal2525]

The link to Figma file does not work

[@Kimoartcave]

Yes that is right, unfortunately I moved the file.

[@richespeter4879]

what if have a multiple text fields how do i add text to them individually

[@Kimoartcave]

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.

[@richespeter4879]

@@Kimoartcave okay i will thank you so much

[@MojganImani]

could you say how can i change that ?@@Kimoartcave

[@Derny_Boy]

@@KimoartcaveHow do I make the text in the box not transfer over when previously typed on pages?

[@sungshinyim8150]

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"?

[@Kimoartcave]

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?

[@rosemaryogugua7338]

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?

[@Kimoartcave]

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.

[@HiwagaSoul]

thanks for the tutorial bro 😁😁, but this interaction isn't available to freemium figma users 😔😔

[@sushantsharma2982]

Can it work on mobile keyboard also

[@Kimoartcave]

Not really. I made a video about mobile keyboard Check that out. Let me know if you did not find it.

[@JoudNovember]

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?

[@Kimoartcave]

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: kzbin.info/www/bejne/iarOZ4yNgNmro8ksi=-Gcymd_U6CYp2lxI

[@JonMassey-s8e]

I can't find 'conditions' anywhere in the new Figma update? Anyone know where it's gone?

[@Kimoartcave]

The UI changed bu still you can find it in interaction window.

[@jabrilpressley6109]

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.

[@Kimoartcave]

It should be possible, very time-consuming but possible.

[@MichaelJ.Kohlas]

Can I do also small and BIG Letters?

[@Kimoartcave]

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.

[@stonestone9001]

@@Kimoartcave Thank you sir, this works using shift + M

[@jabrilpressley6109]

​@stonestone90how how did you do it

[@stonestone9001]

@@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

[@Pranavryan]

I followed same process but my interactive component is not responding , can you tell me why its not happening

[@Kimoartcave]

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.

[@LiamMcMaster-w6d]

Great video! Any guidance on my Numbers cannot be added

[@Kimoartcave]

Sorry I could not get the issue, can you explain a bit more?

[@STK_MediaTV]

why i can't do this?

[@MojganImani]

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 !

[@Kimoartcave]

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. kzbin.info/www/bejne/iarOZ4yNgNmro8ksi=OSGY0vrH-MaVgE_b

[@Kimoartcave]

Let me know if you made it happen.

[@MojganImani]

@@Kimoartcave thank you for your prompt response , sure I will 🙏🏼

[@JuliantiValentini]

I clicked the figma link but it says The page you are looking for can't be found. (404)

[@Kimoartcave]

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.

[@Rosevachannel]

thank you brother

[@Kimoartcave]

❤️

[@ResonateForce]

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

[@Kimoartcave]

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!

[@ResonateForce]

@@Kimoartcave ok thanks

[@oOnewerOo]

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.

[@Kimoartcave]

You are right. I guess soon we will have those types of featurs in Figma as well.

[@brandykye7275]

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??

[@Kimoartcave]

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: kzbin.info/www/bejne/iarOZ4yNgNmro8ksi=qfSu7kvHxlDn6NyJ

[@brandykye7275]

​@@Kimoartcave

[@brandykye7275]

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.

[@Kimoartcave]

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

[@Kimoartcave]

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.

[@clashcollegecarter2842]

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.

[@karlavandenbrande6722]

as a student you can ask for an educational package, that way you can use all the advanced features!

[@afrinpathan8474]

I don't have premium can't i able to do with free one

[@SheakmohammadAbujor]

thank you brother

[@CognitionSymphony]

it did not work for me or did i miss a step

[@CognitionSymphony]

IT WORKED

[@Kimoartcave]

Good that it worked ❤️

[@yigitdansik8931]

Figma link does not work

[@Kimoartcave]

That's right. I moved the files and lost them. That is why. Thqnk you ❤️

[@aaronugede]

love it!

[@Kimoartcave]

❤️

[@henkegiaretta]

I try to input @, any clues?

[@Kimoartcave]

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!

[@henkegiaretta]

@@Kimoartcave Actually it did work, don't know why I didn't manage it earlier :)

[@Kimoartcave]

@@henkegiaretta Nice, good to hear it.

[@daisietrains9981]

Oh no the link to the file isn't working :(

[@Kimoartcave]

Unfortunately, I transferred the files and lost them. But later in another video, I show a plugin can save you a lot of time.

[@tara730]

file is missing?

[@Kimoartcave]

Unfortunately, I moved the files, and they are missing now. Sorry for that ❤️

[@tara730]

@@Kimoartcave no worries, what if I wanted to give focus interaction on the input field coz generally in UI we give this interaction.

[@tara730]

@@Kimoartcave waiting for your reply

[@Kimoartcave]

@@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❤

[@rohithchandra1300]

Thanks bro

[@Kimoartcave]

@@rohithchandra1300 ❤️

[@the_infinity_channel]

Very nice in 23. we still don't have easy way to do input text in Figma , it is very user friendly. It would be much easier to code whole keyboard for a front end then to do it in Figma. By the way your Figma link is empty but anyway thanks for showing us how painful it is 🤣

[@Kimoartcave]

Totally agree. But there are some plugins that you can use which are going to do all manual works for you. Give them a try.

[@ChristineJoyMarbellaSaor]

Why mine is'nt working?

[@Kimoartcave]

Is there anything I can help you with? Can you share more details?

[@ChristineJoyMarbellaSaor]

@@Kimoartcave I just follow the procedure that you give but is not working

[@ChristineJoyMarbellaSaor]

can you help me?

[@Kimoartcave]

You need to share more details that I can help. where in the process do you face problems?

[@ChristineJoyMarbellaSaor]

@@Kimoartcave I can't input a text

[@LOGOTIPERO]

Doesnt work when testing in smartphones.

[@Kimoartcave]

I made another tut for the mobile version. You can find it on my channel.

[@LOGOTIPERO]

@@Kimoartcave theres so many videos. Could you share the link, please ?

[@Kimoartcave]

@@LOGOTIPERO kzbin.info/www/bejne/iarOZ4yNgNmro8k . Let me know if it was helpful. thank you

[@cnb8220]

i tried to do it, but now we have to pay for this animation 😞

[@Kimoartcave]

❤️, unfortunately

[@TheCds777]

You put Q in the key field? Isnt it suppose to be A in your example? lol

[@Kimoartcave]

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!

[@TheCds777]

Oh ok good to know bc for a second I thought Figma was getting way to complex lol @@Kimoartcave

[@MeniscoManeiro]

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.

[@Kimoartcave]

I understand your point. Hopefully, soon, I will start to record real-time, it should be better as you mentioned.

[@LOL_ik86]

Жаль, что только с подпиской эти функции работают.

[@IISH4RKZzII]

hey, I appreciate this valuable video, but the sound of the music is really loud I think I died xD

[@Kimoartcave]

Hi there 👋! I understand your point. I tried to use no bg music in my latest videos. Thanks for sharing your feedback

[@IISH4RKZzII]

@@Kimoartcave great happy to hear that 🙏

[@MrIbatista]

This works with just one input field. If you want a form, it won't work.

[@Kimoartcave]

I have uploaded more videos lately regarding this ropic. Maybe you can find the answer to your problem in one of those. Thank you ❤️

[@resulterror2381]

i think better you just create a tutorial without showing your face and just explain the point, it waaaaaaay mooore better

[@Kimoartcave]

Thanks for your comment. Can you explain a bit more? Do you mean videos with no facecam? And what makes it way better?

[@tobategbe7490]

Lol nice but iff your product is going to the development, this is titally a waste of time and unnecessary

[@Kimoartcave]

I understand you. But not necessarily. Believe me in the test phase of the design process. You might have to make a lot of changes before you go for development. Many revisioning might happen. But I agree there are not so many cases that we really need to test the text inputs, and there are better protoyping tools for those cases

[@dsgnlive]

[@AmmarGhaswala]

Amazing Experience to see your video and you are explain everything in a simple word bro Huge Respect to you bro❤❤️‍🩹

[@Kimoartcave]

I am happy you found my video helpful. See you around ❤️

[@AmmarGhaswala]

Amazing Experience to see your video and you are explain everything in a simple word bro Huge Respect to you bro❤❤️‍🩹

[@AmmarGhaswala]

Amazing Experience to see your video and you are explain everything in a simple word bro Huge Respect to you bro❤❤️‍🩹