How to Create an Interactive/Functional Dropdown in Figma
Рет қаралды 252,546
Күн бұрын🔥 Start using Figma for FREE → bit.ly/TryFigma
🔗 Join our design community here → bit.ly/DX-Comm...
How to Create an Interactive Dropdown in Figma. In this video, I show you how to create a functional dropdown list or dropdown menu in Figma on a single frame using the Interactive components feature.
#Figma #Dropdown #FigmaTutorialSeries
⏱️Timestamps:
0:00 - Intro
0:44 - Demo/Preview
1:04 - How to easily use it in your Figma project?
1:44 - How to create it?
5:14 - Demo Output
📄 Figma file link: www.figma.com/...
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - bit.ly/SubToDe... 😅
🎉 Join our Whatsapp Community now, it's FREE: bit.ly/DX-Comm...
You have got some ideas or topics in mind? Please do comment below we will make sure to check it out and do it if possible 🥳
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🌍 Social Media:
↪︎ LinkedIn - / designxstream
↪︎ Instagram - / designxstream
↪︎ Facebook - / designxstream
↪︎ Twitter - / designxstream
↪︎ Website - DesignXstream.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🏷 Tags: How to Create an Interactive Dropdown in Figma, How to Create a Functional Dropdown in Figma, dropdown in figma, dropdown menu in figma, dropdown list in figma, how to create dropdown, functional dropdown, interactive dropdown, dropdown animation in figma, listbox in figma, listbox animation, working dropdown in figma, clickable dropdown in figma.
@DesignXstream 3 жыл бұрын
⭐️Duplicate the Figma file from here: www.figma.com/community/file/978009302809014736/Interactive-Dropdown Also, do follow on instagram for more updates: instagram.com/designxstream/ 😊
@shaeezaadam581 11 ай бұрын
Thank you very much
@tnasiareid 2 жыл бұрын
This is a beautiful design, I just wish we could've watch you create everything from scratch. Would be much easier to follow
@DesignXstream 2 жыл бұрын
I did not want to make a 20 mins long video so tried to keep it short. But i'lll try to make a detailed video on a similar topic!
@marie91999 9 ай бұрын
I love how the tutorial is divided into 3 sections. Very well explained and I was able to recreate the component easily. Thank you!
@DesignXstream 9 ай бұрын
Wow, glad you found it helpful! Cheers ✌🏼
@sukowendy7555 19 күн бұрын
thank you so so much for this
@DesignXstream 16 күн бұрын
Cheers! 🙌🏼
@MOHAMEDMOSTAFA-m22 10 ай бұрын
That's great you're the best I couldn't understand how anyone describes this but you are the only one who described this easily thank you
@DesignXstream 9 ай бұрын
I'm glad you found it helpful! Thanks for sharing your feedback :)
@crystalgayle6724 2 жыл бұрын
This is awesome do you think you could do a tutorial video how to build this from start ? I would really love to understand how the combined variants all work together with each other :o !
@DesignXstream 2 жыл бұрын
Hey Crystal, Sure I'll try to come up with a more detailed video. Meanwhile you can find this file URL in the description and try to see how it works.
@shinikyokai8815 2 жыл бұрын
It's unfortunate that you have to create so many workarounds in Figma in order to be able to create something as simple as a dropdown list. Imagine how much connections you'd have to make if you wanted a dropdown with 10 items! When it takes less time to actually code the design instead of prototype in Figma, that's a sign that Figma is inefficient for prototyping purposes.
@DesignXstream 2 жыл бұрын
Yes, agree on that! Figma is just for basic prototyping. For Advance prototyping I prefer Protopie or Framer! or even AzureRP.
@cloudsss83 2 жыл бұрын
I think you're being harsh with it... it's not that bad when you get used too and realize just by looking what should be a component or not. But I agree that Figma have a loooooooot of room to improve.
@matrixdukenukem000 2 жыл бұрын
If I just wanted to create a simple drop down that shows list and hides the list if you click outside, it's a 2 minute job and so so simple in axure. It's all about hide unhide. Hover features are inbuilt in each shape text.
@AvidAfrican Жыл бұрын
You actually don't understabd what UI is lol!
@AlexRemo Жыл бұрын
great! I was fighting with it 2 days before finding your video!
@DesignXstream Жыл бұрын
Glad I could help! :)
@fvelen 2 жыл бұрын
Man, I love you, you saved my project!
@DesignXstream 2 жыл бұрын
Glad to hear it! :)
@farwakazmi7388 11 ай бұрын
Life saver for me right now. Bundle of thanks.
@DesignXstream 11 ай бұрын
Cheers buddy! ✌🏼
@euphoria4726 Жыл бұрын
Thank you! Took me a minute to figure out how to put in into my project. But it works great! Thank you
@DesignXstream Жыл бұрын
Glad it helped! Cheers ✌🏼
@beegdigit9811 8 ай бұрын
A simple ass dropdown is this complex. Nice
@DesignXstream 8 ай бұрын
This is an older method... check this the latest one: kzfaq.info/get/bejne/js-kYJh-q66xaGw.html
@sakshidosani3751 Жыл бұрын
Thank you for the quick tutorial☺
@DesignXstream Жыл бұрын
Glad you liked it! Cheers ✌🏼😇
@mahimathomas2043 Жыл бұрын
Got to know you from Pinterest from your curved carousels pin! 🤩Great work
@DesignXstream Жыл бұрын
Awesome! Yes, we posted curated content from others on Pinterest and tutorials here! Hope you like it ✌🏼 :)
@user-ic2qc3sg6u Жыл бұрын
Thias is amazing, saves a lot of time, definetly subscribing
@DesignXstream Жыл бұрын
I'm glad you found it helpful ✌🏼😊
@calvinsutio Жыл бұрын
Thanks for the tutorial!
@DesignXstream Жыл бұрын
Cheers ✌🏼
@samar5140 Жыл бұрын
Thank you Its really helpful, I want to add navigation for each selection that it will transfer to anther page can you please explain to me how, its my first project using Figma and I’m struggling a bit.
@DesignXstream Жыл бұрын
For this you need to use variables & advanced prototyping... pls check my latest tutorials.
@ohazize Жыл бұрын
Thank you so much!
@DesignXstream Жыл бұрын
Glad it helped! :)
@likeplutofar 2 жыл бұрын
This is awesome ! Thank you
@DesignXstream 2 жыл бұрын
Glad you liked it! :)
@steffsamtoy3310 2 жыл бұрын
Thank you so much !!! this was very helpful :)
@DesignXstream 2 жыл бұрын
Glad it was helpful! Cheers ✌🏼
@rahultupe804 2 жыл бұрын
thanx for this video ♥
@DesignXstream 2 жыл бұрын
Cheers! Glad you liked it ✌🏼 :)
@niteengupta5752 Жыл бұрын
Hey, it was very useful and very informative video but please can you make one video in which you step by step show and teach how to make this dropdown menu component, please i want to learn this how to make this component.
@DesignXstream Жыл бұрын
Hey Niteen, Sure I will plan on making a longer video!
@shaeezaadam581 11 ай бұрын
Thank you
@DesignXstream 11 ай бұрын
You're welcome! ✌🏼
@snehalghodajkar502 3 жыл бұрын
U should have created n explained everything thing from scratch about creating a component and everything...u have created urself n explained the last part only! How ppl who r beginner will get to know this????
@DesignXstream 3 жыл бұрын
Hey Snehal, Most of the subscribers preferred quick & crisp videos so I often upload videos like this. But I agree with your point. I'm soon planning to create a detailed course on Figma so probably that should help with all the basics. Until then if yu have any queries yu can reach out on our instagram @designxstream
@Beamtup 3 жыл бұрын
Apparently interactive components are useless and impossible without this elusive "beta". I have NEVER in my LIFE seen something that's DESIGNED FOR UI DESIGN, be so user-hostile. This is ABSOLUTELY stupid, and NOTHING ANYBODY shows in any tutorial - with multiple methods I might add - makes sense OR WORKS. GIMME a STUPID way to do it and I'd like that more than the fucking shitstorm of a steaming DUMPSTER fire of confusion and contradicting methods/solutions/tutorials. I work for a company that the beta isn't sanctioned for. How the FUCK did people do this BEFORE the beta??? Was it just impossible? EVEN if that were the case it would be more satisfying than what feels like chasing the FUCKING wind for a GHOST who's part of a LEGEND that I THINK I heard some drunk guy WHISPER to a GOAT at a bar 30 million years ago - when I was wasted too. Fucking jesus christ.
@DesignXstream 3 жыл бұрын
@@Beamtup Everything that is done using Interactive components is absolutely possible without it. But it needs multiple frames. Interactive components just elimates the extra effort of having multiple frames.
@mhmdbadr99 2 жыл бұрын
Thank you ... this was very helpful for me
@DesignXstream 2 жыл бұрын
Glad it helped :)
@trombone0926 3 жыл бұрын
bro, it's amazing, thanks !!
@DesignXstream 3 жыл бұрын
Glad you like it! :)
@julietkan 2 жыл бұрын
Thank you so much for this!!!
@DesignXstream 2 жыл бұрын
Glad you liked it! :)
@kainaatzulfiqar1900 2 жыл бұрын
Thank you so much.
@DesignXstream 2 жыл бұрын
Always welcome!
@georgeharris1981 8 ай бұрын
Awesome vid!!!! Is there a way to duplicate it and then change the labels for a second dropdown list?
@DesignXstream 8 ай бұрын
Yes you can do that. Or you could use the new dropdown component that doesn't need you to duplicate component instead you could use one component at different instances. link: kzfaq.info/get/bejne/js-kYJh-q66xaGw.html
@mtiderman 2 жыл бұрын
Incredible. Thank you so much!
@DesignXstream 2 жыл бұрын
Glad you liked it! :)
@nooridamohdismail6845 10 ай бұрын
I think you just need to take a wee bit slower on the description. Other than that great tutorial.
@DesignXstream 10 ай бұрын
Point noted! Thanks for the feedback. Cheers ✌🏼 :)
@artistpruthvi1908 Жыл бұрын
you are going little fast so plz take your time and create it for bigginers, we can understand easily and more.
@DesignXstream Жыл бұрын
Point noted! Will improve 👍🏼
@suyashpurwar8310 3 жыл бұрын
Coool!!
@overstimulatedmx3045 2 жыл бұрын
Thank u so much!!
@DesignXstream 2 жыл бұрын
You're welcome! :)
@Jinayaaaa Жыл бұрын
Thank you for the tutorial! One question: How do we link the options to another page in Figma? Update: Figured it out!
@DesignXstream Жыл бұрын
Awesome :D Cheers ✌🏼 :)
@Pibepan10 Жыл бұрын
how u did it
@amandaeriksson32 2 жыл бұрын
Hi! Thanks for a great tutorial, just what I needed!! Unfortunately, it doesn't seem to work anymore... Is there i bug maybe? It worked a couple of days ago... Any thoughts?
@DesignXstream 2 жыл бұрын
Hey Amanda, I just checked the file after you told and found there is some bug. Interactive components beta just went live 2 days ago and looks like there is some issue with auto layout. I've put in a temporary fix you can duplicate the community file once again and try it.
@amandaeriksson32 2 жыл бұрын
@@DesignXstream Thought so too... Thank you so much!! What did you do to fix it? I have built a bigger drop-down menu from your tutorial in my own project..
@DesignXstream 2 жыл бұрын
@@amandaeriksson32 Looks like turning the opacity down is causing some issue in Auto layout so I've kept them at 100% and reduced the frame size to hide the elements. You can duplicate the file and see the updated version.
@ParthAggarwal Жыл бұрын
Soooo helpful!
@DesignXstream Жыл бұрын
Glad you found it helpful! Cheers bro ✌🏼
@kmsi4666 3 жыл бұрын
Can you explane UX concepts that designers must know or the ux solutions that changed the design industry.
@DesignXstream 3 жыл бұрын
Sure! I'm soon planning on making content on UX.
@katherinePH4728 3 жыл бұрын
good presentation!
@DesignXstream 3 жыл бұрын
Glad you liked it! :) Pls do check our insta page for cool design bites: instagram.com/designxstream
@Star.gazrrr 2 жыл бұрын
Thanks, great tutorial. But when I try it, I can't click the 'change to' option. Seems disabled or am I making mistakes?
@DesignXstream 2 жыл бұрын
'Change to' will only be enabled if you choose a frame it will not work on layers!
@nestori1337 Жыл бұрын
what happens at 2:23? where is the component appearing from?
@DesignXstream Жыл бұрын
I created that before hand itself. It is a component created by nesting the smaller components.
@scrambledID 2 жыл бұрын
Great stuff, and very polished! If anyone is out there lol I'm getting snagged on a few things with a modification I'm making to this (I added two items to the dropdown list). 1) the first item in the dropdown list automatically selects itself when hovering over it, 2) the last three items on the dropdown list ease into the wrong item when selected, and 3) the none of the selected states are able to revert back to the open dropdown list (with the exception of the last item, which only allows me to do this once). I'm kind of running out of things to troubleshoot at this point.
@DesignXstream 2 жыл бұрын
Not sure what's that issue. If you can ping me on insta @designxstream I can try to help!
@euphoria4726 Жыл бұрын
Try redownloading the app. That worked for me when app was making no sense and not performing properly.
@rodrigocaldentey8745 2 жыл бұрын
One question, how do I do the hover effect? I mean the transition effect, it doesn't work for me! Thanks!
@DesignXstream 2 жыл бұрын
Each row in the list is a component for which you can assign a hover state.
@judithsluiterapp2attract844 Жыл бұрын
I can’t get that to work. Can you elaborate?
@angelaparrilla1709 2 жыл бұрын
Hey, sorry but the prototype is not working anymore. :(
@DesignXstream 2 жыл бұрын
Hey Angela, I've put in a temporary fix you can duplicate the community file once again and try it.
@yashesvii 2 жыл бұрын
thank you
@DesignXstream 2 жыл бұрын
Cheers! 🤘🏼
@Carroty_Peg 3 жыл бұрын
Thank you so much for this! I wanted to clarify - is this a use of variants? I'm new to Figma lingo, so checking :)
@DesignXstream 3 жыл бұрын
This is using 'Interactive Components' which basically uses variants. This feature is still in beta make sure to apply for the beta program to use this.
@arisaputra5327 2 жыл бұрын
thanks sir
@DesignXstream 2 жыл бұрын
Most welcome :)
@scrambledID 2 жыл бұрын
I'm still new to UX, but I've seen a lot of tutorials. There haven't been any as good or helpful as the content put out by Design Xstream. My projects would be 6 feet under if it weren't for these.
@DesignXstream 2 жыл бұрын
Glad you found it helpful! Cheers ✌🏼
@christianahfolakemi8507 2 жыл бұрын
Lovely tutorial..so easy and straight forward. However, while dragging the instance to my project, I noticed it's blocking the elements under it. When I want to click on those elements, the drop down opens up, like it has covered the elements under. Please is there a way to fix this
@DesignXstream 2 жыл бұрын
Are you using it inside a Auto layout? Then you need to change the stacking mode.
@christianahfolakemi8507 2 жыл бұрын
@@DesignXstream Do I need to use autolayout to create the drop down list? And please what's stacking mode? Thank you so much for replying me
@DesignXstream 2 жыл бұрын
@@christianahfolakemi8507 It is not mandatory to use Auto layout. If you are not using Autolayout then all you have to do is make sure the dropdown component layer is above all. If you still facing issue ping me @designxstream on Insta.
@maaz7159 Жыл бұрын
hey, this is amazing and thanks for making it, just wanted to know if it's possible to add more options to the dropdown menu?
@DesignXstream Жыл бұрын
Yes it is possible but you have relink it again I showed it on the video.
@IAmKeishaPendleton Жыл бұрын
@@DesignXstream I was wondering the same thing, but I don't see it in the video.
@DesignXstream Жыл бұрын
@@IAmKeishaPendleton Ohh I thought I explained this part! Anyway you can check the new free UI Kit I shared that has a dropdown component where you can easily choose the no of options you want. Shared it on this video: kzfaq.info/get/bejne/m5iGqq56srW1iX0.html
@naimasimone_cs Жыл бұрын
@@DesignXstream awesome! Thank you!
@Cuervaud 3 жыл бұрын
Super nice, but when I'm using it in a form, the expanded version goes "under" the item below. I'm stuck here, impossible to find a dropdown component in Figma which overlay properly when expanded, and that keeps the selected item.
@DesignXstream 3 жыл бұрын
If you are using it inside AutoLayout then I think there is no way! If it is not Auto layout then you can just put listbox component above the below below layers in order and it should work fine.
@Cuervaud 3 жыл бұрын
@@DesignXstream Yes, exactly, that was my missing "constraint" > in a AutoLayout. But I'll try to search on this side. Thanks!
@DesignXstream 3 жыл бұрын
@@Cuervaud Sure. Do share with us if you find any workaround. Would love to hear it.
@Cuervaud 3 жыл бұрын
@@DesignXstream there is a rather messy hack called "the double-180", on Figma forum ("Layers order + Interactive components in auto layout"). Otherwise, Figma guys are aware of the issue, but adopting the z-index logic in addition of the layer order looks like a massive logic change > could take some times.
@DesignXstream 3 жыл бұрын
@@Cuervaud That sounds like a really messy hack :D But did that work?
@user-vd6oo9yq8v 5 ай бұрын
Currently evaluating Figma, and if I can't figure out how to add a dropdown in a few minutes, and have to start looking up KZfaq videos on it, then the product isn't very user friendly or discoverable.
@DesignXstream 5 ай бұрын
True that! Figma is not good at this detailed level of prototyping yet... hopefully they come up with these features.
@innachopyk4116 2 жыл бұрын
This is great thank you so much! I was wondering if it is possible to select one of this options and it shows you another drop down. When I try to add a connection on the prototype I don’t have the options showing… how can you go around this?
@DesignXstream 2 жыл бұрын
This is not directly possible in Figma as you cannot add conditional logics however you can try to workaround but it would be too complex!
@satyapravardhan Жыл бұрын
Hi, Can you please explain how to create a nested component? So that I can change all the data at once and it reflects in all variants of the parent component. Please let me know how did you create "change data here" component in the video.
@DesignXstream Жыл бұрын
For creating Nested Components: First you need to create a component in this case I created a text within a frame so this frame becomes our first component(comp. A) then you need to place this component in a new frame(comp. B) that you are creating and then convert this new frame into a component. This was comp.A becomes a nested components in comp B.
@satyapravardhan Жыл бұрын
@@DesignXstream Gotcha!!! Thanks for the reply. I have to place the instance of comp A in all the variants created. So the changes made in comp A reflects in the variants also. I tried now and it works. Thanks a lot man. Got the logic.
@onePJj Жыл бұрын
Very new to Figma, so I feel like I'm missing something here. It's a bit confusing to begin with because the provided screen does not match the one you're working from. Feels like this should be really simple, but I'm lost.
@DesignXstream Жыл бұрын
Hey this is an older method. Now there is a much easier approach to this which I've explain in this video: kzfaq.info/get/bejne/js-kYJh-q66xaGw.html
@Sara-jg2gr 3 ай бұрын
Hello everyone, i have a problem i don’t know how to solve. I have a desktop frame (i think it is called prototype frame) in which i am putting all the components to create the home page of my website. For every section of the page i have created a frame. However, when i link the elements of my navigation bar to the sections of the page (i drag the arrow to the component and i put “on click” → Navigate to (the section of the page) and after that i put the linked section inside the main frame, nothing works both in the presentation and preview mode. Do you have any suggestion? Is it a Figma’s problem or did i do something wrong?😓😓
@DesignXstream 3 ай бұрын
I think you should be using 'Scroll To' instead of 'Navigate to'. Try this, if it doesn't work you can dm me on @designxstream on instagram and I can have a look at your file.
@doreenpaul1236 Жыл бұрын
A simple task is so complicated to be done from scratch 😭.... M still in the learning phase, but do companies usually expect designers to know only basic or advanced prototyping?
@DesignXstream Жыл бұрын
Hey! As a beginner you don't need to be aware of advanced prototyping. Just the basics interactions like navigating and basic animations are more than enough. No company will expect a beginner to create a dropdown like this. So chill you can slowly learn all this after you crack into your first job! All the best 👍🏼
@doreenpaul1236 Жыл бұрын
@@DesignXstream Thanks 😇👍
@CRiStiCole Жыл бұрын
Question, how do I make it so that I am able to click one option in the drop-down and it takes me to another page.Since the component is closed, i tried by placing the component on a frame, right click->change variant->visible options on yes (so I see the drop down)->dragged the prototype from the drop down to another page->then set visible options on no, but unfortunately it doesn't work that way, please a little help? Thank you!
@DesignXstream Жыл бұрын
sorry, I don't get your query. Can you DM me on instagram @designxstream I can try to help.
@ajeethraja3274 3 жыл бұрын
Bro just wanna. I wanna become like you... I mean you do all this on your own right thinking and doing. And I wanna learn UI/Visual design. How can I do it any suggestions.
@DesignXstream 3 жыл бұрын
Hey Ajeeth, Thank you! You can reach me on Instagram @designxstream I can provide you some advice there! 👍🏼
@1XXAylinXX Жыл бұрын
How do I even get there in the first place that is what I was trying to find :/ finding the component first
@DesignXstream Жыл бұрын
Can you elaborate the issue?
@aichaabdel-lahbenaiss5599 2 жыл бұрын
hello! very cool element! However, when I copy paste the file into my page it stops working... do you know what could be the issue? Thank you in advance :) (I am VERY new to figma)
@DesignXstream 2 жыл бұрын
Hope you copied the whole interactive component set with all variants. And then in your new file you need to make a copy of the first/default variant onto your frame. If it still doesn't work then ping me @designxstream on Insta I can help you!
@aniqzikry 2 жыл бұрын
Can you do this but on a navigation bar
@DesignXstream 2 жыл бұрын
Yes, you can use the same method for Menu dropdown as well.
@sreedarshni8670 2 жыл бұрын
Hey! How do we add more options to the drop down menu? For eg: I want to make a drop down menu for countries/ states and I can’t find a template or a component with those many no. of options! So, how do we add them to your component?
@DesignXstream 2 жыл бұрын
Hey Sree, You need to duplicate the selected state variant to the number of option you want to have. This is just to demo how the dropdown behaviour can be shown I wouldn't recommend to show all countries/states that would be lots of options = lots of variants.
@_.adx____i 2 жыл бұрын
how can i add scrollbar incase i needed more drop list can you make an video
@DesignXstream 2 жыл бұрын
I think you just have to set scrolling behaviour for the main list parent frame and give it a fix height to scroll. Have you tried this way?
@sakinasalem6785 2 жыл бұрын
Hi, How did you get the chevron arrow to rotate? I tried with smart animate but it doesn't rotate when clicking. Thanks
@DesignXstream 2 жыл бұрын
In the open state you just need to keep the chevron at 180 degrees and it should rotate.
@sakinasalem6785 2 жыл бұрын
@@DesignXstream oh ok thanks.. I have been using icon components to replace the down chevron with up chevron but i see for animation, you have to make property changes to the same icon. Thanks again 👍
@MrAlexmathias 2 жыл бұрын
Great video! Is it safe to apply for a beta program and use this funcionality in a real project file? No file crashes or so?
@DesignXstream 2 жыл бұрын
If you use too many interactive components the file might lag a bit but other than that I found it works fine just like normal.
@ajibosemoshoodabiola2455 2 жыл бұрын
How do you make each of the items bold on hovering them?
@DesignXstream 2 жыл бұрын
Each row/item is a separate interactive component so you can modify in that.
@dcfavorite 3 жыл бұрын
I have a vertical menu bar instead of a horizontal one. How can I make it so the dropdown menu will make the items underneath move further down and retract when mouse scrolls elsewhere?
@DesignXstream 3 жыл бұрын
Try using autolayout and use while hover animation. So using autolayout will make sure the items underneath move further down on expanding.
@dcfavorite 3 жыл бұрын
@@DesignXstream thank you so much for the explanation
@lx6381 Жыл бұрын
can i export this as a interactive pdf with the dropdown menue working?
@DesignXstream Жыл бұрын
No this cannot be exported to PDF. Only static frames can be exported to PDF.
@karismoffat1968 3 жыл бұрын
How if I have a huge dropdown menu? For example, with a Country list? :/ It doesn't seem like I can use this tutorial. Please let me know. Tks
@DesignXstream 3 жыл бұрын
Figma is jst a basic prototyping tool. For such full fledged prototypes you should look for other advanced prototyping tools like Protopie, UXPin, Framer, etc. They have real input fields and dropdown lists etc. that yu can use for proper prototyping.
@kriswayne7938 3 жыл бұрын
I'm beginner Is anti glare TN panel good for ux ui? Can't afford ips monitor now
@DesignXstream 3 жыл бұрын
Hey Kris, Definitely IPS monitor is much better as it enables you to see your design in good clarity and colors. However, if you are a beginner and cannot afford then that shouldn't become a hurdle to get started... UI design can be done on an anti glare panel as well.
@DesignXstream 3 жыл бұрын
In fact.. you can use the mirror feature to constantly preview the design on your mobile that could let you see the real clarity and colors!
@kriswayne7938 3 жыл бұрын
@@DesignXstream thanks for d reply sir I can see colors perfectly in my old tn panel, it distorts when viewing from not prescribed angles and i don't mind it lol Btw r u self learnt or through university?
@DesignXstream 3 жыл бұрын
@@kriswayne7938 Yes, the distortion reduces the clarity and yah views angles too is a problem but that shuldn't be a problem. And I'm self taught.
@kriswayne7938 3 жыл бұрын
@@DesignXstreami think its good coz it has 16.7 mn colour gamut and that's d main thing we need right?
@barrientoscardenaslinofern4717 2 жыл бұрын
How can I add more fields? I'm newwbie with Figma lol
@DesignXstream 2 жыл бұрын
You need to duplicate the whole component set along with all variant and then you can add it as a new field.
@MissBee23 3 жыл бұрын
I get a interactive beta component error for my prototype and so I can’t use the component. Do you have any insight on this? Great tutorial btw !
@DesignXstream 3 жыл бұрын
Hey Micheala, Interactive components is a feature in beta. So you need to be signed up for the beta program in order to use this.
@kindasport 3 жыл бұрын
@@DesignXstream However, it would have been great if you would have mention that in the video.
@DesignXstream 3 жыл бұрын
@@kindasport I've mentioned it in my previous videos... so in this video I jst put it in the description.
@leonardthillmann9444 3 жыл бұрын
It doesnt work for me. Is there any update that removed the functionality?
@DesignXstream 3 жыл бұрын
Hey Leonard, This is Interactive component which is a feature still in beta. You need to sign up for the beta program in order to use it now or wait for the official release.
@tonywhy9 2 жыл бұрын
Here is the problem I have with your videos: you start with a number of components already made and do things like "Change data here" and "hide this" but not "Here's how you CREATE these components. I can't follow along as someone who is just getting into Figma. You also don't mention the necessary files at the start of your videos (I understand that they are in the description, but it should be mentioned). You mention not wanting to create these from scratch because that will take too long, but that is what so many of us need!
@DesignXstream 2 жыл бұрын
Hey Antonio, I totally agree with all your points. However, I've tried a few in depth tutorials which dint go well with the audience. I'm trying to find the balance in between both so that it's not too lengthy nor too short. Appreciate your feedback! ✌🏼
@Joud3011 9 ай бұрын
i cannot do this 2:51 resize the dropdown list
@Joud3011 9 ай бұрын
i also cant change the size of the list n=and the arrow why?
@DesignXstream 9 ай бұрын
Just make sure the 'Clip Content' of the frame is on then when you resize everything will be hidden. However, this is an old method, Would suggest you try the new one here: kzfaq.info/get/bejne/js-kYJh-q66xaGw.html
@Sam-xq2uh 2 жыл бұрын
(!) How do you sign up for the Beta program???
@DesignXstream 2 жыл бұрын
Goto this link and register: forms.gle/tAxqMQNXuNU4NYmj9
@sadghost319 2 жыл бұрын
How can I add more drop down options within your file? Please help lol
@DesignXstream 2 жыл бұрын
You need to duplicate more variants and add to it. And don't forget to link them on the main variant.
@DesignXstream 2 жыл бұрын
Ping me @designxstream on Insta. I can look at the issue.
@sadghost319 2 жыл бұрын
@@DesignXstream it won't allow me to put any more text options in the drop down with all the other options. I cant move the text or anything
@aero8921 Жыл бұрын
what is he pressing at 5:10
@aero8921 Жыл бұрын
older option? all other option?
@DesignXstream Жыл бұрын
That's a method to make duplicates of a component. You need to press and hold Alt (in Windows) or Opt(in Mac) and drag the compoent. This will create a duplicate of the component.
@anniiket 2 жыл бұрын
If you don't want to explain in detail, why did you create a video in the first place? Experts won;t need this, and novice users won't understand anything. What's the use?
@DesignXstream 2 жыл бұрын
I prefer to deliver quick and crisp content. So I try to keep them short. But I get your point i'll try to make my upcoming videos more detailed.
@johngwinner9941 Жыл бұрын
I think he nails it in this video (with the possible exception of adding new items). I mean, he shows you how to modify this example. A complete tutorial on how to make this file from scratch is a whole different level, in my mind.
@namenl2205 3 жыл бұрын
What is the point is you're not explaining how to make this from scratch 😑
@DesignXstream 3 жыл бұрын
Just wanted to keep the tutorial short. But I think I tried to cover the important part of its creation in the @1:44 and also provided the file. If you still find it confusing them do reach out to me on Instagram I can help! 👍🏼
@Foxis234 2 жыл бұрын
Hiurrr
Mavi Design
Рет қаралды 85 М.
Mavi Design
Рет қаралды 88 М.
DS CODE
Рет қаралды 38 М.