How to create an interactive sidebar menu in Figma using interactive components ⚡

In this tutorial we're going to go through the process of building a fully interactive sidebar navigation menu in Figma.
Learn how to bake in hover and active states to your components and see the sidebar in action, ready to integrate into your high fidelity prototypes.
Download the Figma file, with extra styles for free here:
www.figma.com/community/file/...

Пікірлер: 66

  • @ScruffyLookinNerfHerder
    @ScruffyLookinNerfHerder Жыл бұрын

    Super helpful. Glad you went through the trouble in spite of the headaches. Thank you

  • @JustUXChannel

    @JustUXChannel

    Жыл бұрын

    Thanks Michael! Really appreciate it :)

  • @geecee5195
    @geecee5195 Жыл бұрын

    Brilliant - thank you for this

  • @hokaisiang6834
    @hokaisiang683417 күн бұрын

    Clear and Concise! Thank you!

  • @JustUXChannel

    @JustUXChannel

    16 күн бұрын

    Thank you mate! I'm still surprised this gets views, I wish I could update the audio :D

  • @adrianozuna875
    @adrianozuna8754 ай бұрын

    Hey man thank you so much for this video. I definitely learned a lot,

  • @JustUXChannel

    @JustUXChannel

    16 күн бұрын

    Thank you mate!

  • @QamarAmin
    @QamarAmin2 жыл бұрын

    Absolultely love this . Thank you so much for the tutorial, it was really helpful

  • @JustUXChannel

    @JustUXChannel

    2 жыл бұрын

    Thank you! Made my Friday!

  • @QamarAmin

    @QamarAmin

    2 жыл бұрын

    @@JustUXChannel You deserve 100K subs

  • @JustUXChannel

    @JustUXChannel

    2 жыл бұрын

    @@QamarAmin Thank you bro! Let me know if there's anything you want to see covered in the future :)

  • @QamarAmin

    @QamarAmin

    2 жыл бұрын

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

  • @QamarAmin

    @QamarAmin

    2 жыл бұрын

    @@JustUXChannel Maybe something like. Different Prototyping hacks , tips and tricks

  • @sahrulamir5130
    @sahrulamir51302 жыл бұрын

    this video is better than figma official tutorial, wish you upload more figma videos.

  • @JustUXChannel

    @JustUXChannel

    2 жыл бұрын

    Thank you!

  • @lorrainekanana3094
    @lorrainekanana3094 Жыл бұрын

    Super helpful thank you

  • @JustUXChannel

    @JustUXChannel

    16 күн бұрын

    💚 Thanks!

  • @patrickjohnson3143
    @patrickjohnson31432 жыл бұрын

    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

    @JustUXChannel

    2 жыл бұрын

    Not sure what you mean about multiple components? Is this the same as 'variants' I use them here for the nav links to define the interactive states

  • @bigtutos5804

    @bigtutos5804

    2 жыл бұрын

    Very true, I will just need a component set of icons, then 1 menu item component with 2 other variants.

  • @namuh87

    @namuh87

    2 жыл бұрын

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

  • @JustUXChannel

    @JustUXChannel

    2 жыл бұрын

    @@namuh87 Ah yes I know what you mean, would have saved me some time for sure XD

  • @jmilr

    @jmilr

    2 жыл бұрын

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

  • @muhammadriaz9137
    @muhammadriaz9137 Жыл бұрын

    Thank You !

  • @JustUXChannel

    @JustUXChannel

    Жыл бұрын

    Thanks for watching mate!

  • @ajaygovinds
    @ajaygovinds2 жыл бұрын

    Insightful ..thanks 💙

  • @JustUXChannel

    @JustUXChannel

    2 жыл бұрын

    Thanks Ajay! I'll try and do a new one soon to factor in the new Figma features that make this kind of work super quick

  • @ajaygovinds

    @ajaygovinds

    2 жыл бұрын

    @@JustUXChannel Appreciate the effort you put to support the Design community bro...

  • @cherryayu2881
    @cherryayu28813 ай бұрын

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

  • @JustUXChannel

    @JustUXChannel

    16 күн бұрын

    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!

  • @entrinsek9230
    @entrinsek92302 жыл бұрын

    🤩 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

  • @JustUXChannel

    @JustUXChannel

    2 жыл бұрын

    Thanks so much for the kind words mate! Good luck with your website! I hope I'll have time soon to make more videos

  • @mutohirmarklee9187
    @mutohirmarklee91874 ай бұрын

    Thank you so much

  • @JustUXChannel

    @JustUXChannel

    16 күн бұрын

    🙌 Thanks for the positive comment!

  • @deipty222
    @deipty2227 ай бұрын

    how to show the toggle effect ?(when one is selected/turns blue the rest should remain in default state) Thanks!

  • @Nick-oz1ex
    @Nick-oz1ex Жыл бұрын

    Wish this didn't have the loud music over it

  • @obiomaajoku7233
    @obiomaajoku7233 Жыл бұрын

    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

  • @moatterkhalid732
    @moatterkhalid7328 ай бұрын

    thank you it was great help, please lower down the background volume for next videos, music in this one was really distracting

  • @JustUXChannel

    @JustUXChannel

    16 күн бұрын

    Thanks, and true, will do!

  • @gsharma1
    @gsharma12 жыл бұрын

    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?

  • @JustUXChannel

    @JustUXChannel

    2 жыл бұрын

    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.

  • @sharonchigorom9248
    @sharonchigorom9248 Жыл бұрын

    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 ?

  • @JustUXChannel

    @JustUXChannel

    Жыл бұрын

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

  • @alexnguyen4406
    @alexnguyen4406 Жыл бұрын

    Thank you! This video helps me a lot. But for me, the background music was equaly volumed with your voice.

  • @JustUXChannel

    @JustUXChannel

    16 күн бұрын

    Thanks for the feedback, and understood re volume

  • @jowjowdrums
    @jowjowdrums2 жыл бұрын

    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!

  • @JustUXChannel

    @JustUXChannel

    2 жыл бұрын

    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!

  • @jowjowdrums

    @jowjowdrums

    2 жыл бұрын

    @@JustUXChannel Will try to do that! Thanks so much! Appreciate your reply =)

  • @anonimoxd8896
    @anonimoxd8896 Жыл бұрын

    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

  • @diogosilvestredoregovalenc7
    @diogosilvestredoregovalenc7 Жыл бұрын

    Song too loud bro. but thx for the video ;)

  • @JustUXChannel

    @JustUXChannel

    Жыл бұрын

    Yeh I wish I could change the audio now :D Thanks for the comment!

  • @8yearsgang
    @8yearsgang4 ай бұрын

    Great, but the elevator background music is too much :)

  • @JustUXChannel

    @JustUXChannel

    16 күн бұрын

    100%, I wish I could edit it down in retrospect

  • @barakatnocode
    @barakatnocode Жыл бұрын

    The background music is a huge distraction.

  • @s.durbar1294
    @s.durbar12947 ай бұрын

    RIP "Combine as Variants" option on the right menu

  • @JustUXChannel

    @JustUXChannel

    16 күн бұрын

    😭 This haunts me tbh

  • @ronithk9241
    @ronithk9241 Жыл бұрын

    i wish this video was without music...:(

  • @JustUXChannel

    @JustUXChannel

    Жыл бұрын

    sorry mate, next one I'll sort the levels out better!

  • @ronithk9241

    @ronithk9241

    Жыл бұрын

    Thank u.... will look forward for more tutorials...

  • @vikrampataskar1531
    @vikrampataskar15312 жыл бұрын

    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

    @JustUXChannel

    2 жыл бұрын

    Hey Vikram, noted. Will definitely use much quieter music in the future, thanks for the feedback :)

  • @oposkainaxei
    @oposkainaxei Жыл бұрын

    Thumb down for the annoying music. Couldn‘t watch to end.

  • @JustUXChannel

    @JustUXChannel

    Жыл бұрын

    Hey man, it's true the music is way too loud, I just can't retroactively change it. Hopefully it's better on newer vids.