I am a full time backend engineer for 20 years. I use Figma (once a year) for drawing some basic UI instead of simple paint app/ppt. So I don't have need to subscribe to UX channels. However after viewing the video and the way it has no-nonsense talk, made me to subscribe. Thank you.
For the backspace to work what you have to to (which is reaally trivial..) is the following: Create a couple of text variables like value1, value2, value3, value4, value5 etc Create a boolean variable that you'll apply to the input field, filled true/false After that you'll have to create a conditional that will essentialy check if the text input is filled or not. You'll then have to store/circulate the values of the text variables every time you press a key. The last value will get the full text with the +letter and the previous value will be moved to one before. You'll have to have a value0 so that you can go back to the beginning. I think there is a plugin already for that that essentialy automates this for you but I don't remember what it's called
great! love the loop idea. personally i am not a fan of sitting for 10 minutes when it could be explained in under one. but your video was concise and informative. thank you. good luck to your channel.
Thank you this was so helpful! I'm having issues when prototyping though. I changed the input values and everything seems to work until I get to filled state. The text will not change and stays as the original text "Input value" like in the component. Please help :(
There is an old video I made on this: ruclips.net/video/3Ksvxuy4zKk/видео.html However, I wouldn't recommend Figma for such advanced prototyping that invovles typing.
Good day to you, I'm new to UX and I will like to confirm the keyboard for the input fields Will be designed by me or its automatically generated during the app development. Thank you
How do I rename the "Input Value" to the different texts for my fields? for some reason I can only enter one thing that is used across all entered fields. Thanks
@@DesignXstream If I change the text of the filled state of an instance of the component and then switch it back to the empty state for the demo, it doesn't show the changed text, but only "input entered". It only shows the changed text, if I start the demo with the filled state visible. But since I want to show how the field is filled, I have to start with the empty state. However, when I switch between states in the editor mode, the changes are kept. How can I keep the changes in the demo?
Ok, when you created the auto layout for the Enter Input box, my text is following with the length of the box. It stays in the center of the box, it doesn't stay in place.
Yes, this video was mainly focused on the how to give the variant properties and all. I've 1 other video which covers the error variant and animations related to it.
I have a question, though. I wanted my layout to not keep growing and shrinking with the change from default to error states. Any ideas on how to address this issue since the project is mobile-focused, and vertical alignment and experience are of utmost importance?
Maybe some issue with setting the right constraints. If you use auto layout and constraints correctly, your layout will not grow or shrink while changing variants.
📌Links
Join the community here 👉 bit.ly/DX-Community
Download the freebie here 👉 designxstream.gumroad.com/l/DX-Interactive-UI-Kit
I am a full time backend engineer for 20 years. I use Figma (once a year) for drawing some basic UI instead of simple paint app/ppt. So I don't have need to subscribe to UX channels. However after viewing the video and the way it has no-nonsense talk, made me to subscribe. Thank you.
That means a lot to me! Glad you liked buddy! Cheers ✌🏼 :)
You're a god among a sea of bad tutors. Thank you
Haha! Glad you found it helpful... Thanks buddy ✌🏼😄
After watching this video and interactive button i just had to subscribe because everything is soooooo clear✨✨ thank you so much ♥️☺️
That means a lot! Glad you are here ✌🏼 :)
Thank you so much!!
Out all videos I watched, you are the best and easy to follow!!
Keep it up!
Glad you found it informative! Cheers! ✌🏼
Hi! Amazing video and super clear! Can you link the video you mentioned at 7:19 where you can type real characters into an input field?
Hey! you can find that here: ruclips.net/video/3Ksvxuy4zKk/видео.html
Your video have been helping me sooo much! Thank youuu! You're the best!
I'm glad you found it helpful! Cheers ✌️
For the backspace to work what you have to to (which is reaally trivial..) is the following:
Create a couple of text variables like value1, value2, value3, value4, value5 etc
Create a boolean variable that you'll apply to the input field, filled true/false
After that you'll have to create a conditional that will essentialy check if the text input is filled or not. You'll then have to store/circulate the values of the text variables every time you press a key. The last value will get the full text with the +letter and the previous value will be moved to one before. You'll have to have a value0 so that you can go back to the beginning.
I think there is a plugin already for that that essentialy automates this for you but I don't remember what it's called
Wow! That is quite detailed... if you have a version of this then pls put the figma link for others it will be helpful!
good job explaining! simple and i can follow and upgrade my figma. TY!
Glad it helped! Cheers ✌🏼
But then how do you change the input label in the prototype?
يسعد امك اخيرا شرح 🙏🏼🤍
Glad you like it! Cheers ✌🏼
step-by-step description is excellent! I'm a new follower.
Glad you like it! Cheers! ✌🏼
Just subscribed, your videos are top notch brother!.
Thanks buddy... Cheers! ✌🏼
This content is gold. Already subscribed to this amazing channel
Cheers! I'm glad you found it informative 🙌🏼
Easy and simple. What a channel!
Glad you like it! Cheers ✌️
Great video, do you have a video showing how to input characters.
Here: ruclips.net/video/3Ksvxuy4zKk/видео.html
Very good explaining
Cheers ✌🏼
great! love the loop idea. personally i am not a fan of sitting for 10 minutes when it could be explained in under one. but your video was concise and informative. thank you. good luck to your channel.
Glad you found it informative! Cheers ✌🏼
Thank you for this video! Its really easy to follow, it saves me so much time! ❤
Glad to hear that! Cheers Nicca ✌🏼
Thank you this was so helpful! I'm having issues when prototyping though. I changed the input values and everything seems to work until I get to filled state. The text will not change and stays as the original text "Input value" like in the component. Please help :(
Did you add the text in filled state while you included it on the screen?
Good tutorial, wanted to send my students to. Its great figma stuff... only thing is that in Axure, this takes 15 seconds.. in Figma 15 minutes...
True that! Figma is not good at this detailed level of prototyping yet... hopefully they come up with these features.
Can you make a video about entering text in the input in prototyping?
There is an old video I made on this: ruclips.net/video/3Ksvxuy4zKk/видео.html
However, I wouldn't recommend Figma for such advanced prototyping that invovles typing.
great video brother
Glad you found it helpful! Cheers ✌🏼
you could have shown how add the error is placed. and the interactive one which which is shown in video cover.
This is the video I spoke about ruclips.net/video/3Ksvxuy4zKk/видео.html
Really helpful video. Thanks!
Glad it was helpful! Cheers! ✌🏼
Thank you, this was the best video on this!
Glad you think so! :)
Very helpful, thanks! Subscribed!
Glad you found it helpful! Cheers! ✌🏼
Huge thanks!
Hey Lydia, I'm glad you liked it! Cheers ✌🏼 :)
Good day to you, I'm new to UX and I will like to confirm the keyboard for the input fields Will be designed by me or its automatically generated during the app development. Thank you
Hey Abayomi, You can ignore keyboard for input fields that will be taken care in app development.
Wonderful thanks!
Cheers! ✌🏼
If you don't know anything at all, start at 1:15. If you know how to create assets 2:35
Thats definitely gonna help many! 😁👍🏽
But then how do you change the input label text in the prototype? It has to be specific to the what the input type is.
Yes, you can duplicate the component and change the value of the input text so that it reflects that text in filled state.
Great video, great explanation, great guy 👍
Thanks buddy! I'm glad you liked it ✌🏼
Im trying to look for the video about the advanced interaction where i can type in the box, please help.
There is no way to capture users input. But here is a work around method just for input: ruclips.net/video/3Ksvxuy4zKk/видео.html
what about typing in words? or Editing text in a field?
For that you need to try this version: ruclips.net/video/3Ksvxuy4zKk/видео.html
nice video! btw is this also work for search bar ?
Not appropriate for search you will have to modify it.
How do I rename the "Input Value" to the different texts for my fields? for some reason I can only enter one thing that is used across all entered fields.
Thanks
You just have to change the entered value for each input field and it will show different texts.
@@DesignXstream If I change the text of the filled state of an instance of the component and then switch it back to the empty state for the demo, it doesn't show the changed text, but only "input entered". It only shows the changed text, if I start the demo with the filled state visible. But since I want to show how the field is filled, I have to start with the empty state. However, when I switch between states in the editor mode, the changes are kept. How can I keep the changes in the demo?
i'm having difficulty finding the 'filled' interaction. can you guide me through?
Where exactly you lost the flow?
Awesome
Cheers ✌️
Ok, when you created the auto layout for the Enter Input box, my text is following with the length of the box. It stays in the center of the box, it doesn't stay in place.
You need to set the constraint to left.
Where is the video with characters that can be entered?
Here: ruclips.net/video/3Ksvxuy4zKk/видео.html
Can you please explain how to add pipe symbol
Hey Usha the pipe symbol is just a key on the keyboard above your Right shift key!
I was like "Oh such a good video!" and I did everything only to get to the end and he tell me it isnt functional 🙃
Sorry to disappoint you! Probably need to add a disclaimer that Figma is just a design tool 😅
what is pipe symbol and how to use it bro
It is just a symbol that you have along with the front slash key on your keyboard!
Awesome tutorial but the interaction isn't extended to the error variant.
Yes, this video was mainly focused on the how to give the variant properties and all. I've 1 other video which covers the error variant and animations related to it.
@@DesignXstream ok thank you. I would like to watch the video
@@sabinusohiagu3705 ruclips.net/video/3Ksvxuy4zKk/видео.html
ruclips.net/video/CFOIDPKE1bw/видео.html
These 2 video can be helpful.
I have a question, though.
I wanted my layout to not keep growing and shrinking with the change from default to error states.
Any ideas on how to address this issue since the project is mobile-focused, and vertical alignment and experience are of utmost importance?
Maybe some issue with setting the right constraints. If you use auto layout and constraints correctly, your layout will not grow or shrink while changing variants.
But we can't provide any input. any help?
For giving actual input you need to check out this video: ruclips.net/video/3Ksvxuy4zKk/видео.html
Buen video
Thank you ✌🏼
💯💯💯
How can I ask doubt personally I have one doubt
You can dm me at Instagram @designxstream
For anyone that needs the pipe symbol --> |
Awesome! I think this was much needed :D Pinning this comment! ✌🏼
This is nice and all but you cannot type in the field with this method.
if you want an field that you can type check this: ruclips.net/video/3Ksvxuy4zKk/видео.html
портфіль!
I can nor bare listening to this guy.
Same here and so I left the video immediately!
Part 2 of this ? How can I put Input Value ?
There is another video on how you can have input of all keyboard characters. But on this component it is not possible.