How to Design an Interactive Input Field in Figma | Beginners Tutorial

[@DesignXstream]

📌Links Join the community here 👉 bit.ly/DX-Community Download the freebie here 👉 designxstream.gumroad.com/l/DX-Interactive-UI-Kit

[@kvkrishnaprasad]

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.

[@DesignXstream]

That means a lot to me! Glad you liked buddy! Cheers ✌🏼 :)

[@noof7512]

Thank you so much!! Out all videos I watched, you are the best and easy to follow!! Keep it up!

[@DesignXstream]

Glad you found it informative! Cheers! ✌🏼

[@emberN]

good job explaining! simple and i can follow and upgrade my figma. TY!

[@demeurecorentin]

You're a god among a sea of bad tutors. Thank you

[@DesignXstream]

Haha! Glad you found it helpful... Thanks buddy ✌🏼😄

[@edithnjoku6498]

After watching this video and interactive button i just had to subscribe because everything is soooooo clear✨✨ thank you so much ♥️☺️

[@DesignXstream]

That means a lot! Glad you are here ✌🏼 :)

[@luisascolari2415]

Your video have been helping me sooo much! Thank youuu! You're the best!

[@DesignXstream]

I'm glad you found it helpful! Cheers ✌️

[@laurafraga3]

This content is gold. Already subscribed to this amazing channel

[@DesignXstream]

Cheers! I'm glad you found it informative 🙌🏼

[@dimitriszoitas4869]

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

[@DesignXstream]

Wow! That is quite detailed... if you have a version of this then pls put the figma link for others it will be helpful!

[@mosaletswalo7764]

Just subscribed, your videos are top notch brother!.

[@DesignXstream]

Thanks buddy... Cheers! ✌🏼

[@BobbyLaneProductions]

step-by-step description is excellent! I'm a new follower.

[@DesignXstream]

Glad you like it! Cheers! ✌🏼

[@josephibade1308]

Easy and simple. What a channel!

[@DesignXstream]

Glad you like it! Cheers ✌️

[@farahabdullah7845]

يسعد امك اخيرا شرح 🙏🏼🤍

[@DesignXstream]

Glad you like it! Cheers ✌🏼

[@chrispillay-h1b]

Very good explaining

[@DesignXstream]

Cheers ✌🏼

[@TheCds777]

But then how do you change the input label in the prototype?

[@Justin-eu1me]

Very helpful, thanks! Subscribed!

[@DesignXstream]

Glad you found it helpful! Cheers! ✌🏼

[@willzjayvee]

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.

[@DesignXstream]

Glad you found it informative! Cheers ✌🏼

[@nicca6643]

Thank you for this video! Its really easy to follow, it saves me so much time! ❤

[@DesignXstream]

Glad to hear that! Cheers Nicca ✌🏼

[@nwpolly]

Really helpful video. Thanks!

[@DesignXstream]

Glad it was helpful! Cheers! ✌🏼

[@WeTheLittlePeople]

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

[@DesignXstream]

True that! Figma is not good at this detailed level of prototyping yet... hopefully they come up with these features.

[@Slampty]

Great video, do you have a video showing how to input characters.

[@DesignXstream]

Here: kzbin.info/www/bejne/aXzWp6urrpmtgc0

[@BudPuen]

Wonderful thanks!

[@DesignXstream]

Cheers! ✌🏼

[@ajaym6795]

Great video, great explanation, great guy 👍

[@DesignXstream]

Thanks buddy! I'm glad you liked it ✌🏼

[@Pranavryan]

Can you make a video about entering text in the input in prototyping?

[@DesignXstream]

There is an old video I made on this: kzbin.info/www/bejne/aXzWp6urrpmtgc0 However, I wouldn't recommend Figma for such advanced prototyping that invovles typing.

[@geetsalame3457]

great video brother

[@DesignXstream]

Glad you found it helpful! Cheers ✌🏼

[@msj8285]

Thank you, this was the best video on this!

[@DesignXstream]

Glad you think so! :)

[@DigitalMediawithLydia]

Huge thanks!

[@DesignXstream]

Hey Lydia, I'm glad you liked it! Cheers ✌🏼 :)

