Advanced prototyping in Figma: how to create a real Mobile Keyboard?
ฝัง
- เผยแพร่เมื่อ 11 ก.ค. 2024
- Ready to bring your designs to life? In this crash course, I will show you how to create a fully functional keyboard in Figma. we will do advanced prototyping, using variables Figma and Figma conditionals. These two features were released in config 2023. get sure to watch the video until the end. #figma
🔗Figma file: www.figma.com/community/file/...!
🔗Keyboard by Oscar:
www.figma.com/community/file/...)
🔗Text input by Kevin:
www.figma.com/community/file/...
⚠️ new update:
• Functional login form ...
📌 Timestamps:
0:00 - Start
1:11 - Prepare the keyboard and input
3:17 - Variable
3:35 - Prototype the keyboard
4:53 - Interaction of the keyboard
6:21 - Work on the text input
7:51 - Multiple text input
9:00 - 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
--------------------------------------------------------------------------------------------
My name is Kia, I am a UX generalist working for more than 10 years as a designer in the industry. here I am sharing my learnings related to UX and UI design, Figma tutorials, general design tips, and tricks. join me in this channel and let's learn together and become better designers. - วิทยาศาสตร์และเทคโนโลยี
![[TH] Esports World Cup : Knockout Stage Day 1](http://i.ytimg.com/vi/ES-vr-FarFg/mqdefault.jpg)
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 Awesome kimo , I’ve been waiting and thank you for helping out with this. 🙏🏿
❤❤ hope it was helpful.
thank you limo great work
❤️
This is very good!
❤️
thank you so much 😭😭😭😭😭😭😭
❤️❤️
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
in the backspace i put the same text of the variant text-imput
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 ❤️
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 ❤️
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?❤
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.
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. 😀
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.
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. 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!
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 ❤
it´s good but this function only works if you have Figma Pro
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.
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 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.
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
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 😢
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. ❤️
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.
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. ❤️
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?
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..
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
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?
th-cam.com/video/Fk2NBF-Le7U/w-d-xo.htmlsi=HzWmfVvZ2pXFToFp
It’s blowing my mind 🫠
❤️
how to make glide keyboard?
Do you mean the glide effect that the user can type with draging the fingers on keys?
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 🥹👍💖
❤️❤️