Input Field Interaction using Interactive Components in Figma | Input Field Figma - Figma Text Field
HTML-код
- Опубликовано: 12 апр 2021
- If you're interested to find out more about input field figma, this is right video for you. And, if you want to know more about us, Please visit: 👉 essentialwebapps.com/
=====================
Courses
-------------
Ultimate Figma Megacourse: UI/UX Design Beginner To Expert
👉 rb.gy/odk72
-------------
Learn Figma for UI UX Design Within 1 Hour In 2023
👉 rb.gy/omoor
=====================
Our video is about "input field figma" a subject similar to:
- text input figma
- figma text input
- figma text
We have actually made this video on figma text input for better understanding for you, so that you can easily understand this topic and you can use it in your projects.
__________________________________________
Our Products
----------------------
Check our all Premium and Free WordPress Themes -
essentialwebapps.com/wordpres...
__________________________________________
You came to the ideal location if you discovered us from an online search regarding input field figma. Then we thank you for that and we hope you will find our video on text input figma easy.
#Figma #text #inputfield
Please Visit Our Blog:
essentialwebapps.com/blog/
Follow us,
Pinterest: / essentialwebapps
Instagram: / essentialwebapps
Facebook: / essentialwebapp
Twitter: / essentialwa
If you enjoy the tutorial video, you can help us with a LIKE as well as give your feedback in the comment section. We will greatly appreciate it if you share this " Input Field Figma - Figma Text Field " on Facebook. Your share can help other people to learn Designing better UI using Figma.
Music by MBB / mbbmusic
// DISCLAIMER
▸ This is NOT a sponsored video.
▸ Some affiliate links are used, which means that I earn a small commission if you click the link and make a purchase. It will not cost you extra but help me create more content for our Audience.
▸ I only recommend things I have had great success with.
🎯 Check out our latest Ultimate Figma Mega-Course ➡️ rb.gy/odk72
Very nice tutorial!! Unfortunately a bit too fast for beginners when showcasing the different variants. Had a hard time following, especially when you were showing how to get that illusion of typing effect.
Thanks a lot for your comment and thanks for the advice. We will keep it in mind for our future videos. I hope you will subscribe. 😊
@@essentialwebapps I did! ☺
what if you slow the speed down ?
Totally agreed it’s so fast that I need to look for another video now
this was a clever way to solve it and a simple explanation, thank you
Cool video guys
I was looking for this solution for a project I'm currently working on
Thank you
Thanks for your words. Good to know it helped 🙂. We appreciate you to Subscribe and keep in touch with us 🙏
Awesome explanation guys. Why can’t you start create a course on figma?? It would be cool
Hi Ram,
Thanks for your kind words and suggestion 🙂. Keep in touch and let's hope we will prepare more videos for you. And don't forget subscribe and share if not already 🙏
This is a really awesome tutorial!
Thanks a lot for your good words. I hope you will subscribe for future videos. 😊
Great video. Is it possible to create a kind of "listbox" on figma so that it will population as inputs are put in this form?
How did you match the value to label when its focused? Like having Email for example shown on the label on top of the field?
Great! Thanks!!!!
Thanks a lot. I hope you will subscribe. 😊
What help me was after i made all of the rectangles in that one frame, I dragged all of the rectangles outside of the main frame and it created its own frames/variants. that gave me the option to then select the "after delay" button. hope this helps
Thanks a lot for your valuable tips. Really appreciate. 😊
I really appreciate that helped me a lot.
Awesome share. Answerd lot of questions.
Glad it was helpful! 😊 I hope you will subscribe...
Awesome
Very useful tutorial. I am trying this but i notice the prototype is not picking the variant, it's rather picking each element in the variant and the prototype is not working. I can see "change to" in the prototype options in this video, but i can't see that option here. Why?
Thanks a lot for the comment. I think you should enlist as a beta program in Figma. I am enlisted as a beta in Figma. Otherwise, I have tested it, It should work. If you solved the issue in any other way, please share it with us. We will reply appreciate it.
Really useful contents!
Thanks for your kind words 🙂. We really appreciate your support. If you like our videos, please share those abd hell us to produce more awesome content 🙏
Thanks for this video! Would this still work if I were to share the Figma link with someone else, and ask them to input from their computer, i.e. in a usability test scenario? Or is it only possible from the keyboard on the device which created the prototype?
Thanks a lot for your comment. As a matter of fact, it is possible from any end if you share the link with anyone. It will work just fine. I hope this helps and hope you will subscribe 😊
Hello, very good video! Two things are not working for me: the actual text completion and the field cleanup.
(the interactions with the V, the W, and the BackSpace do come out.)I don't know where I made the mistake. Thank you!
In case of this type of error, just disconnect every single prototype link and reconnect all again. I hope this will hope and I will subscribe 😊
I can't find option on click in prototype, and too option change to and smart animation that options not look in figma for me , the figma was update to new version , that don't need more use that options, I whant say that because, I did a download the plugin anima prototype.
Thanks for your comment. If everything is updated, then maybe there is an issue with interactive components. Please try to be enlisted by this link,
docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform
I hope, the problem might solve. Thanks again for being with us.
If the length of the Value changes, how do you make sure that the vertical blinking line is in the correct position after the value? I tried it with auto layouts, but then the masking layer trick doesn't work...
Thanks a lot for your comment.
Well, as far as we know, there is no easy fix to this problem yet. As it is a mockup, so there are some limitations. But, it will give you an ALMOST realistic experience, and help clients and developers to understand the final product.
But if you find any solution. We will really appreciate it if you share with us.
@@essentialwebapps Ok, I found a way. I framed the Text layer and Vertical Line into a horizontal Auto-layout frame and put that inside the Input Field frame. Seems to be working now.
@@rsmolkin wow, thanks a lot. We really appreciate it. We will surely use this trick in our work.
Great explanation and video, but please could you go slow for peeps that are new to this? otherwise great video. Thank you :)
Really appreciate your feedback. We will sure keep it in mind for our future videos. I hope you will stay with us by subscribing to this channel. 😊
@@essentialwebapps I have subscribed as I really appreciate your video. I did learn from it. Just would be great if the video was slightly slow explain 🤗 Thank you for responding really appreciate. I was trying to know how to "Input Field Interaction in Figma"
Thanks a lot for subscribing. And, of course, thank you for your valuable suggestion. We are trying our best to improve ourselves. 😊
Its really good, but can you please share the link to your figma project. It will be easier to learn
Thanks a lot for your comment. We are preparing the Figma files and will upload them shortly for all. I hope you will stay with us.
Hi! Awesome video! I´m having a problem: when I prototipe, the value input chages to the default answer on the component, not to the value answer I wrote. What I´m doing wrong?
Thanks a lot for your comment. If you face this type of issue, try to disconnect all the links in Prototype, and reconnect again. It helped once. I hope it will help you too. And, if it didn't solve the issue. Then try to be enrolled in the Figma beta program.
Appreciate for sharing this. I have a question tho, about the sliding box on the right at 1:39 of the video appreciate your response.
This box is on top of the text. So, when in the next frame, the will box shrinks, it will look like the text is appealing one letter at a time just like the typewriter effect. Because the box on top of the text and the background below the text is the same color. I hope this helps and hope you will subscribe 😊
Thank you for the video! but I have a problem - text in field name changes between the variants just the way I wanted, but the input text stays the same as the main component... why is that?
Thanks a lot for your comment. You have to change the input text by selecting the input text box from the layer tab (left). If you did that already and still not working, please try to disconnect all the prototype and reconnect again. There could be a double prototype connector. Enable the interaction component feature from the prototype tab (right). And lastly update to the latest version. I hope this works for you and hope you will subscribe 😊
When I am using the prototype, I am unable to connect the prototype line to the varients inspite it got connected to the rectangle, Can you help with this?
Thanks a lot for the comment. But if you may please explain your issues a bit more? In the meantime, if you didn't enlist in the beta program of Figma, Here is the link for you.
docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform
Because few of the features only work in beta version till now.
@@essentialwebapps I've got the same prob tho. There are variants In the newly created "frame", and I assume we both can't put an arrow from one variant to another. Could you plz help?
btw, I filled the google form. Thanks a lot!
@@nieeee574 Thanks a lot for your comment. If you already fillup the form, then it may take a day or so to update your setup. I hope your features will enable soon and can make the prototype.
@@essentialwebapps do you know how many days should I wait for that Beta update.... Thanks!
@@nieeee574 Thanks a lot for your comments. Usually, it doesn't take too much time. However, we cannot say for sure. It really depends on Figma. Thanks again for staying with us.
so helpul
Thanks a lot. I hope you will subscribe 😊
I tried doing this but I couldn't add interaction to other variants (there were no options to navigate to other variants and couldn't select "after delay") so I tried @Falvio Maltez's tips that I dragged out those variants from the main frame, then added interactions and put it back. but in the end, it couldn't respond when I clicked it. Do you have any suggestions sir
Thanks a lot for your comment. There is drop down option under Interaction details >> Change to, then you can choose the variant you want to direct to. I hope this will help. And I hope you will subscribe 😊
@@essentialwebapps thanks for your reply 😁 i have already subscribed you, your channel is so helpful to me 😌👍
Do you have to be in the interactive components beta for this to work? I keep having trouble setting the animations between variants. “On click” and “after delay” are either disabled or I cannot link them to another variant (can only choose other frames in the file)
Thanks a lot for the comment. As you already convert the frame into components, then combined those as variants. As we tested, it should work. So, you might be enlist in beta program for this. Please let us know if it solves the issue or not. Again, thanks a lot for being with us.
Thanks a lot for the comment. As you already convert the frame into components, then combined those as variants. As we tested, it should work. So, you might be enlist in beta program for this. Please let us know if it solves the issue or not. Again, thanks a lot for being with us.
hello, a beginner here! i was wondering how to see a live feed of it after completing it?
slightly hard to follow, but great idea and good video
Thanks for your appreciation and your advice. Hope you will subscribe for future videos. 😊
how did you make it blink?
How can it be done for a phone app userinterface
Wow
i understand the process of creating the component. Somehow I wanna know how the value can be edited by the user itself.
I am sorry to say, it's just a prototype. User can not change the values. Designer can set a value just for demonstration. I hope this helped and hope you will subscribe 😊
Wao
Absolutely brilliant!
Thanks for kind words ❤️
how do you hide the text so quickly? on 01:09
which buttons did you press? on mac
Thanks for your comment. Just select on the text and use up arrow key on your keyboard. That will do. I hope this helps...
Como insere o "backspace" na key? Apenas consigo colocar "space" clicando na tecla "space". Pode ajudar, por favor? Obrigada!
Thanks for your comment. I think you add backspace the same way you add space. If it's not working. Then try to disconnect all the prototyping and reconnect again. I hope this will work and please subscribe 😊
pls explain 1:39
shortening the box to right , from where its comes
is that text box ?
That is not a text box. It was a rectangle shape that I used to cover the text in previous element. I just make it short, to uncover the text on the position. I hope that helps. Hope you will subscribe 😊
Why I'm not able to connect the variant to another variant
Thanks a lot for your comment. Some of the features of Figma are available on beta versions only. You may fill the form in the below link for the beta features,
docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform
This form is not by us, This is by Figma.
what exaclty did you slide to the right in the 3rd box
Thanks for your comment. That is a simple Text for warning. I used Keyboard down arrow key to keep it out of the frame's visibility. I hope this helps, and hope you will subscribe 😊
@@essentialwebapps thank you so much
how to do the type transition
Thanks for this video! I am able to have the blinking effect but not able to write the text. Please HELP! Thanks again! :)
Thanks for your comment. I hope understand that it is not literal typing using keyboard. It's just a Key command animation. And, please check all of your prototype connector to find if there is any double connector. If any please remove that. I hope this will work and hope you will subscribe 😊
the sad character's face at the and made me laugh a lot, anyway, amazing tutorial THANKS!
You are welcome 😃 and please keep in touch for the future videos 🙏
can someone explain me what is rectangle 12? ,its just empty in video :")) but he said for illusion of typing effect :'"))) and i dunno what is thattt :"((((
It's a solid rectangle over the text. The color of this is the same as the background. And it's covering the text. So, it's uncovering one letter at a time when it slides from left to right, which seems like a typewriting effect. I hope this helps and hope you will subscribe. 😊
Can I get access to project file ? Videos seems really cut out
Hi Paco,
We got some feedback from our audience and they actually prefer to have these project files. We are preparing all these tutorial files, and we will make those availlable for download as soon as we can (hopefully in a week or so :). I'll inform you once all the source files are available for download
Did it really work?
Anyone knows that why I cannot see 'on click' button in prototype?
Thanks a lot for your comments. Actually few of the features of interactive components are in beta. Please fill up the below form for that,
docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform
It may take few days to be enlisted. I hope this helps. 😊
After delay button is disabled, can you show a solution for this problem please?
Thanks for your comment. If you have more than one interaction assigned in one element. Then, a few of the interactions might be disabled. Click on the element then check under the prototype tab, if there is more than interaction assigned or not.
Wow great concept!
Thanks 🙂
Why can't I see the option - change to?
The menu I have is
- navigation
- open
- scroll
- swap
Thanks for your comment. Few of the features only work in interactive components beta version. You might need to be enlisted for that. Here is the Figma form for you,
docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform
It might take few days to activate the beta version.
@@essentialwebapps hi, I've sent a figma beta request, if I have received an email reply what is the next step?
@@babybluesunflower601 Please check for a Check Box named "Enable interactive components" under the prototype tab. If it's there. You are good to go.
Sorry I didn't get it. When you hide the wrong state, how did you do it?
Thanks for your comment. I just selected it by clicking on it, then use up arrow key in my keyboard to push it up. And, if it above the box. Then just rearrange it from the layer tab. I hope this helps, and please Subscribe 😊
Do you “send it to back” after hiding?
Because pressing the up key on the keyboard will just bring it up on the input field
Great video but I follow all the steps but my After delay is disabled and I cant connect the outer box which enabled the after delay I tried to connect it but It pointed on the objects. Pls help
Thanks a lot for your comment. Please check if your element already has any other prototype action enabled or not. If so, there is a good chance, the after-delay action will be disabled. Because, you cannot add more than one prototype action on a single element. If you cannot find anything else, then the easy solution is to create another fresh copy of it, and work on that. I hope this helps. 😊
@@essentialwebapps but why my prototype pointed it out to the rectangle than the outer box
There could be another issue. Are you enlisted for interactive components beta? Few features work well in the beta version. If you are, then enable it from the prototype tab. If not, then fill out this form by Figma,
docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform
BTW, this might take time to enable.
@@essentialwebapps Im using an app of figma and I dont know if it is beta though
I hope this article can help you to understand about it, 😊
help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants#h_01F13PW6A4YF8G3MGD2GG3Y4AR
You guys are great except going too fast....please show the procedure little bit slowly
Thanks a lot for your valuable suggestion. We will definitely keep that in mind. And, I hope you subscribe to watch our future videos 😊
@@essentialwebapps done subscribing 🙂
the blinking is too fast can you suggest how can i change it to a normal blinking
Yes it is easy. You just have to increase the after delay duration to match to the real blinking. I hope this helps and subscribe for more 😊
Now, now now dancok ah? Cok,, thanks a good tutorial
this video is to confusing sorry
Thanks a lot for the feedback. We really appreciate it.
@@essentialwebapps wtf
i didn't understand at 04:06 omg it's the most importent thing :( can anyone helps me ?
It's just changing the text by selecting the text element from the layer tab and then changing the text. It's not visible cause, it has a solid rectangle on top of it (which is used to create the type writing effect). I hope this helped and hope you will subscribe 😊
why i can't do this:( rewatch the video but it doesn't work
Thanks a lot for your comment. In such cases, remove all the prototype connector and try to reconnect again. I hope this helps, and please subscribe for exciting upcoming videos 😊
can i have the free resourse
Thanks a lot for your comment. We are seriously thinking about it. And, let's see what we can do about it. We hope you will stay with us for future videos.
dystopian
I need the file thanks
Thanks a lot for your comments. We will let you know, when we provide the files. Stay with us, and thanks a lot if you subscribed. 😊
You cannot write arbitrary text in this Input Field. So what's the point of this lesson?
Please u missed a clip
Make it slow as soon as possible.....
Thanks for the advice. We will keep that in mind. 😊
its beta???
Yes, it is ...
Thanks for your comment.
@@essentialwebapps i just tried to do this in figma and its not working :(
@@dmytrodoloban2045 Thanks a lot for your comment. Some of the features you may need only available in the beta version. Please follow the below link to be enlisted for that,
docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform
I hope this may help you.
@@essentialwebapps It takes a long time for the beta to authorize me.
Where is line 1?
It's hidden under the rectangular shape. I hope this helps. Hope you will subscribe 😊
It is not clear...That there is so much hidden interaction which is not explained
One advice, SLOW DOWN!!!! But thank you for the video...
Thanks a lot for your feedback. Yes, we are taking your feedback seriously and surely we will apply in all future videos.
@@essentialwebapps Just because you replied to my comment, I will subscribe to your channel. Keep up the good work. 👍
Really appreciate that 🙏
Started watching but couldn’t stand the production. switched to a tutorial with a real human as the host. Thanks tho.
Thank you for your feedback. We will keep that in mind and will try to implement in the near future.
this does not work
Very hard to understand
We understand. But we tried our best to make other videos easy to understand. I hope you will subscribe for those 😊
I learnt nothing from this video as a beginner
I understand. These videos requires some prior knowledge to Figma. We are preparing a course for beginner. Pleaee keep in touch by subscribing to our RUclips channel. You will get notified when we will release the course.
you speak too fast and hope to share figma link with us
Thanks for your suggestions. We will keep in mind in our future videos. Hope you will subscribe 😊
Good Idea but your teacher was not given learnt nothing.
Honestly not helpful at all.
Thanks a lot for you valuable feedback. We will try to be better in the future videos. I hope you will subscribe for those 😊