Collapsable Sidebar Animation in Figma (Easy)

Поділитися
Вставка
  • Опубліковано 13 бер 2023
  • Learn how to make this animated collapsable sidebar in Figma! Build frames and prototype your animation while using the best auto-layout techniques.
    👇Get the Studio Pass
    bit.ly/49COJNQ
    👇 Try Figma for FREE
    bit.ly/figfree
    👇Download Figma For Pros
    bit.ly/fig-pro
    🚀 Subscribe for more Tutorials
    bit.ly/3T22qMZ
    📥 Buy Design Files & Merch
    bit.ly/3WuUl6D
    🌎 Find Me on Social Media
    Tiktok: bit.ly/3U7TdnQ
    Instagam: bit.ly/3fF9hyf
    Facebook: bit.ly/3ML5axg
  • Навчання та стиль

КОМЕНТАРІ • 34

  • @mimobenslimen7035
    @mimobenslimen7035 Рік тому +1

    thank you for the tutorials 👌

  • @chiomaezeugwu7800
    @chiomaezeugwu7800 Рік тому

    Thank you so much 🎉

  • @akashparadkar882
    @akashparadkar882 Рік тому +1

    Thanks Bro. Its very east to follow.

  • @user-ze9jg6xg9w
    @user-ze9jg6xg9w Рік тому +3

    Thank you. You are probably one of the best on this platform with your tutorials. Pls post More.

  • @apoorvamhalsekar409
    @apoorvamhalsekar409 Рік тому +2

    This is fantastic and so well put. Would love to see more of these✨

  • @DiviNe136
    @DiviNe136 10 місяців тому

    Thanks so much for the video, started to know a little more.

  • @julianamadeiradesigner
    @julianamadeiradesigner 8 місяців тому

    I Love it! Thank you!

  • @apurbohoque6829
    @apurbohoque6829 Рік тому +1

    Good shit ❤

  • @nainishkuthe8582
    @nainishkuthe8582 2 місяці тому

    It was incredibly helpful and provide clear guidance on a creating a sleek and functional sidebar interface. Thank you so much 👍

  • @chaipat0_0
    @chaipat0_0 Рік тому +1

    thank youuu😍

  • @AlexGamerShow1
    @AlexGamerShow1 Рік тому +1

    It was great, I get motivated by watching your videos

  • @rezkitabmagang
    @rezkitabmagang Рік тому +1

    salute bro

  • @imca-b-10rajwanijatishmano4

    Thank you for this wonderful tutorial!!
    How can we change icon color for both while hovering and when clicked?

  • @sershi97
    @sershi97 3 місяці тому

    Good job, thanks for you tutorial
    Very aesthetic

  • @d2ka
    @d2ka Рік тому +1

    Learn how to use space between and stop creating invisible rectangles ;)

  • @thebram
    @thebram 8 місяців тому

    How about if the menu has a submenu, it drops down if you hover to a menu option?

  • @dailyquotes-
    @dailyquotes- 5 місяців тому

    I wanna do a scroll down one ..when we click on 3 dots in chrome the menu opens like that but i am not able to please tell me how to do it 😊

  • @fewcharecords1339
    @fewcharecords1339 9 місяців тому

    What are the benefits or reasons for creating a side menu like this ? I see a lot of designs like this

  • @Goofykumar676
    @Goofykumar676 Рік тому

    There is an error after mouse hover full text displayed in collapsed state
    Here you showed the hover state after the expand collapse
    It does not work well after the hover

  • @narendrapotturi548
    @narendrapotturi548 4 місяці тому

    How to integrate this with Power bi ?

  • @dunsindavid5446
    @dunsindavid5446 Рік тому

    Please how did the vector you option dragged from the “button template” become a dashboard???

    • @shmeltstudios
      @shmeltstudios  Рік тому

      When you option drag the vector off of the button template, put it into an auto layout (shift a) and name it dashboard, then put it into your icon section

    • @dunsindavid5446
      @dunsindavid5446 Рік тому

      @@shmeltstudios thank you

  • @dunsindavid5446
    @dunsindavid5446 Рік тому

    Cause on mine it’s still named vector

  • @jerronickog9933
    @jerronickog9933 2 місяці тому

    Then how to prototype?

  • @user-de5ud9vy8i
    @user-de5ud9vy8i 11 місяців тому

    Вопрос... зачем раскрывать схемы конкурентам?

  • @saarsharabi5397
    @saarsharabi5397 Рік тому

    CANT 👂 !!!!

  • @DanielCodes-xyz
    @DanielCodes-xyz 3 місяці тому

    Maybe you can help me with a quick question. I made a similar menu, but I have 3 states. A default, hover, and clicked. If you collapse the menu, click a button, then expand it again, the button remains small and doesn't expand back to full size. It works the other way around, if you click a button (set it to clicked state), then collapse the menu / expand it, it functions as it should.
    I can't figure out why that is. It's only when you click a button while the menu is collapsed that it starts getting screwy.