The usecase you mentioned is possible using overlays and someone has already done it. You can find it here: www.figma.com/community/file/1140980341569112023
You can link every character variant with backspace keypress to the empty varaint. But it deletes characters from the right side so no very good to use.
Thank you a thousand times. I modified your component-- just for two letters- so when a user types an H they go to one frame, and when the type an A they go to another. To show that as they type they are filtering the list on the page. So instead of Key (H) Change To... I made Key (H) say Navigate to "Frame Name" and Key (A) Navigate to "Different Frame Name" So sweet. You are the best.
This file works only for monospace type fonts. When I created this Interactive components did not work with autolayout... but now if you build this same thing using autolayout you can use any font.
This is amazing. Just have a quick question. What was the logic/How were you able to make it so it automatically jumps to the next character frame after you start typing? Thanks!
Hey Kim, Each character is an interactive component so once an alphabet is typed it changes to a filled variant which no more has any interactions to it thus the next frame/interactive component picks up the next alphabet typed. If this is confusing you can check the file in the description below to understand it better! 👍🏼
Hey you can link the filled character variants with a backspace keypress to the empty one. But the issue is that it would start deleting characters from the beginning and that the reason I removed it.
Hi man!! May i ask you something? I need to make a functional prototype and in order to use a mobile keyboard or a numeric keypad and make it functional, is there a way to connect the keypad design to your component without a real keyboard? It’s for a touchscreen interface. Thanks so much! Your video is amazing!
Hey Alter, The usecase you mentioned is possible using overlays and someone has already done it. You can find it here: www.figma.com/community/file/1140980341569112023
@@simransharma8172 Each character is an interactive component so once an alphabet is typed it changes to a filled variant that no more has any interaction triggers with it thus the next Layer (interactive component) picks up the priority for an interaction trigger.
si copio tu archivo a un archivo de figma que ya tenia para usar los iput se pierden las interacciones eso se puede solucionar es decir copiarlo con todas las interacciones a las letras ?
Este es un archivo habilitado para componentes interactivos que es una característica aún en beta. Debe registrarse en el programa beta, luego puede duplicar fácilmente el archivo y copiarlo en cualquier proyecto que desee.
You can select all character variants and add a key > backspace to default variant. But this will clear the text from the starting. Due to this odd behaviour in Figma I've not included delete.
That was a great video. Is there any way to create a "fully functional" input field in figma? I'm new to the UX/UI world and I just checked a lot of websites to find a solution for this but every input field they suggested had its own problem. Yours doesn't cover backspace, and I found another one which can't enable the designer to set character limit (e.g for limiting the user to enter only 11 numbers for phone number). Do you know any solution to this problem? Is it necessary at all to design such flawless input field? I'd be glad if you respond.
Hey Mahdi, Input field is a very basic feature that a prototyping tool must have and Figma doesn't have so you find a lot of workaround solutions on the internet. however, to answer your question there is no perfect solution for an input field. A perfect solution would only come in when Figma introduces this as an in-built feature which I believe they will do it soon since they are constantly improving their prototyping feature. But until then if you are really looking for this feature then you must look into advanced prototyping tools like Protopie, UXPin, Framer, etc. These have such basic input fields and checkbox etc all in-built you just have to drag and drop no need of such messy workarounds.
@@DesignXstream hey man. I just tried protopie thanks to your advice and it was magnificent. Nevertheless, it's not free and that's the biggest weakness. Do you know any similar app which is free and has similar features?
I had a issue about prototyping like how can we assign buttons of capital letter and small letter means I am confused how can I do it because while setting key as trigger we use same button twice
@@DesignXstream I can't because figma assigns same button to both. For example if I want to assign button for 'a' it will assign A button.. No issue but for 'A' how can I? Because I tried to by keeping caps lock on but no response
I have tried it, but on the computer I can write and when I try the prototype on the cell phone it does not let me write, only the cursor appears. I need help
I tried adding a backspace and it works but the issue is it deletes characters from the beginning which was strange so I removed it! Now that they have added auto layout with interactive components let me check if there is a way to do this!
@@DesignXstream Hi! First of all, thank you for the fantastic solve for an input field; it's great! Second, I know you said the backspace fix you came up with deletes from the left, but could you still explain how you do that function. I would rather have the text delete from the left than have to replace my input box each time I run the prototype (replacing it because I can't get rid of the writing that was inputted). Would love to know how you backspace. Thanks!
@@reganforer7900 Hey, for backspace just add a new keypad interaction(on press of 'backspace') from each character to the empty state. This will enable you to delete characters. But Figma takes keypress in the order of layers so the characters start deleting from the left to right.
@@DesignXstreamwill you please elaborate the whole process of prototype of backspace how to perform. It would be a great favour of yours if you help me with the backspace
@@satyamkumar-hx2ey You need to add a new key interaction for all the alphabets. The key should be 'Backspace' and change to > the empty character variant. You need to do this for all the alphabets.
If you increase text size you need to increase the component width as well. So you need to select all component variants and increase the width then also increase the gap in between the individual components in the main input field component,
@@DesignXstream i just have one input form but the others you have in the video are not there. I have looked into the comments and you mentioned trying the beta but even there on the desktop beta version i can see them. Did i missed something completly?
I think I understood the issue now! The link in the description was wrong. I've updated the new link. Try it now and also thanks for pointing out the issue 👍🏼
@@DesignXstream Ok, thanks for the help :) it works now! but i have an issue when i click on the field the blincking cursor runs from left to right through all the 26 places rather than stay in the front. Also the backspace does not work at all as said in the video if it would remove from left to right i would be ok with but it just does nothing.
@@pedalpatrol Looks like some issue with the new auto layout update from Figma. I've made some changed and updated the file. Try to duplicate the file again and give a try!
Hi, really amazing work! How could one adjust the font and the text input fields accordingly? For me I get lots of inconsistencies changing fonts, resulting in an uneven spacing between the single characters. Any solution/ advice for that?
Yes this is the reason I used a monotype font as these have characters with equal spacing. The reason I did this was becoz autolayout had issues inside interactive components. But now I think you can convert the charcters group into an autolayout and try. I think it should work.
Thank you for the video! When I'm trying to do this myself (and looking at your file) my text always starts from the right instead of the left?! Tried so many things and it always does that. Any ideas? I can't find any kind of difference in the setup to your file.
Hey Henrik, The order in which the interaction trigger take the preference is in the exact order of the layers. So, try to manually reverse the order of layers or use any plugin to reverse the layer order and it should work as you expect.
@@DesignXstream Thanks a lot for the quick answer! Got it working now with your tip. And boy do I feel silly, because of course it does. I was mostly playing around with auto-layout, and when I didn't I probably had them in the wrong order. I figured it wouldn't make a difference, but the top layer with AL will always be to the far right as is the nature of it.
@@henrikvarhall7693 I don't remember if I mentioned it in the video but I actually started creating this using Auto Layout but then faced this issue with order of layers and thus had to scrap the AL structure 😅 If this could work with AL then the limitaiton of monospace fonts also can be solved.
@@DesignXstream Hehe, don't know if you said it either, I may just have missed it. Anyway thanks again for the help and here's hoping that it will be possible with AL in the future (or something even better).
@@henrikvarhall7693 Frankly, this basic things like input field should be a basic drag and drop thing in any prototyping tool... so lets hope for that :D Pls do check our instagram page for more design bites & tips: instagram.com/DesignXstream
Hey man, great video. Kudos. Just a question, while prototyping, if we enter a name in the field and then we want to see it in a different place the characters we have typed, could we do prototyping like that?
There is no direct way to do that but as a hack you can just make this component bigger and make sure the click to activate the text field is where you want it and the inner character fields you could place it anywhere else on the screen where you want to see it.
You can have it delete character from left to right which looks odd. And then you can start typing again from left to right as usual. For this you need to select all the character variants and add an Interaction > Keypad > Backspace ---> Change to 'Default'
@@DesignXstream Thanks for the quick response. But Can you discrete the part "select all the character variants and add an Interaction" ?? I figured out how to add a Interaction, but if I just Add "Keypad > Backspace ---> Change to 'Default" nothing happens :(
This file works only for monospace type fonts. When I created this Interactive components did not work with autolayout... but now if you build this same thing using autolayout you can use any font.
Hey Yoo-Jin, Figma is currently storing all the state of screens in memory so even if you goto other screen and come back it will remain as it is. And I was not able to find a way to refresh it. Will let you know if I find any work around for it.
I assume that you are typing with a desktop keyboard in a mobile prototype on your monitor, since I don't see a keyboard on your mobile screen. If I'm to run the prototype on a mobile device, how do I trigger mobile keyboard to appear and tie it to the key/gamepad interaction?
@ 4:27 “and then you jump” how do you jump? Please explain, it’s not a tutorial if you’re just explaining what is happening not how what is happening is happening. Obviously I know what is happening, but “how” is the question here
Hey! Figma gives priority to interaction tiggers based on the order on the layer at the left. So in the video at 4:27 when the keystroke is given for Layer "1" it will change to a state where it no more has any triggers so the priority now goes to Layer "2" and so on.
Hey, great idea! Maybe I made some mistake, but I duplicated your file and there are only demo screen and text field variants, no letters and it doesn't work on Presentation mode. Do I do something wrong?
That is really great congratulations on pushing this interaction, was much needed. But I am just wondering, would there be a way to actually save the data of the value frame to use it somewhere else in your Figma file? Like clicking on the next button would enable you to display a resume of the user input. This would be really amazing.
Hey, Glad you enjoyed the video! And saving the data and all would need Figma to create new APIs and all for it which I think they will not do anytime soon as their current focus is only and only on improving design! However, there are plugins to do this. If I'm not wrong Anima plugin has a forms feature which work as data forms!
Great Effort Man to come up with this solution. Also, I have Adobe XD related question, I have a Free version, once I use to have an unlimited amount of sharing options of Prototype, but now it says Upgrade to share..., what to do now?
Thanks Rajkumar, I use the All Apps Creative cloud so haven't faced sharing issues but yah I just checked and link sharing in the starter plan is limited to 1. So there isn't anything we could do I suppose!
@@RajkumarSingh-dq8be Yeah totally agree with that... limiting link sharing to just 1 is too bad! Figma is awesome in that terms! I recently came across a tool called PenPot which is open source and is getting pretty good with features! You can check it in our previous videos!
Hey, first of all, thank you for this amazing work! Lifesaver. I duplicated your plugin and used it in one file, it worked like a charm. But I tried using it in another file but when I type two different letters, the previous letter gets replaced by the new letter. That doesn't happen when I type the same letter multiple times. I'm lost!!!!
You can duplicate the Figma file from here:
www.figma.com/community/file/949319444934680661/Functional-Input-Field-%7C-Interactive-Components-Demo
@Mauricio Marvin instablaster :)
@Mauricio Marvin You are welcome :D
Sadly your file work for BETA figma only :"(
I tried making a duplicate and it doesn't seem to work for me. Anyone else run into this issue?
Dude that’s a crazy amount of work. They really need to implement actual text input fields lol
Haha! totally agree. This was just a fun experiment. And yes input field is one of the most common element in any app Figma should add this in-built.
@@DesignXstream -Totally
@@DesignXstream 💯
agree man
So true and it is so silly it hasn't been implemented yet. Surely that is one of the most requested things for figma right!?!?
Best tutorial I found, thank you!
Cheers! ✌️ I'm glad you liked it!
bro, you are great. By seeing your work , i love you. Its really and very very very very nice. At last thank you for providing us the file.
Hey Bishal, I'm glad you liked it! Also saw your message on the community. Thanks for the feedback ✌🏼
@@DesignXstream I want to be in you member. Plz allow me🥺
@@bishal.dangol You are already a memeber on the community.
Thank you so much! This one helped me a lot. I've been struggling this whole time how create one, but you save me with this. Thank you!
Cheers! ✌🏼
Oh my God. never think in my mind this method could be happen. you are very clever bro!!
Hey Susi, Thanks a lot! 😃 I was just experimenting and figured this out!
Pls do follow our instagram: instagram.com/DesignXstream for daily updates!
Great! I need it to implement input fields in my prototype! Thanks a lot.
Glad it was helpful! ✌🏼
This is incredibly helpful! It works so well when interacting from a laptop, but when testing on an iPhone, the keyboard does not show up. Any tips?
The usecase you mentioned is possible using overlays and someone has already done it. You can find it here: www.figma.com/community/file/1140980341569112023
Thank you! @@DesignXstream
Very Nice Work!!! You are crazy man!!!
Glad you liked it! Cheers ✌🏼
I can not thank you enough for this and also make the file public
Glad you found it useful! Cheers ✌🏼 :)
Do follow our page on instagram: instagram.com/designxstream/
great work bro, this will really help me out for making my prototype more intresting.
Awesome, Glad to know that! Cheers ✌🏼
This is awesome! Thank you for sharing. Definitely going to use this in the future and incorporate into past designs
Glad you liked it! Cheers Amanda ✌🏼
Yo, this is super creative! Well done.
Glad you like it! :)
this is so good! I'm trying to design something like this on an open search field variant. hoping this helps
Cheers ✌🏼
how could backspace be implemented in this template?
You can link every character variant with backspace keypress to the empty varaint. But it deletes characters from the right side so no very good to use.
how exactly could I implement it in a pre-designed existing input field? I am having trouble implementing in my existing design
You need to copy the whole component set into your working file then you can use it!
Thank you a thousand times. I modified your component-- just for two letters- so when a user types an H they go to one frame, and when the type an A they go to another. To show that as they type they are filtering the list on the page. So instead of Key (H) Change To... I made Key (H) say Navigate to "Frame Name" and Key (A) Navigate to "Different Frame Name" So sweet. You are the best.
That's an interesting application! 👍🏼
Thanks for the resource file ☺️
You're welcome! ✌🏼
This is wonderful.Thank you so much..... keep teaching us with new ideas....😊👍🏻👍🏻
Glad you enjoy the content! Cheers ✌🏼
hey bro please make more figma videos like these
Sure bro! More Figma videos on the way 🤘🏼😊
Yes please. I love them and subbed!
Thank you bro! Just what I needed
Glad you found it helpful :)
its kind of crazy!and absolutely amazing!thanks a lot
Glad yu liked it :)
can we change font, if yes. how?
This file works only for monospace type fonts. When I created this Interactive components did not work with autolayout... but now if you build this same thing using autolayout you can use any font.
@@DesignXstream thank you for the help :)
There is one problem how to use back space in text field.
This is amazing. Just have a quick question. What was the logic/How were you able to make it so it automatically jumps to the next character frame after you start typing? Thanks!
Hey Kim, Each character is an interactive component so once an alphabet is typed it changes to a filled variant which no more has any interactions to it thus the next frame/interactive component picks up the next alphabet typed.
If this is confusing you can check the file in the description below to understand it better! 👍🏼
How would you emulate backspace or erasing characters?
Hey you can link the filled character variants with a backspace keypress to the empty one. But the issue is that it would start deleting characters from the beginning and that the reason I removed it.
Great job!Thanks for the tutorial :D
Glad you liked it! Cheers ✌🏼
Broo damm 🔥🔥
🤩🤩
can we change the font ?
This is an old layout without auto layout. If you can apply autolayout and implement it you will be able to change the font.
You saved my time!
How did you create value box inside the text box . ?
Here it is multiple label which created the full value box.
any kind of flow for the backspace? :)
Backspace can be applied but it can only delete characters from right to left which looks weird.
Hi man!! May i ask you something? I need to make a functional prototype and in order to use a mobile keyboard or a numeric keypad and make it functional, is there a way to connect the keypad design to your component without a real keyboard? It’s for a touchscreen interface. Thanks so much! Your video is amazing!
Hey Alter, The usecase you mentioned is possible using overlays and someone has already done it. You can find it here: www.figma.com/community/file/1140980341569112023
@@DesignXstream thank you so much! i will look on that!
Can you please tell me how you created the value component
Which part of it? Can you elaborate your query.
In the value field when we type a character the blinking cursor moves forward. how?
@@simransharma8172 Each character is an interactive component so once an alphabet is typed it changes to a filled variant that no more has any interaction triggers with it thus the next Layer (interactive component) picks up the priority for an interaction trigger.
Thanks
si copio tu archivo a un archivo de figma que ya tenia para usar los iput se pierden las interacciones eso se puede solucionar es decir copiarlo con todas las interacciones a las letras ?
Este es un archivo habilitado para componentes interactivos que es una característica aún en beta. Debe registrarse en el programa beta, luego puede duplicar fácilmente el archivo y copiarlo en cualquier proyecto que desee.
How to clear the text? could you please help me out.
Thank you and very kind of you
You can select all character variants and add a key > backspace to default variant. But this will clear the text from the starting. Due to this odd behaviour in Figma I've not included delete.
That was a great video. Is there any way to create a "fully functional" input field in figma? I'm new to the UX/UI world and I just checked a lot of websites to find a solution for this but every input field they suggested had its own problem. Yours doesn't cover backspace, and I found another one which can't enable the designer to set character limit (e.g for limiting the user to enter only 11 numbers for phone number). Do you know any solution to this problem? Is it necessary at all to design such flawless input field?
I'd be glad if you respond.
Hey Mahdi, Input field is a very basic feature that a prototyping tool must have and Figma doesn't have so you find a lot of workaround solutions on the internet. however, to answer your question there is no perfect solution for an input field. A perfect solution would only come in when Figma introduces this as an in-built feature which I believe they will do it soon since they are constantly improving their prototyping feature.
But until then if you are really looking for this feature then you must look into advanced prototyping tools like Protopie, UXPin, Framer, etc. These have such basic input fields and checkbox etc all in-built you just have to drag and drop no need of such messy workarounds.
@@DesignXstream Thanks man. You did a great load of help. I appreciate it.
@@DesignXstream hey man. I just tried protopie thanks to your advice and it was magnificent. Nevertheless, it's not free and that's the biggest weakness. Do you know any similar app which is free and has similar features?
@@mahdip633 No advanced prototpying tools is totally free. But you can try FRAMER I think they has a free plan with a project limit of 2.
@@DesignXstream that's sad, but thanks anyway.
We can prototype from letter to frame setting key as backspace
Yes you can!
I had a issue about prototyping like how can we assign buttons of capital letter and small letter means I am confused how can I do it because while setting key as trigger we use same button twice
You achieve that by assigning 2 triggers one with small letter and one with the same capital letter!
@@DesignXstream I can't because figma assigns same button to both. For example if I want to assign button for 'a' it will assign A button.. No issue but for 'A' how can I? Because I tried to by keeping caps lock on but no response
I have tried it, but on the computer I can write and when I try the prototype on the cell phone it does not let me write, only the cursor appears. I need help
Hey Sandra, Unfortunately this hack works only on a computer! Figma doesn't allow keystroke trigger on mobile.
Thank u so much for this, so amazing !! Do you have a tip for including a backspace maybe? Tried a lot :(
I tried adding a backspace and it works but the issue is it deletes characters from the beginning which was strange so I removed it! Now that they have added auto layout with interactive components let me check if there is a way to do this!
@@DesignXstream would be great - thank you!!!
@@DesignXstream Hi! First of all, thank you for the fantastic solve for an input field; it's great!
Second, I know you said the backspace fix you came up with deletes from the left, but could you still explain how you do that function. I would rather have the text delete from the left than have to replace my input box each time I run the prototype (replacing it because I can't get rid of the writing that was inputted).
Would love to know how you backspace. Thanks!
@@reganforer7900 Hey, for backspace just add a new keypad interaction(on press of 'backspace') from each character to the empty state. This will enable you to delete characters. But Figma takes keypress in the order of layers so the characters start deleting from the left to right.
Hi. Thank you so much for this. I used the file but that backspace option didn’t work at all
The backspace doesnt work as we expect.. you can link all the characters with backspace keypress to empty and try!
@@DesignXstreamwill you please elaborate the whole process of prototype of backspace how to perform. It would be a great favour of yours if you help me with the backspace
@@satyamkumar-hx2ey You need to add a new key interaction for all the alphabets. The key should be 'Backspace' and change to > the empty character variant. You need to do this for all the alphabets.
@@DesignXstream can you add the functionality of backspace? I have tried but it's not working
Could u please tell how i can change text for bigger? When i change - dont have space in text
If you increase text size you need to increase the component width as well. So you need to select all component variants and increase the width then also increase the gap in between the individual components in the main input field component,
@@DesignXstream If it possible, could u please made this and sent link? I really can't, try many times....
I am super lost i have duplicated this file but cant finde the stuff in my file you are showing here. What i have done wrong?
The file is empty?
@@DesignXstream i just have one input form but the others you have in the video are not there. I have looked into the comments and you mentioned trying the beta but even there on the desktop beta version i can see them. Did i missed something completly?
I think I understood the issue now! The link in the description was wrong. I've updated the new link. Try it now and also thanks for pointing out the issue 👍🏼
@@DesignXstream Ok, thanks for the help :) it works now! but i have an issue when i click on the field the blincking cursor runs from left to right through all the 26 places rather than stay in the front. Also the backspace does not work at all as said in the video if it would remove from left to right i would be ok with but it just does nothing.
@@pedalpatrol Looks like some issue with the new auto layout update from Figma. I've made some changed and updated the file. Try to duplicate the file again and give a try!
Hi, really amazing work! How could one adjust the font and the text input fields accordingly? For me I get lots of inconsistencies changing fonts, resulting in an uneven spacing between the single characters. Any solution/ advice for that?
Yes this is the reason I used a monotype font as these have characters with equal spacing. The reason I did this was becoz autolayout had issues inside interactive components. But now I think you can convert the charcters group into an autolayout and try. I think it should work.
With variables has it become little easy?
Yes its way easier now. I will try to make a video on this.
Thank you for the video! When I'm trying to do this myself (and looking at your file) my text always starts from the right instead of the left?! Tried so many things and it always does that. Any ideas? I can't find any kind of difference in the setup to your file.
Hey Henrik, The order in which the interaction trigger take the preference is in the exact order of the layers. So, try to manually reverse the order of layers or use any plugin to reverse the layer order and it should work as you expect.
@@DesignXstream Thanks a lot for the quick answer! Got it working now with your tip.
And boy do I feel silly, because of course it does. I was mostly playing around with auto-layout, and when I didn't I probably had them in the wrong order. I figured it wouldn't make a difference, but the top layer with AL will always be to the far right as is the nature of it.
@@henrikvarhall7693 I don't remember if I mentioned it in the video but I actually started creating this using Auto Layout but then faced this issue with order of layers and thus had to scrap the AL structure 😅
If this could work with AL then the limitaiton of monospace fonts also can be solved.
@@DesignXstream Hehe, don't know if you said it either, I may just have missed it. Anyway thanks again for the help and here's hoping that it will be possible with AL in the future (or something even better).
@@henrikvarhall7693 Frankly, this basic things like input field should be a basic drag and drop thing in any prototyping tool... so lets hope for that :D
Pls do check our instagram page for more design bites & tips: instagram.com/DesignXstream
Hey man, great video. Kudos. Just a question, while prototyping, if we enter a name in the field and then we want to see it in a different place the characters we have typed, could we do prototyping like that?
There is no direct way to do that but as a hack you can just make this component bigger and make sure the click to activate the text field is where you want it and the inner character fields you could place it anywhere else on the screen where you want to see it.
Chick question: How do you delete the Text after typing it in? Don't matter if it deletes all at ones, or letter by letter
You can have it delete character from left to right which looks odd. And then you can start typing again from left to right as usual. For this you need to select all the character variants and add an Interaction > Keypad > Backspace ---> Change to 'Default'
@@DesignXstream Thanks for the quick response. But Can you discrete the part "select all the character variants and add an Interaction" ?? I figured out how to add a Interaction, but if I just Add "Keypad > Backspace ---> Change to 'Default" nothing happens :(
@@deanschwarz6575 Ping me on Instagram @designxstream and send me your figma file link I can show!
Thanks a lot for the vid and file!
Any ways can I change the font-family or size fast?
This file works only for monospace type fonts. When I created this Interactive components did not work with autolayout... but now if you build this same thing using autolayout you can use any font.
@@DesignXstream Thanks a lot
How this input being refreshed when I visit to other screens after added text?
Hey Yoo-Jin, Figma is currently storing all the state of screens in memory so even if you goto other screen and come back it will remain as it is. And I was not able to find a way to refresh it. Will let you know if I find any work around for it.
I assume that you are typing with a desktop keyboard in a mobile prototype on your monitor, since I don't see a keyboard on your mobile screen. If I'm to run the prototype on a mobile device, how do I trigger mobile keyboard to appear and tie it to the key/gamepad interaction?
Yes it doesn't work on mobile! Only works on desktop as key/gamepad takes only input stroke of a physical keyboard!
It is an amazing vedio
I'm trying to duplicate this but all my cursors are active all at once, is there a way to turn them on one by one?
Only when you click on an input field it gets activated and then you need to press Enter again for the cursor to turn off.
@ 4:27 “and then you jump” how do you jump? Please explain, it’s not a tutorial if you’re just explaining what is happening not how what is happening is happening. Obviously I know what is happening, but “how” is the question here
Hey! Figma gives priority to interaction tiggers based on the order on the layer at the left. So in the video at 4:27 when the keystroke is given for Layer "1" it will change to a state where it no more has any triggers so the priority now goes to Layer "2" and so on.
Is there a way you can do this with using mobile keyboard typing?
There is no workaround for keyboard on mobile yet!
@@DesignXstream that's a bummer :(
thanks but can you add back space? i tried different methods but failed :(
Hey we can add a backspace but it would behave oddly as it would delete character from left to right instead of right to left.
Hey, great idea! Maybe I made some mistake, but I duplicated your file and there are only demo screen and text field variants, no letters and it doesn't work on Presentation mode. Do I do something wrong?
Hey Zamaley, I hope you are signed up for the beta program. As this works only in the beta version! Hopefully this feature will be public soon.
@@DesignXstream Oh, right, this is the answer, thank you man! Great video, thank you for inspiration!
Y si quiero hacer un teclado con esta misma funcionalidad, como hago?
Are you looking for this: www.figma.com/community/file/959116162910757460
You are crazy man : )
Thanks mate :)
That is really great congratulations on pushing this interaction, was much needed. But I am just wondering, would there be a way to actually save the data of the value frame to use it somewhere else in your Figma file? Like clicking on the next button would enable you to display a resume of the user input. This would be really amazing.
Hey, Glad you enjoyed the video! And saving the data and all would need Figma to create new APIs and all for it which I think they will not do anytime soon as their current focus is only and only on improving design!
However, there are plugins to do this. If I'm not wrong Anima plugin has a forms feature which work as data forms!
This guy knows too much!
😄🙏🏼
very impressive
Glad yu liked it! Cheers ✌🏼
@@DesignXstream i have used your project in my design as well....
And it really work good.
Great solution!! Thanks for sharing
Hey Fernanda, Glad you liked it! :)
Man, this is insane! I got tired just watching the how to video.
haha! :D thanks mate!
keep it up
Cheers ✌🏼
Great Effort Man to come up with this solution.
Also, I have Adobe XD related question, I have a Free version, once I use to have an unlimited amount of sharing options of Prototype, but now it says Upgrade to share..., what to do now?
Thanks Rajkumar, I use the All Apps Creative cloud so haven't faced sharing issues but yah I just checked and link sharing in the starter plan is limited to 1. So there isn't anything we could do I suppose!
@@DesignXstream Thank you for your Reply. Adobe must give some relief thank Figma is there.
@@RajkumarSingh-dq8be Yeah totally agree with that... limiting link sharing to just 1 is too bad! Figma is awesome in that terms!
I recently came across a tool called PenPot which is open source and is getting pretty good with features! You can check it in our previous videos!
Hey, first of all, thank you for this amazing work! Lifesaver.
I duplicated your plugin and used it in one file, it worked like a charm. But I tried using it in another file but when I type two different letters, the previous letter gets replaced by the new letter. That doesn't happen when I type the same letter multiple times.
I'm lost!!!!
I've copied the components to a new file and it worked fine. If you can dm me your figma file link on insta @designxstream I can have a look at it.
amazing
Thank you! Cheers!
I am subscribing you bro
Cheers bro!🤘🏼 Glad you enjoyed the video :)
This is XDs edge versus Figma when it comes to prototyping
How is XD better in this scenario?
Figma needs to work on a better way to prototype form inputs. This is way too much work for such a small interaction.
yah that's true! Inputs are a basic thing in prototyping. Hope they add something soon!
Have disabled the blinking cursor and it's better at look
yahh that's nice.
Tell me you don't have a girlfriend without telling me you don't have a girlfriend.
Jk everyone, jk.
Incredible work bruh, cheers.
Haha! Though yu kidding that was spot on buddy! 😂
can you send a duplicate file figma again ?
The link is in the description. Any issue with it?
@@DesignXstream oh i already find u project in community, but i cant use ur duplicate link in youtube. Thank u btw.
@@berlinmitraputra5760 Okay thanks i'll check the issue! 👍🏼
Bro backspace is not working
Like i mentioned in the video backspace is a limitation in this method! Figma doesn't allow to use backspace to remove characters from right to left.
You are a fucking machine!!!! Thanks :)
Haha! Cheers ✌🏼 :)
I need breef explanation video please bro........?! Im requesting you brooo
Bro this is an old video! With latest variables feature this is very easy to do. I will try to make a video on the new version.
this is not hard at all, look at those crazy lines!
haha! :D
Qué bolonqui
You the worst teacher have ever seen
Where have you seen me? 👀