Thanks for this amazing tutorial Kia. In your next video I want to learn about how to trigger some action by performing some other action using variables. Like I want to enable submit button only when user click on the "I agree" check-box else submit button will be disabled. Thanks. Keep making amazing content.
About the backspace always only removing the last character you wrote, I solved it this way: Before you start setting the new variable, you save the previos one to "Text prior" or something. This way you have two variables saved at the same time and whenever you type backspace, the text prior is the new text variable. But that only works once. So dubble backspace does not work this way.
Thanks, Max, for sharing this trick. I was thinking the same. However you mentioned yourself, this solution is a bit limited. I am still looking for a more practical one. Until figma's new update. 😀
I have a way that actually only modifies slightly from what you explained. For interaction, I select all my keyboards and provide interaction so that I don't need to copy and paste again. I just use the string (" "} and only add the string after all the keys have interactions.
there is only one thing i am not able to that is not able to select the variable i created at 6:42 it is directly showing the properites not the variable i created
Thanks this is AWESOME Kimo, I have one question I am only able to type one letter at a time and never a whole word. Is there a way to get it to type the whole word like your demo
Can you check this video and let me know if you could solve your issue. It might be easier to use this plugin. You need to share more info that I can help you. Thank you ❤️
In this approach yes, I really recommend to use better prototyping tools if the design is really working with user input. Protopie can be a good option. thank you ❤️
Great tutorial! Can you please in some of the next videos explain how to do auto layout and make all possible screens responsive? Thank you in advance!
I can create an input text but it's a text variable... what if I want a user to type some numbers so I can use that value as number and not as text? For example: user types 100 that would represent 100usd and when clicking on a cta it's value in eur appears.
So, in that case, it is better to make a number variable, then when you want to set thebonteraction for the keys on the keyboard, asign nimbers to that variable instead of strings. Have you tried this solution? Let me know if it works.
@@KimoartcaveI should create a variable that counts how many numbers get pressed then.. on keypressed I should sum that number multiplied for the "weight" of the position so that the first one gets multiplied by 1 yhe second by 10 the third by 100 and so on
It could be possible to make such a thing. However, in practice in real projects, I believe it is not very efficient to use figma for making such a prototype.
The first question I usually ask myself when it comes to prototyping is that what is the purpose of prototyping? If you really need to design a prototype, that user can dynamicly send and receive a message (freely). It would be better to design your UI and use low code or no code app or web design tools. I do not have a certain name in mind for your use case, but you can do a quick search.
for some reason when i click on the keys of the keyboard, the letters don't next to eachother like "qweqw" but rather just a single letter and if i click on another letter the single letter just changes to the one i clicked on.
I am not sure where in the interaction you might make something different, but it is clear that instead of adding to the string you assign to text input, you are replacing its value. So you should say " $string to $string + "letter" ". Hope it helps. ❤️
Hello, how can you also show the different states of the input field e.g When the users click the input field a blinking cursor appears and the field's border is highlighted also the keyboard is moving in as the state of the input field changes to accept text.
It is tricky and requires more detail in the interaction. I recommend you use plugins to add text inputs with all functions. I am making a video about it.
We have never made a prototype that text inout works and it is functional using FIgma. Making prototype should be cheap and affordable timewise . Hope I got your point correctly. thank you ♥
Sir thank you for this amazing knowledge. I have a question how to make this keyboard as a default keyboard mobile. Where need it how our flutter costumize keyboard should appear that made in figma
Hi there! Unfortunately it is not possible at the moment. We do not have text input with native keyboard. That is why I faked it. Hope we have such a feature soon.
Figma new UI is slightly different. When you select the text layer in the design pannel on top next to the kayer properties, you can find apply the variable option. Let me know if you had problem finding it.
@emilybelleza4239 Sorry, it seems that it is only available in paid versions. Or you can make an educational account. Like students or other types. Have you tried it?
@@Kimoartcave yes i tried this and also got the desired effect, but connecting the text layer shows the layer content till such time the user types in the interactive form. example, i take the users address as a google map location and allow the user to add the premise name and the house/ apartment number in two separate forms. The use case is to display all these three as a concatenated text like {house_no},{premisename,{googlemap_location}. So am able to achieve this, but would like to hide the text variable from being displayed till such time the user types in the form field. Also the text should appear as the user types in the form fields. This i am unable to achieve and was hoping if you would provide a solution. Hope i am able to explain properly.. not sure if i can share the link of the prototype in some way for a better explanation
@arindamnag2430 thanks for explaining. I have difficulty understanding the details,despite your explaining. That's good. Idea to send me the link to your figma. However, the earliest I xan get back to this topic in 2 weeks. If it is still ok for you, send it to my email and we talk in 2 weeks. Let me know how you think.
Hi. Question : if I have an input field for entering information , the keyboard will move up. I get that. But how do I get that input form field ( to type my name , for example ) to move up , so the keyboard won’t block that field when it appears on the screen ?
I understand your concern. The keyboard is overlay, so it will be closed when the user clicks somewhere on the screen. But to keep the input always on top that the keyboard does not cover it, maybe you can add another interaction (link) to text the input layer (anchor link), which means when user click on text input, the screen will be scrolled automaticly until text input reach to top. I have to say I did not try this method. Let me know of it worked in your case.
Very good tutorial. But I wondering if the same mythology can be applied to Key/Gamepad... and it looks like there is an issue... When using keyboard it does not respect different inputs, no whether I use different variables (let say: type_email variable and for second field type_password variable) or your method shown above (mode 1, mode2) it treats them as one input field.. Is it a solution to solve that issue?
Maybe you need to have an active state for your text input, and one input can be in active state at the same time. In this way, you will only maniupulate one variable or a variable in specific mode so you can control the user interaction better. In general, it is better not to count on this solution for making a prototype, which is costly and not efficient!
As I said in the video, so far I have no practical solution for it. I am pretty sure we will get more operators in the next Figma updates. let me know if you found any solution for it. thanks ❤
There are some ootions in my mind. One js that you can make a logic to count the entered number by user, and then ad some empty chars every and each 4th digit. The other one is to have different variables and then connect the variables to different text field with space between them. What do you think?
I presume your tutoring is for people with advanced knowledge of Figma, who are stuck on a few ways to get things done and not for a learner like me. If you can take time to explain the steps better that can help others. I appreciate you responding to me 👍🏽
I understand your point, in my latest videos I am trying to explain more and show the reasons and not just methods. I will try to share my knowledge in a more understandable way. thanks again♥
Hi there! Did you make interaction for each key individually? You can see how I did it in the video. Besides that, I need to know more about how you made your prototype to be able to figure out what can be the problem. Let me know if you couldn't find a solution. ❤️❤️
Hi again Kimo 👋. I fixed it! I made a mistake while making the interaction on the keyboard. I didn't input the "write here" instead I just clicked on "text-input" string. Thanks alot. 😊
Delete all : Create interaction Select Key/gamepad in click to select it will say press key after selecting it hit backspace inside than set a variable click your text input than write inside to : " " Now you have delete :]
Saudações Frater Caciano, [ SUGESTÃO DE VÍDEO ] Poderia produzir um vídeo sobre a Jurema sagrada? Sinto falta de conteúdos sobre essa erva/entidade, e gostaria de conhecê-la, você já teve experiências com esta medicina? Qual a relação ela com as outras ervas? P.P 🌹 🔺AD CRUCEM PER CRUCEM AD ROSAM PER ROSAM🔻
Hi there, thanks for your comment.❤️ Indeed, it is good, Idea. I already have a video about that. Have you already checked it? ua-cam.com/video/Fk2NBF-Le7U/v-deo.htmlsi=HzWmfVvZ2pXFToFp
Thanks for this amazing tutorial Kia. In your next video I want to learn about how to trigger some action by performing some other action using variables. Like I want to enable submit button only when user click on the "I agree" check-box else submit button will be disabled.
Thanks. Keep making amazing content.
Thanks for sharing your Idea. Sure, hopefully next week, I will make a video about variables. I will fit this point into it. ❤️❤️
This is the only video which explains this concept properly...Thank u so much for the simple explanation
❤️
This is Awesome kimo , I’ve been waiting and thank you for helping out with this. 🙏🏿
❤❤ hope it was helpful.
About the backspace always only removing the last character you wrote, I solved it this way: Before you start setting the new variable, you save the previos one to "Text prior" or something. This way you have two variables saved at the same time and whenever you type backspace, the text prior is the new text variable. But that only works once. So dubble backspace does not work this way.
Thanks, Max, for sharing this trick. I was thinking the same. However you mentioned yourself, this solution is a bit limited. I am still looking for a more practical one. Until figma's new update. 😀
Love your videos, but your music is wayyyy oo loud. Keep up the good content :)
Thank you ❤️ I understand you, I tried not to use any music fory video in recent wideos. Feel free to share more thoughts with me.
I have a way that actually only modifies slightly from what you explained. For interaction, I select all my keyboards and provide interaction so that I don't need to copy and paste again. I just use the string (" "} and only add the string after all the keys have interactions.
Aha I see. thanks for sharing it Raka ❤️
there is only one thing i am not able to that is not able to select the variable i created at 6:42 it is directly showing the properites not the variable i created
what about the space bar and cut button
Space you can try to asigne empty character to space bar. Have you tried this?
Thanks this is AWESOME Kimo, I have one question I am only able to type one letter at a time and never a whole word. Is there a way to get it to type the whole word like your demo
Can you check this video and let me know if you could solve your issue. It might be easier to use this plugin. You need to share more info that I can help you. Thank you ❤️
thank you limo great work
❤️
let's suppose if we have 10 input field than we need to create 10 keyboard copies as well. How can we use only one keyboard for this?
In this approach yes, I really recommend to use better prototyping tools if the design is really working with user input. Protopie can be a good option. thank you ❤️
For the space bar i just left the string " " empty and it worked, but i'm still figuring out how to go about the del button
Thanks for sharing ❤️ let me know if you figure it out how to deal with the delete button.
can you make one video for the keypad functionality.. i mean how can we prtotype keypad
Can you explain what you mean by keypad?
Great tutorial! Can you please in some of the next videos explain how to do auto layout and make all possible screens responsive? Thank you in advance!
Sure, thanks for sharing your thoughts with me. I will try to cover this topic. ❤️
I have the same problem😢 is there any videos which can help?❤
I can create an input text but it's a text variable... what if I want a user to type some numbers so I can use that value as number and not as text? For example: user types 100 that would represent 100usd and when clicking on a cta it's value in eur appears.
So, in that case, it is better to make a number variable, then when you want to set thebonteraction for the keys on the keyboard, asign nimbers to that variable instead of strings. Have you tried this solution? Let me know if it works.
@@KimoartcaveI should create a variable that counts how many numbers get pressed then.. on keypressed I should sum that number multiplied for the "weight" of the position so that the first one gets multiplied by 1 yhe second by 10 the third by 100 and so on
but it woukd not work since I would need to know in advance the final number 😢
It would be wonderful if you could demonstrate whether it is possible to create a messenger chat prototype using this principle.
It could be possible to make such a thing. However, in practice in real projects, I believe it is not very efficient to use figma for making such a prototype.
@@Kimoartcave Do you think there are better tools for this? ProtoPie?
The first question I usually ask myself when it comes to prototyping is that what is the purpose of prototyping? If you really need to design a prototype, that user can dynamicly send and receive a message (freely). It would be better to design your UI and use low code or no code app or web design tools. I do not have a certain name in mind for your use case, but you can do a quick search.
for some reason when i click on the keys of the keyboard, the letters don't next to eachother like "qweqw" but rather just a single letter and if i click on another letter the single letter just changes to the one i clicked on.
I am not sure where in the interaction you might make something different, but it is clear that instead of adding to the string you assign to text input, you are replacing its value. So you should say " $string to $string + "letter" ". Hope it helps. ❤️
Hello, can you please create a video on how to export text animation?
Hi there, there are many plugins for making and exporting animations. Can you maybe explain your use case ? 🤔
i'm finding it difficult to export my text animation form figma...i'd be glad if you can make a video on that please 😌😌 @@Kimoartcave
in the backspace i put the same text of the variant text-imput
Hello, how can you also show the different states of the input field e.g When the users click the input field a blinking cursor appears and the field's border is highlighted also the keyboard is moving in as the state of the input field changes to accept text.
looking for the same answer as well
It is tricky and requires more detail in the interaction. I recommend you use plugins to add text inputs with all functions. I am making a video about it.
Nice video, but with a newbee, do you think should I create this effect for some new projects or just create simple effect for action "typing"?
We have never made a prototype that text inout works and it is functional using FIgma. Making prototype should be cheap and affordable timewise . Hope I got your point correctly. thank you ♥
Sir thank you for this amazing knowledge. I have a question how to make this keyboard as a default keyboard mobile. Where need it how our flutter costumize keyboard should appear that made in figma
Hi there! Unfortunately it is not possible at the moment. We do not have text input with native keyboard. That is why I faked it. Hope we have such a feature soon.
How to do multiple text boxes with new ui?
why is it that there's no add variable botton on typography?
Figma new UI is slightly different. When you select the text layer in the design pannel on top next to the kayer properties, you can find apply the variable option. Let me know if you had problem finding it.
This is very good!
❤️
It have a limitation on the interactions condition action. Isnt that action is not a free action?
If you are talking about license, it might be that you need pro license.
Plz tell us about auto layout feature
I did, and I will do again, stay tuned ❤️
how can we create like this for a number input
I have another video for numpad. You can check that video. Let me know if you could not find it ❤️
Very nice, but it doesn't make sense to create a new model every time I need a new field.
That is true. There is a plugin I found recently that might help, I will share with you.
I have a problem, I don't get the conditional option, I don't know what mistake I may be making or if it's something in the app :(
Are you using free version of the Figma?
@@Kimoartcave yes :(
@emilybelleza4239 Sorry, it seems that it is only available in paid versions. Or you can make an educational account. Like students or other types. Have you tried it?
looking for a way where text typed in an interactive form field can be displayed in some other location on the page while typing
If you connect any text layer to the same variable that you store the value user enter, you can see it. Did you try this approach?
@@Kimoartcave yes i tried this and also got the desired effect, but connecting the text layer shows the layer content till such time the user types in the interactive form. example, i take the users address as a google map location and allow the user to add the premise name and the house/ apartment number in two separate forms. The use case is to display all these three as a concatenated text like {house_no},{premisename,{googlemap_location}. So am able to achieve this, but would like to hide the text variable from being displayed till such time the user types in the form field. Also the text should appear as the user types in the form fields. This i am unable to achieve and was hoping if you would provide a solution. Hope i am able to explain properly.. not sure if i can share the link of the prototype in some way for a better explanation
@arindamnag2430 thanks for explaining. I have difficulty understanding the details,despite your explaining. That's good. Idea to send me the link to your figma. However, the earliest I xan get back to this topic in 2 weeks. If it is still ok for you, send it to my email and we talk in 2 weeks. Let me know how you think.
@@Kimoartcave have sent you the detail by mail with the link to the prototype. Two weeks is fine for me.
thank you so much 😭😭😭😭😭😭😭
❤️❤️
Hi. Question : if I have an input field for entering information , the keyboard will move up. I get that. But how do I get that input form field ( to type my name , for example ) to move up , so the keyboard won’t block that field when it appears on the screen ?
I understand your concern. The keyboard is overlay, so it will be closed when the user clicks somewhere on the screen. But to keep the input always on top that the keyboard does not cover it, maybe you can add another interaction (link) to text the input layer (anchor link), which means when user click on text input, the screen will be scrolled automaticly until text input reach to top. I have to say I did not try this method. Let me know of it worked in your case.
Very good tutorial. But I wondering if the same mythology can be applied to Key/Gamepad... and it looks like there is an issue... When using keyboard it does not respect different inputs, no whether I use different variables (let say: type_email variable and for second field type_password variable) or your method shown above (mode 1, mode2) it treats them as one input field.. Is it a solution to solve that issue?
Maybe you need to have an active state for your text input, and one input can be in active state at the same time. In this way, you will only maniupulate one variable or a variable in specific mode so you can control the user interaction better. In general, it is better not to count on this solution for making a prototype, which is costly and not efficient!
I have a question: how to program the erase button
I am afraid to say so far I could not find any trick to make it work. Please let me know if you found a way.
how about for backspace key what kind of variable do i need to use to delete the word?
As I said in the video, so far I have no practical solution for it. I am pretty sure we will get more operators in the next Figma updates. let me know if you found any solution for it. thanks ❤
We can't do this in the free version :(
Yes unfortunatly. and still believe this is not an intuitive way to add text input to the design. Figma needs to work on it.
Hi, there it appear that there is a some missing font aper what is that mean, how do I fix it
You do not have the font used in design on your system, so replace it with any other font family and give it try another time. Thank you. ❤️
I want to add a "space" after every 4 letters. How can I do that?
There are some ootions in my mind. One js that you can make a logic to count the entered number by user, and then ad some empty chars every and each 4th digit. The other one is to have different variables and then connect the variables to different text field with space between them. What do you think?
it´s good but this function only works if you have Figma Pro
I presume your tutoring is for people with advanced knowledge of Figma, who are stuck on a few ways to get things done and not for a learner like me. If you can take time to explain the steps better that can help others. I appreciate you responding to me 👍🏽
I understand your point, in my latest videos I am trying to explain more and show the reasons and not just methods. I will try to share my knowledge in a more understandable way. thanks again♥
But it doesn't has a blinking state
That's something for you. You can make a blinker component and add it to this input field on active state..
It’s blowing my mind 🫠
❤️
Hi Kimo, I tried it but it only works for one key. That Is; if I'm to type Hi, only the H shows on the input field.
Please, how do I resolve this.
Hi there! Did you make interaction for each key individually? You can see how I did it in the video. Besides that, I need to know more about how you made your prototype to be able to figure out what can be the problem. Let me know if you couldn't find a solution. ❤️❤️
@@Kimoartcave Hi. I followed the exact step in the video though I created the input field from scratch and used the keyboard resource you provided.
Hi again Kimo 👋. I fixed it! I made a mistake while making the interaction on the keyboard. I didn't input the "write here" instead I just clicked on "text-input" string. Thanks alot. 😊
@@therealmarvell_ aha, nice. Good to hear it. ❤️
How about desktop
Hi Henry, here you can see same method just for Desktop. hope it helps.
Delete all : Create interaction
Select Key/gamepad in click to select it will say press key after selecting it hit backspace inside than
set a variable
click your text input than write inside to : " "
Now you have delete :]
Nice 👍👍
Thanks for sharing ❤️
do we need a condiotional here , like if else ? can you please tell
thanks for this video
how can you make ussd verification code with figma
We need to fake it if we use Figma, but I see that protopie has very cool stuff to make complex prototypes. Have you ever worked with it?
Saudações Frater Caciano, [ SUGESTÃO DE VÍDEO ]
Poderia produzir um vídeo sobre a Jurema sagrada? Sinto falta de conteúdos sobre essa erva/entidade, e gostaria de conhecê-la, você já teve experiências com esta medicina?
Qual a relação ela com as outras ervas?
P.P 🌹 🔺AD CRUCEM PER CRUCEM AD ROSAM PER ROSAM🔻
how to make glide keyboard?
Do you mean the glide effect that the user can type with draging the fingers on keys?
Can we make a calculator prototype in figma??????????? I will give you a challenge.what's your answer bro
Hi there, thanks for your comment.❤️ Indeed, it is good, Idea. I already have a video about that. Have you already checked it?
ua-cam.com/video/Fk2NBF-Le7U/v-deo.htmlsi=HzWmfVvZ2pXFToFp
❤
♥
Did you consider learners in your video, thumbs down for you
Please let me know what makes you think this way. I am trying to improve the videos. Thank you for feedback.
Thank you so much it helped me a lot 🥹👍💖
❤️❤️