Hi @Design Xstream. Thanks for sharing this tutorial. It would be beneficial if you could add how you created those fields and animation from scratch. Otherwise it is just playing with colours and variants. Also I believe that interactive components are not available to all. It is just available in beta.
Hey @Aliaksandra, Yes, this feature is still in beta you can sign up for the beta program if you wish to play around with it now or wait for the public release. And yah since it is still in beta I did not want to do a full lengthy detailed video but once it is released I will surely make more detailed videos. Also, I've provided the link to the Figma file that might help you understand it better! 👍🏼
yeah I agree. Seeing how you actually built that interactive component would have been valuable. without an explanation of how you got from 0 to 1, it does not make sense for me to even watch the tutorial.
Great tutorial. On point with the topic. You don't go throu the basics like "this is a sqare" like most figma tutorials do (And I'm fed of) Great Job! 10/10
yah this is a common point I come across in the comments. There are people who feel it would be better to have me show create things from scratch and there are people who like it becoz the video is quick & straightforward. So I'm trying to find the balance in between both 😅 Thanks for your comment! Glad you liked it!
Value box is nothing but a label that is masked inside a rectangle shape. You can keep it without the mask as well if you dont need the reveal animation.
Hey Sherri, Thank you very much for the Super Thanks! Means a lot to me :) If you have any queries in Figma do ping me on instagram @designxstream i'll be happy to help! 😊
Hey, this is a beta only feature for now. If you would like to access it pls sign up for it here: docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform or you have to wait until Figma makes this feature available in the public version!
that is an interactive component... which is just a line that loops infinitely between 0 & 100 opacity! you can check the file is in the description for better understanding!
Hey Sophie, The end cursor is an individual interactive components that is just a line which keeps switching from 0 opacity to 100 and looped infinitely and it is nested inside that main input field component. Check the figma link in description and duplicate it and explore to understand it better!
@@oshiokelawrenta8750 Hey, this is a beta only feature for now. If you would like to access it pls sign up for it here: docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform or you have to wait until Figma makes this feature available in the public version!
Hey Rodrigo, you cannot write anything in this text field this is just for animation. You can check this video which is about typing in text field: th-cam.com/video/3Ksvxuy4zKk/w-d-xo.html
@@DesignXstream Ahhh...now I understand, I thought there was a function for that!...jahjahhh- You really have a very good level of knowledge... and patience!... Thanks from Argentina!
@@rodrigocaldentey8745 Yah hopefully Figma comes out with such a feature that would make prototyping a lot easier! Anyways cheers & Happy Designing ✌🏼😊
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?
Hi @ Design Xstream your video is good to learn the design. I want to learn one thing. I create a search box component. but can't show the blinking search box and keypad on a same time on one screen of a mobile app. I also want While clicking outside both will disappear.
Under the source code when you change font from PT Mono to Helvetica Neue letters, spacing/kerning between the letters change. Any solution to correct spacing/kerning between the letters with different fonts? Thank you.
While I created this video the auto layout was not working with interactive components. Now I beleive this issue is solved so you can try adding all those individual text layer into an auto layout so that it take only the actual character's space! Hopefully it should work!
Hey Ann, As I mentioned in the video this works with 'Interactive Components' feature which is still in its beta. And it is definitely going to be in the free version only. However, if you wish to try it now you can always sign up for the beta program and use it.
Hey Ayano, You can directly check the prototype from this file. But if you want to use it in your project you need to apply for beta program as this Interactive Components feature is still in beta.
Thank you, this is helpful for when a designer has to use Figma. Though for the life of me I can't understand why anyone would use Figma for this kind of semi-full interactivity unless money is the issue. (In that case, Figma is great for it's accessibility to designers on a tight budget!) But if someone has the means, I struggle to see why they would use Figma to prototype rather than a more powerful tool like Axure. Hoping someone can convince me.
Hi Michelle, Totally agree with you on that. Figma is not a good tool for full interactivity as basic thing like input field itself is not a part of the tool. However, as you mentioned tight budget is one reason but along with that one more major reason could be the usage of tools. Figma is very widely used in majority of the companies and tools like Azure, Protopie, UXPin, etc need a whole new learning curve so if one can achieve as much as possible in Figma itself then they might not have to learn a new prototyping tool in every company they move to.
@Sandon H Yes! Figma is amazing as a design tool but lacks a lot of basic prototyping features. Just to demo the flows to clients it is good but for user testing these prototypes are useless. I would suggest tools like Protopie, UXPin, AxureRP, Framer, etc.
@@DesignXstream why would a user want to test a dummy app? Lol, common, testing should be after the developers has coded everything into a real world app.
@@AvidAfrican The process of designing, prototyping and testing a product before handing over to developers, will not only save your team time and money but also enable you, as a designer, to better understand your users and where to best focus your time going forward. You should read more about Design Thinking Methodology to understand it better! Hope this helps 👍🏼
I appreciate your tutorial but would really appreciate it if you would slow down in your tutorials, I find them difficult to follow when I have to constantly stop and go back.
Will try to go slower in the upcoming videos. Smart animate option should be available only the 'Change to' option is new which is available only in the beta version.
Can you please explain the mask part a little more, I'm stuck on that and using it with auto layouts. never needed to use a mask in Figma before. Why do we actually need a mask? Can we do it without the mask somehow?
Hey Roman, Masking is not a mandatory step. I've used it so that we can see an animation of the input text getting visibility from left to right! You can totally ignore it if you don't want that animation!
@@DesignXstream Thanks for responding. I still can't figure it out. If I hide the text layer on the empty state, it doesn't get shown on the filled state for some reason. So how do you go from the empty state to filled state with or without a mask?
Hey Roman, There is something you would have missed out. If possible pls share the Figma file link on our instagram handle I can have a look at it and check what's the issue.
Hey, this is a beta only feature for now. If you would like to access it pls sign up for it here: docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform or you have to wait until Figma makes this feature available in the public version!
@@cPriscilaog They are still fixing a lot of bugs in the beta program and they have not given any official date but I suppose it might atleast take a month!
Great video! Although I have one question, in the default input field why is the start and end cursor not visible without hiding it or zeroing transparency ?
For this scenario you will not find any noticeable difference between both. However, in some scenarios when you use layer transparency and color transparency with some blending mode you will notice difference in the visual looks.
I have just code the design, everything works except input focus bring the placeholder up and cursor down part, I use Nextjs, the link: www.figma.com/file/n2yhlYMppclfPa3usAqr9e/Input-Field---Interactive-Components-Demo-(Copy)
@@DesignXstream thank you man, hopefully you release more tutorials just like this one, I am trying to build a blog but I can't find one design that I am happy with, maybe a blog template tutorial next time ???
Hey Martina, This is done using the new Interactive Components feature so you need to sign up for the beta program to get access to use these features or wait for the official release from Figma. Here is the link for beta signup: forms.gle/tAxqMQNXuNU4NYmj9
@@DesignXstream ah okey I didn't know that the new Interactive Components feature is available only for beta program. Thanks for info and video, too. It is very helpfull
Hi, thank you sharing this awesome tutorial. Can you please share an example of a contacts page where the user can hold a contact to select it and then delete it? It would be very helpful. Thanks.
Awesome video! Id like you to know I'm very much interested if you could make an example where after you complete an example of a Valid Input (space bar), if you could show some type of icon to indicate the input in the field was valid and met the requirements of the field. I would imagine a check mark that is green or if you should share your creative touch to an animated icon that turns green all within the input field.
Figma doesn't support logical expressions so it not possible right now to check if input has matched valid requirement or not. However, we can replicate this behavior for a static text just to showcase the interaction to the dev team.
The video was getting super long to explain all. But you can download the file and check its layer if it is still confusing I can make a full detailed video on it.
This video would be WAY more useful if you went step by step building the layers inside the input field instead of skipping the auto-layout structures. Good starting point though
Hey @@shannonng8868 , I cleared the files from my drafts and it got deleted from the community as well. My bad 😅 Anyways I've updated the file links again. Pls check now! 👍🏼
![SAFEPLANET - ดาวเคราะห์ [ THE PLANET ]](http://i.ytimg.com/vi/4X1XL3I_k3c/mqdefault.jpg)
Hi @Design Xstream. Thanks for sharing this tutorial. It would be beneficial if you could add how you created those fields and animation from scratch. Otherwise it is just playing with colours and variants. Also I believe that interactive components are not available to all. It is just available in beta.
Hey @Aliaksandra, Yes, this feature is still in beta you can sign up for the beta program if you wish to play around with it now or wait for the public release. And yah since it is still in beta I did not want to do a full lengthy detailed video but once it is released I will surely make more detailed videos. Also, I've provided the link to the Figma file that might help you understand it better! 👍🏼
@@DesignXstream Thanks for your reply. I look forward to your next tutorial.
yeah I agree. Seeing how you actually built that interactive component would have been valuable. without an explanation of how you got from 0 to 1, it does not make sense for me to even watch the tutorial.
@@samilazreg9103 Agreed
this is so cool, thank you
Glad you liked it! Cheers ✌🏼
Great video! Thanks a lot. 👍
Glad you liked it! Cheers ✌🏼
Great tutorial. On point with the topic.
You don't go throu the basics like "this is a sqare" like most figma tutorials do (And I'm fed of)
Great Job! 10/10
yah this is a common point I come across in the comments. There are people who feel it would be better to have me show create things from scratch and there are people who like it becoz the video is quick & straightforward. So I'm trying to find the balance in between both 😅
Thanks for your comment! Glad you liked it!
Awesome 😍😍
Thank you! Cheers ✌️
excellent bro
Thanks buddy! ✌🏼
This was helpful thanks 👍
Hey Ashley, Glad you found it helpful :)
Nice tip👍
Hey Akbar, Glad you liked it :)
How did you create value box inside the text box??
Value box is nothing but a label that is masked inside a rectangle shape. You can keep it without the mask as well if you dont need the reveal animation.
Thanks!
Hey Sherri, Thank you very much for the Super Thanks! Means a lot to me :)
If you have any queries in Figma do ping me on instagram @designxstream i'll be happy to help! 😊
Thanks! Great Video :)
Hey Vladimir, Glad you liked it :)
I love this. Thanks for sharing..
Glad you liked it :)
Pls do check our instagram page for design bites: instagram.com/designxstream/
Good one 👍
Thanks ✌️Glad you liked it! 😁
Very clear. I have a better understanding of Figma now!
Glad you found it helpful :)
It's really too fast, but a good demo
I made a more detailed video with new features. check this th-cam.com/video/cMtTKAPpAfY/w-d-xo.html
4:24 I still didn't got this update for me, where I can add interaction to the varient which I made also I am not seeing a change to option
Hey, this is a beta only feature for now. If you would like to access it pls sign up for it here: docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform
or you have to wait until Figma makes this feature available in the public version!
This is very a useful / practical tutorial, thank you man !!!
Hey Stephen, Thank you.... Glad you found it useful! 😊
where did you get the start and end cursors from??
that is an interactive component... which is just a line that loops infinitely between 0 & 100 opacity! you can check the file is in the description for better understanding!
How if I want the keyboard can be appeared after click on the input field and the animation of the blinking cursor is still continue?
Could you please tell me how you create the End Cursor? This not a line, nor a rectangle. Thank you so much.
Hey Sophie, The end cursor is an individual interactive components that is just a line which keeps switching from 0 opacity to 100 and looped infinitely and it is nested inside that main input field component. Check the figma link in description and duplicate it and explore to understand it better!
If you still stuck with some query you can ping us on our instagram @designxstream
@@DesignXstream When linking the input field there is no "change to" on figma
@@oshiokelawrenta8750 Hey, this is a beta only feature for now. If you would like to access it pls sign up for it here: docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform
or you have to wait until Figma makes this feature available in the public version!
Hello, very good video!.. I have a problem: I can't write in the text field! ...I don't know where I made the mistake. Thank you!
Hey Rodrigo, you cannot write anything in this text field this is just for animation. You can check this video which is about typing in text field: th-cam.com/video/3Ksvxuy4zKk/w-d-xo.html
@@DesignXstream
Ahhh...now I understand, I thought there was a function for that!...jahjahhh- You really have a very good level of knowledge... and patience!... Thanks from Argentina!
@@rodrigocaldentey8745 Yah hopefully Figma comes out with such a feature that would make prototyping a lot easier! Anyways cheers & Happy Designing ✌🏼😊
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?
You can override the text in the component instance locally.
Hi @ Design Xstream your video is good to learn the design. I want to learn one thing. I create a search box component. but can't show the blinking search box and keypad on a same time on one screen of a mobile app. I also want While clicking outside both will disappear.
Send me the file you are working on @designxstream on instagram. I can try to help you out!
I'm not able to con
nect it to variant it gets connected to the box
Under the source code when you change font from PT Mono to Helvetica Neue letters, spacing/kerning between the letters change. Any solution to correct spacing/kerning between the letters with different fonts? Thank you.
While I created this video the auto layout was not working with interactive components. Now I beleive this issue is solved so you can try adding all those individual text layer into an auto layout so that it take only the actual character's space! Hopefully it should work!
why I'm not able to access the interaction details fully smart animation option doesnt show
Hey Kushi, Interactive components feature is still in beta. So make sure you are signed up for the beta program to get the new interactions.
Hi! Nice video!
I wanna ask do you pay for Figma or you use the functions as free? Cuz I couldn’t find some functions on mine
Hey Ann, As I mentioned in the video this works with 'Interactive Components' feature which is still in its beta. And it is definitely going to be in the free version only. However, if you wish to try it now you can always sign up for the beta program and use it.
@@DesignXstream thank u so much! Imma try it!
I have a problem, I did all the steps but when I go to the preview I can't actually write anything. I don't know what I did wrong
This component lets you have a predefined text only.. if you want to type then try this component: th-cam.com/video/3Ksvxuy4zKk/w-d-xo.html
does this only work for members? I'm using a free account and it doesnt move at all.
Hey Ayano, You can directly check the prototype from this file. But if you want to use it in your project you need to apply for beta program as this Interactive Components feature is still in beta.
Thank you, this is helpful for when a designer has to use Figma. Though for the life of me I can't understand why anyone would use Figma for this kind of semi-full interactivity unless money is the issue. (In that case, Figma is great for it's accessibility to designers on a tight budget!) But if someone has the means, I struggle to see why they would use Figma to prototype rather than a more powerful tool like Axure. Hoping someone can convince me.
Hi Michelle, Totally agree with you on that. Figma is not a good tool for full interactivity as basic thing like input field itself is not a part of the tool. However, as you mentioned tight budget is one reason but along with that one more major reason could be the usage of tools. Figma is very widely used in majority of the companies and tools like Azure, Protopie, UXPin, etc need a whole new learning curve so if one can achieve as much as possible in Figma itself then they might not have to learn a new prototyping tool in every company they move to.
@Sandon H Yes! Figma is amazing as a design tool but lacks a lot of basic prototyping features. Just to demo the flows to clients it is good but for user testing these prototypes are useless. I would suggest tools like Protopie, UXPin, AxureRP, Framer, etc.
@@DesignXstream why would a user want to test a dummy app? Lol, common, testing should be after the developers has coded everything into a real world app.
@@AvidAfrican The process of designing, prototyping and testing a product before handing over to developers, will not only save your team time and money but also enable you, as a designer, to better understand your users and where to best focus your time going forward.
You should read more about Design Thinking Methodology to understand it better! Hope this helps 👍🏼
Can you please explain more the "mask value auto layout" to me :D Thank you so so much!
Sure! I will make a tutorial on Auto Layout.
I appreciate your tutorial but would really appreciate it if you would slow down in your tutorials, I find them difficult to follow when I have to constantly stop and go back.
Appreciate your feedback. I'll try my best to slow down in upcoming videos! :)
But how to add layouts n frames? Show properly
Will make a detailed video on layouts & frames! 👍🏼
🙌Assets
🙏🏼😊
very helpful thanks, but tooooo fast. I am trying to replicate that but I couldn't get the smart animate option
Will try to go slower in the upcoming videos. Smart animate option should be available only the 'Change to' option is new which is available only in the beta version.
Great!!!
Cheers! ✌🏼
Could you create a tutorial just for the input frame, please?
The source file is already there in the description. Have a look at it! If you still feel its confusing then I'll try to create a new video in detail.
@@DesignXstream Please make a new one. -_-
don't have change to option in interaction details box.
Hey Irfan, this is a beta feature you need to be signed up for the beta program to get access to this new feature.
Is that important for full web developer .Answer me please. I am student.
This tool is not for developers. It is for designers however you can learn it if you plan on being a full stack creator!
@@DesignXstream ok thank you
This feature is currently in beta
Only members of the Interactive components beta ↓ can create interactive components.
Yes Vitalii 👍🏼
U soo fastt i cant see full video bcoz most of the things goes up to my mind
Sorry for that! Maybe try reducing the playback speed.
@@DesignXstream at the start u just already make component so i confuse in that
@@zarinawahab9742 Yah! I did not want to make the video too long. I've shared the file in the description maybe that will help you understand.
Can you please explain the mask part a little more, I'm stuck on that and using it with auto layouts. never needed to use a mask in Figma before. Why do we actually need a mask? Can we do it without the mask somehow?
Hey Roman, Masking is not a mandatory step. I've used it so that we can see an animation of the input text getting visibility from left to right! You can totally ignore it if you don't want that animation!
@@DesignXstream Thanks for responding. I still can't figure it out. If I hide the text layer on the empty state, it doesn't get shown on the filled state for some reason. So how do you go from the empty state to filled state with or without a mask?
Hey Roman, There is something you would have missed out. If possible pls share the Figma file link on our instagram handle I can have a look at it and check what's the issue.
On change not showing in my Figma
Hey Neeraj, this is a beta feature in Figma. You need to sign up for the beta program to get the access.
in my menu interactions the state CHANGE TO doesn`t exist! Really strange, i have the last version of Figma
Hey, this is a beta only feature for now. If you would like to access it pls sign up for it here: docs.google.com/forms/d/e/1FAIpQLSctELo9clvK0uP-0zDAxMqrgtCNyK0OB2hff6O7SnK9y4jo5g/viewform
or you have to wait until Figma makes this feature available in the public version!
@@DesignXstream thank so much for it!
@@DesignXstream Thank you, do you know how long it takes to be available?
@@cPriscilaog They are still fixing a lot of bugs in the beta program and they have not given any official date but I suppose it might atleast take a month!
@@DesignXstream
I can ask you a question. How long will it take to be used when registering for the beta?
imposible enter text with keyboard?
Possible but not an ideal solution. You can check this: th-cam.com/video/3Ksvxuy4zKk/w-d-xo.html
Have u tried designing a progressive disclosure for a form? especially when it is created using an auto layout.
No I haven't create any design on that pattern.
Could u plz explain from scratch?
Check this new one I've explained it from the begin: th-cam.com/video/cMtTKAPpAfY/w-d-xo.html
Great video! Although I have one question, in the default input field why is the start and end cursor not visible without hiding it or zeroing transparency ?
Got it! you zeroed the layer and not colour. Although what difference does it make from reducing transparency of colour than the layer ?
For this scenario you will not find any noticeable difference between both. However, in some scenarios when you use layer transparency and color transparency with some blending mode you will notice difference in the visual looks.
Figma will be the death of me
😂
can't run in android... not showing native keyboard, so cant type
Yah unfortunately this hack only works on desktop!
I have just code the design, everything works except input focus bring the placeholder up and cursor down part, I use Nextjs, the link: www.figma.com/file/n2yhlYMppclfPa3usAqr9e/Input-Field---Interactive-Components-Demo-(Copy)
Awesome... you are pretty fast at this!
Amazing work man 👏🏼
@@DesignXstream thank you man, hopefully you release more tutorials just like this one, I am trying to build a blog but I can't find one design that I am happy with, maybe a blog template tutorial next time ???
@@maskman4821 Sure man! If I find any interesting design interaction related to blog template will make one soon! 👍🏼
can you give us a source file?
Hey Kalyani, The older link was expired. I've updated it pls try now.
Demo file is not working for me :(
Hey Martina, This is done using the new Interactive Components feature so you need to sign up for the beta program to get access to use these features or wait for the official release from Figma. Here is the link for beta signup: forms.gle/tAxqMQNXuNU4NYmj9
@@DesignXstream ah okey I didn't know that the new Interactive Components feature is available only for beta program. Thanks for info and video, too. It is very helpfull
@@martinakolibasova5955 thank you Martina. Stay tuned for more videos! :)
Hi, thank you sharing this awesome tutorial. Can you please share an example of a contacts page where the user can hold a contact to select it and then delete it? It would be very helpful. Thanks.
You mean like swipe a row then chose delete?
@@DesignXstream no, I mean when we hold a contact, and then a checkbox appears for all the contacts....then we choose other contacts and press delete
Awesome video! Id like you to know I'm very much interested if you could make an example where after you complete an example of a Valid Input (space bar), if you could show some type of icon to indicate the input in the field was valid and met the requirements of the field. I would imagine a check mark that is green or if you should share your creative touch to an animated icon that turns green all within the input field.
Figma doesn't support logical expressions so it not possible right now to check if input has matched valid requirement or not. However, we can replicate this behavior for a static text just to showcase the interaction to the dev team.
Hi can you show/recreate the input field from scratch. like the value masked, cursor, masked layer, value field?
The video was getting super long to explain all. But you can download the file and check its layer if it is still confusing I can make a full detailed video on it.
hmmmm... thought u are showing us the user's input.. don't see any
Check this for user input: th-cam.com/video/3Ksvxuy4zKk/w-d-xo.html
Would be more useful if you create main component from beguiling, because beginners will struggle to create similar by themselves.
Yes, I understand! I thought the video would get too long... I'll try to create a detailed one.
@@DesignXstream , trying to change input text and initial cursor just moving to the middle. broke my brain already 🤯
@@VitaCrafts made a simplified version of this component here: th-cam.com/video/cMtTKAPpAfY/w-d-xo.html
4:30 Auto animation, After dealy
OMG you need to slow dow guy!!!
Will do 😅
pesti kang yawaa kah, walay stepings, like create new input field from nothing, step by step
This can be helpful: th-cam.com/video/cMtTKAPpAfY/w-d-xo.html
you go tooooooooo fast broooooo
Sorry about that! Will try to go slow in my upcoming videos!
This video would be WAY more useful if you went step by step building the layers inside the input field instead of skipping the auto-layout structures. Good starting point though
Interactive components feature is still in its beta. Will surely make a detailed tutorial once it gets public.
@@DesignXstream Was just mentioning for others, and yup I put in request ;)
Figma file link: www.figma.com/community/file/969491551267671325/Input-Fields---Interactive-Components-Demo-(Community)
For some reason it says that the link cannot be found
Hey @@shannonng8868 , I cleared the files from my drafts and it got deleted from the community as well. My bad 😅
Anyways I've updated the file links again. Pls check now! 👍🏼
sughoi༼ つ ◕_◕ ༽つ
😬😍👍👍
Well that was utterly useless.
I knew it! 💯
Are you teaching or arguing with someone. How can you be speaking this fast and expect your students to grab
😅I like to keep things quick and straight to the point... but will surely try keeping the upcoming videos a bit slower!
Navpoint tech I support your comment about what you said. You're right
You can politely ask, "can you slow down?"
You can reduce the playback speed to suit you