How to create smart accordions in Figma (in-depth) 🎉

Поділитися
Вставка
  • Опубліковано 2 жов 2024

КОМЕНТАРІ • 37

  • @shyxx3324
    @shyxx3324 2 роки тому +1

    Thank you so much! very helpful. exactly what i was looking for.

    • @AdrianoReisDesign
      @AdrianoReisDesign  2 роки тому

      You’re welcome! So glad you found it helpful!
      Lmk if there’s anything in particular you struggle with in Figma :)

  • @chuckleeray
    @chuckleeray 2 роки тому +2

    Thank you for providing the tutorial, it was great. Quick question, how do you do the confetti? That key command doesn't work for me.

    • @AdrianoReisDesign
      @AdrianoReisDesign  2 роки тому +1

      Hey Brian, thanks man! Hahaha the confetti is neat, isn't it? It's actually part of the Loom app (loom.com). If you download they'd desktop app you can have confetti on the screen by pressing ⌃ ⌘ C

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

    When you open another Q the previous one should close on its own ( I mean it shouldn't be two clicks only one click to open the one you want and close the previous one)
    please can you make a tutorial on that

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

      In the shorter video I got a lot of the same question so I pinned the comment there and added a loom link to show how to achieve that:
      ua-cam.com/video/IHgaG6_asjg/v-deo.htmlsi=c2sr9n-zPm4qlFQb
      Hope that helps!

  • @balazsv.4812
    @balazsv.4812 2 роки тому +1

    Great video! I tried it for myself, but something odd happened: if I close all the accordions before checking the prototype, the text I've updated in each accordion option won't show, and I only see the variant placeholder text instead. If I open all of them and then go to prototype, it works perfectly (but it looks bad, because all of them are open).
    Do you possibly know what did I do wrong? Thanks in advance.

    • @AdrianoReisDesign
      @AdrianoReisDesign  2 роки тому

      Hey sorry for the delay. And Interesting! I can't tell off the bat but if you can share the file with me (make sure to set to "anyone with the link can view") I'd be more than happy to investigate for you. Lmk!

    • @jeovaregis1922
      @jeovaregis1922 2 роки тому

      @@AdrianoReisDesign same problem here!

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

      @@jeovaregis1922 hey sorry for the delay. If the layers are the exact same name and it’s still happening it may be a bug. You should try reporting it to figma they usually get back you within 24 hours. Make sure to provide them with a link to a file they can be invited to so watch for sensitive info, if any.

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

    Hi! THis was super useful but I'm having a hard time with making an expandable card with auto layout. The icons keep shifting within the box even though it is large enough and when I copy paste, the interactions aren't working. Any suggestions?

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

      Hi, it's a bit hard to guess what may be going wrong.
      If you are able to send a link that I can duplicate the file I'd be happy to take a look and see if i can find out what is the issue

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

    Thank you very much for your video. My question is the following: after ready, is it possible to export in interactive pdf? I saw that it gives the option to export in .exe too but I wouldn't want to activate the user's antivirus

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

      Hey Mauro, the only “interactive” part of exporting as a PDF would be links that you create in figma.
      I’m not sure about the .exe option you mentioned I haven’t tried it.
      But if you just want to share it with someone you can just make sure in the share settings of the file it’s set to “anyone with link > can view” and then share the link from the prototype to see them working. I’d recommend this route.

  • @Kj-gr9fv
    @Kj-gr9fv Рік тому

    I am designing a filter menu that shows color swatches and checkboxes rather than plain text. Running into issues trying to edit content that looks different in each accordian menu. Would I make separate varients from the main one or would it be better to design each filter item as seperate components and then combine them together somehow to make one large list? Appreciate any advice! 😊

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

      Hey KJ, yeah i think i'd create more variants in that case since it's not only text :)

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

    there is an issue on if i want to show one open when the user land.

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

      Hi, all you'd need to do in this case is that on the design itself you'd change the state of the accordion you want to show as opened to "open" and it should work as expected.
      If you'd like me to take a look at your file feel free to share the link and i'd be happy to see if there's any issue with the setup

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

    Great! Thank you so much! :D

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

    I've tried following this tutorial and your previous one, but for some reason my menu options don't automatically adjust down when you open them like yours do? Instead, you open one of the menus and the open text covers all the other menus?

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

      Hey, thanks for watching both of the tutorials and sorry you’re having trouble. I’m away from my computer right now but I wonder if you have the frame wrapping all the accordions as a vertical direction auto layout and set to “hug contents” ?
      I’ll check a bit later on my computer and leave a comment again. But in case you’ve figured out please let me know what was causing it.
      Thanks again!

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

      Sorry for the delay but here's a quick video response that may help you: share.cleanshot.com/jinKbc
      Let me know if you're still having trouble. Thanks!

  • @federicofarina66
    @federicofarina66 2 роки тому

    Very useful for FAQs bravo! BTW which tool do you use to check and inspect font size, padding, etc in a website?

    • @AdrianoReisDesign
      @AdrianoReisDesign  2 роки тому +1

      Hey. Federico, glad it was helpful! the tool is actually the built-in "dev-tools" in chrome. If you're on mac the shortcut i use for it is ⌘ ⇧ C

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

    Thank u so much , I ve been stragling with it for a while

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

    Super helpful. Exactly what I was looking for❤

  • @felbart
    @felbart 2 роки тому

    Very good, thanks for your explanation. Valeu man!

  • @nicolasbava3467
    @nicolasbava3467 2 роки тому

    Hi broo, such a pro desing, love the details.

  • @paulenz
    @paulenz 2 роки тому

    Legend!!!

  • @TheFirdiansyah
    @TheFirdiansyah 2 роки тому

    Very helpful thanku so much

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

    thanks