@@JustUXChannel thanks. and may ik, do u have any tips on how to make the blue thing disapear after clicking on other ui? for example, i click on the "audio devices" it turns blue, then i click on "locations" it turns blue to. so any tips on how to make the "audio devices" blue disapear after clicking "locations"?
You might not see this comment or respond, but i'm following along and having issues with my icon only button - the button size is smaller in width even though i fixed it to 40x40 fixed in the tutorial like you did. Any thoughts?
Simple things like that eats your brain fking out, i been trying it like whole damn evening without watching any tuto, finally gave up & cool down a bit & decided to watch your video for the practice I'm doing, But made me realize the simple things you think you know, sometimes they torture you damn bad, & dont let you rest in peace ( :
Ah hope you managed it in the end, let me know if you have any questions! Stay with it buddy, design takes a while to get a hang of, but you'll make huge improvements before you know it!
hey man, just wanted to say that it was great to stumble upon someone who just makes quality material, straightforward, step by step, everything described. Cheers!
I notice you don't use .base component. Just curious about why that is? I'm trying to set up our button components using a .base and running into some boolean property issues and wondering if that's why.
With the component properties, it became less necessary to have base components, which make the components harder to maintain ime. With boolean properties / toggling on and off icons etc I've found it's easier to build them without base components. Some other more complex components can still be useful to build with a base component but I'd say it's safer to build buttons without them. Hope that helps :)
Awesome tutorial! This was genuinely the most helpful and to-the-point guide I came across during my research before starting my work on a new design system. Really love your setup to make all the variants and properties editable/toggleable from that original "master" button. Makes everything so clean and easy to understand for both designers and non-designers. Looking forward to watching some of your other tutorials. Cheers man! 🤘
I got this error using ExportKit and I really need to use it: Component set for node has existing errors. This happens when you have invalid/duplicate variant(names). I changed every name but that doesn't fix anything. Pls help
i think you can use one component and make an active and passive state for it and use it in your side bar and just rename them lol except you want to always know the page you on
Very insightful video but after creating these components and prototyping them, how are you taken to thier individual screens? For instance, when I click on audio, and it becomes active, how do I get to the audio screen ?
Hey you'd have to create the screens and then manually set up prototype connections from each link to the respective screen. Hard to describe in comments but will try and make a quick video on this :)
🤩 very amazing i will watched again again while i will create the same think to be famlliar with it, you will be a creat youtuber soon, nice topic, please do more videos like this i am bulding my website these days
Thank you for this! I have a question though: What happens if you click let's say "Audio Devices button" once, and then click the "Locations button" right after? Is it going make those 2 buttons have an active state at the same time? If so, how are you going to prototype the "Audio Devices button" going back to its default state after you click another button? Much love!
Hey Joshua great question! Currently there isn't conditional formatting in Figma, so you would have the unnatural state of having two active links in the menu. You could overcome this by building screens connected with each section. E.g. Audio device screen (Then set the related menu link active via the component properties) You can then do this for all areas in the menu and then connect them via prototype connections. If you just want to test a few screens and avoid the rest of the nav, I'd de-connect them in the prototype settings so you could essentially restrict the users navigation to the areas you want to test. Hope that makes sense, sometimes hard to describe more detailed stuff here!
Everything is fantastic, including your presentation and skill, but your background music is pitiful and irritating. Man Because of your background music, most of the words are difficult to understand. Please work on that, or watch other youtube videos.
@@JustUXChannel I think you should work on Prototyping becuase many poeple are covering general things . Be specific and It will help you stand out from the rest and imrpove your channel growth
A few tips: 1. If you select all the components, you can 'create multiple components' from the component dropdown in the top bar. 2. If you created one component for all your icons (or use a font icon) Then create one component for your menu item - then create variants - one hover state, one selected state and one default state. Then use overrides to change the icons and text.
@@JustUXChannel there's an option for multiple components. so instead of choosing 1 by 1, you just have to select them all and theres an option to create multiple components.
Being used to using 'base components' made this hard to watch 😅 Great video otherwise! To add to Patrick's tip around creating multiple components; you can create prototype connections without configuring them then configure them in bulk afterwards in the sidebar - makes it much easier to adjust & test until it feels right. Might be enough for a whole separate video with the new variant property types (e.g. to override the icons & labels).
Thank you so much for this tutorial-very helpful and timely for how I'm trying to learn Figma! Two questions came to mind: 1) What if I wanted the default state to be pre-selected to the top item in the left nav (let's assume it's the home page), then how would I need to do anything differently in the interactive component? Or would I just simply choose the active state in the prototype when I'm starting? 2) What would be your suggestion for how to keep only one left nav item selectable at a time?
Hey so glad you liked it :) Thanks for the feedback! 1) In the main sidebar component you can select the link you want to be active and then switch its state to active in the properties panel. Then every instance of the sidebar itself will have this item active as default. Check the Figma community file, as it'll be easier to understand with the source file. 2) I don't have a great answer for this one as there is still no conditional logic to Figma prototypes unfortunately. However when you build out a prototype, if every navigation link is connected to a unique page in the prototype, it will behave like you described, as each click will jump to the related page and the connected nav link will be active.