[@achurro8]

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 :(

[@DesignXstream]

Did you add the text in filled state while you included it on the screen?

[@meegz149]

If you don't know anything at all, start at 1:15. If you know how to create assets 2:35

[@DesignXstream]

Thats definitely gonna help many! 😁👍🏽

[@hpgsleety4074]

Im trying to look for the video about the advanced interaction where i can type in the box, please help.

[@DesignXstream]

There is no way to capture users input. But here is a work around method just for input: kzbin.info/www/bejne/aXzWp6urrpmtgc0

[@DivyaKhicha-g3o]

you could have shown how add the error is placed. and the interactive one which which is shown in video cover.

[@DesignXstream]

This is the video I spoke about kzbin.info/www/bejne/aXzWp6urrpmtgc0

[@abayomiolabode3355]

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

[@DesignXstream]

Hey Abayomi, You can ignore keyboard for input fields that will be taken care in app development.

[@AleaDemetria]

nice video! btw is this also work for search bar ?

[@DesignXstream]

Not appropriate for search you will have to modify it.

[@TheCds777]

what about typing in words? or Editing text in a field?

[@DesignXstream]

For that you need to try this version: kzbin.info/www/bejne/aXzWp6urrpmtgc0

[@TheCds777]

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.

[@DesignXstream]

Yes, you can duplicate the component and change the value of the input text so that it reflects that text in filled state.

[@VishalSharma-x7m]

Awesome

[@DesignXstream]

Cheers ✌️

[@happyfeva9423]

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]

You just have to change the entered value for each input field and it will show different texts.

[@rasubue98]

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

[@conjj17]

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.

[@DesignXstream]

You need to set the constraint to left.

[@usha012]

Can you please explain how to add pipe symbol

[@DesignXstream]

Hey Usha the pipe symbol is just a key on the keyboard above your Right shift key!

[@anamikabera6164]

i'm having difficulty finding the 'filled' interaction. can you guide me through?

[@DesignXstream]

Where exactly you lost the flow?

[@Nova-yn3kq]

what is pipe symbol and how to use it bro

[@DesignXstream]

It is just a symbol that you have along with the front slash key on your keyboard!

[@sabinusohiagu3705]

Awesome tutorial but the interaction isn't extended to the error variant.

[@DesignXstream]

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.

[@sabinusohiagu3705]

@@DesignXstream ok thank you. I would like to watch the video

[@DesignXstream]

@@sabinusohiagu3705 kzbin.info/www/bejne/aXzWp6urrpmtgc0 kzbin.info/www/bejne/eXeyeneGgKpkmNk These 2 video can be helpful.

[@dianaayt]

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 🙃

[@DesignXstream]

Sorry to disappoint you! Probably need to add a disclaimer that Figma is just a design tool 😅

[@breng3168]

Buen video

[@DesignXstream]

Thank you ✌🏼

[@a-carvalho8751]

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?

[@DesignXstream]

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.

[@blackshirtdesign]

Where is the video with characters that can be entered?

[@DesignXstream]

Here: kzbin.info/www/bejne/aXzWp6urrpmtgc0

[@kashafnajam965]

But we can't provide any input. any help?

[@DesignXstream]

For giving actual input you need to check out this video: kzbin.info/www/bejne/aXzWp6urrpmtgc0

[@lissyjoy3424]

💯💯💯

[@cubensic]

For anyone that needs the pipe symbol --> |

[@DesignXstream]

Awesome! I think this was much needed :D Pinning this comment! ✌🏼

[@User-083-3]

How can I ask doubt personally I have one doubt

[@DesignXstream]

You can dm me at Instagram @designxstream

[@YouAlreadyKnowBabi]

This is nice and all but you cannot type in the field with this method.

[@DesignXstream]

if you want an field that you can type check this: kzbin.info/www/bejne/aXzWp6urrpmtgc0

[@RocketPajamas]

портфіль!

[@shapelessed]

I can nor bare listening to this guy.

[@DesignXstream]

Same here and so I left the video immediately!

[@sarthakhaldar9107]

Part 2 of this ? How can I put Input Value ?

[@DesignXstream]

There is another video on how you can have input of all keyboard characters. But on this component it is not possible.