Accordion Menu Figma - How To Create A Accordion Menu
HTML-код
- Опубликовано: 2 июн 2024
- From this video, you can learn, how create an accordion or collapsible menu in Figma. And, these types of menus are used for FAQs in a website design. For creating an accordion menu Figma smart animation and auto layout comes in handy. Please visit: 👉 essentialwebapps.com/
=====================
Courses
-------------
Ultimate Figma Megacourse: UI/UX Design Beginner To Expert
👉 rb.gy/odk72
-------------
Learn Figma for UI UX Design Within 1 Hour In 2023
👉 rb.gy/omoor
=====================
In a website UI design, collapsible menu is one frequent use element. Not just in FAQs, but it is also used to organize complex menus with more interactive and user-friendly way. So, every now and designer might search for, how to create a accordion menu. And, on that note, we created this video.
Accordion menu design might not be a challenge, but prototyping is. This type of collapsible menu animation in Figma might be bit tricky. But, don’t you worry. We tried our best to explain it as easily as possible.
All you have to do just follow us with this Figma tutorial. And, you can use the trick in no time in your design. Please note, few of the features might only work on beta version of figma. So, to be enlisted under component beta version of figma, please fill up the below form by Figma,
docs.google.com/forms/d/e/1FA...
#Figma #according #menu #animation
__________________________________________
Our Products
----------------------
Check our all Premium and Free WordPress Themes -
essentialwebapps.com/wordpres...
__________________________________________
__________________________________________
Reference
---------------------
Auto Layout
• Auto Layout Figma - Ho...
---------------------------------------------------------------------
We Covered,
• accordion menu Figma,
• how to create a accordion menu,
• accordion menu design,
Please Visit Our
Blog: essentialwebapps.com/blog/
Follow us,
Pinterest: / essentialwebapps
Instagram: / essentialwebapps
Facebook: / essentialwebapp
Twitter: / essentialwa
If you enjoy the tutorial video, you can help us with a LIKE as well as give your feedback in the comment section. We will greatly appreciate it if you share this "Accordion Menu Figma - How To Create A Accordion Menu" on Facebook. Your share can help other people to learn to design better UI using Figma.
Music by MBB / mbbmusic
// DISCLAIMER
▸ This is NOT a sponsored video.
▸ Some affiliate links are used, which means that I earn a small commission if you click the link and make a purchase. It will not cost you extra but help me create more content for our Audience.
▸ I only recommend things I have had great success with.
🎯 Check out our latest Ultimate Figma Mega-Course ➡️ rb.gy/odk72
Hola, 👌 creo que contigo aprenderé bastante. Estos tips valen oro. Me ayudara mucho reducir las horas o días que le toma hacer el diseño y prototipo 🥵
Amazing tutorial! Thank you so much ✨
Thank you so much for your feedback. Your words mean us a lot. Please keep in touch 🙏
Hi thanks for the tutorial, this is great! I do have a question around the prototyping - after i expand say the 3rd card, it doesn't allow me to do scroll down further despite me having adjusted the scrolling behaviour.
I am sorry, we couldn't figure what do you mean by "doesn't allow me to do scroll down further". May you please give us a bit more information. We will be happy to help with the issue you are facing.
Amazing tutorial! Thank you!
Thanks a lot, we really appreciate. Hope you will subscribe for more. 😊
Thanks so much!
looking for it for about months. Great video. Thanks
Thanks, keep in touch for future videos and please don’t forget to subscribe and share 🙏
exactly what i am looking for, thank you
Good that it helped 👍. Please keep in touch for future videos 🙏
Great content, thank you!
You are most welcome 🙂
Just what I needed. Thanks.
You are welcome 🙂
oh my god. this tutorial is soooo simple!!! love it
Thanks a lot for your good words. We post new videos every week. I hope you will subscribe 😊
Tremendous, thanks for that contribution, I didn't even know that you could achieve that with figma.
I really appreciate your feedback 🙏. Please keep in touch for future videos.
Great !!!
So nice, thank you man!
Your are most welcome!
very informative, Thank you 👌
Glad it was helpful! I hope you will subscribe 😊
Everything works EXCEPT when I replace the body text. If the text that replaces it is longer than the original text, the autolayout does not adjust to accommodate and it overlays the menu item below. How do I make it adjust?
Excellent tutorial.
Thank you very much.
Greetings from Peru.
Thanks a lot for good words. I hope you will subscribe 😊
Thank you for share it! :)
You are most welcome :)
Thankyou so much! you're the best!!!
You are most welcome 🙌. Please keep in touch for more videos 🙏
Hi (: great tutorial! I just have one question. My accordion is working perfectly, but is there a way to make the whole frame responsive to it? I feel like theres a lot of blank space when the accordion is inactive. Thanks!
Thanks for the comment. You can easily do it by converting the whole frame to an auto layout. I hope this helps and hope you will subscribe 😊
Great tutorial! Thanks so much 🌸👏
I followed all the steps , but after combining the different states into variant , when I started prototyping , there was no (on click ) option available between em .. idk why , so couldn't work with me
Thanks a lot for your comment. Few of the features may only work on components beta version, till now. There is a form link in the description. Fill it up to be enlisted. BTW, Figma might take some time to enable the features. Thanks again for being with us.
Yes. But is there a way to push all elements below this on the page down once initially opened? I'm used to Axure allowing "push all widgets down". I need Figma to do something like this so the whole page is truly interactive. Is that possible? If so how?
Thanks for your comment. Well Figma has a good set of interactive prototyping options to make the design as interactive as possible. You can test and trial that. 😊
Put them in an auto layout as well.
hello. First of all thank you for the video. It was very useful. I am starting to learn figma and would like to know is an accordion should be learnt by a UI/UX designer or a developer.
Thanks a lot for your comment. It is actually up to you, your dev team and your clients. After all, prototyping is for better visualization of the final product for your clients and your dev team. I hope you will stay with us for future videos. 😊
This is great! is there a way to allow more than one section to expand at once?
yes you can do it, but you have to assign a different component for that state. I hope this helped and hope you will subscribe 😊
Got the basics. However, also want to know how to make this look as if text appears (slides down) along with its background box/pocket? Right now the box slides from the top, but text appears from the center same point. Thanks!
You can do it easily. You just have to put the text inside a frame (text-frame) and in the previous Frame, you just have to put the text outside of that text-frame and place it at the top. So, in the next frame, it will come down after you add the smart animate. I hope this helped and hope you will subscribe.😊
Nice simple and clean keep going
Thanks a lot, we really appreciate. Hope you will subscribe for more. 😊
So this tutorial was great and I've built my accordion menu (though I only got access to the beta today). Now, however, I need to put it in a frame that expands and contracts with the accordion; is there a way to do that? Or do I need to make a new set of components that include the surrounding frame?
Thanks a lot for your comment. You are right. You do have to make a new set. If there is any other way, I will definitely let you know. Thanks again for staying with us. 😊
How amazing are you? Thanks a tonne brother!!
You are most welcome and thanks a lot for your kind words 😊
thanks
it is really amazing video
I am glad this helped and hope you will subscribe 😊
Good video, very helpful and informative - not a fan of the robot voice though!
Thanks for your kind words :)
I created this asset successfully but I have a question. If I want to change the content in it it replaces with what was in the asset. Do I have to recreate the prototyping asset every-time I want the content in the accordion to be different? If I don't when I open the accordion the content reverts to what was in the original asset?
Thanks a lot for your comment. You do not have to change the content in the parent component. You can easily change the content in the child component, as much you need, without altering anything in the parent component. I hope this helps 😊
Sir can you help me with my personal high fidelity prototype, please sir , I am having trouble with interactive component and dropdown calendar and time.
Thanks a lot for your comment. But, sorry to say, we might not be able to help with personal work at this point. Maybe in the future, we may think about it. For now, all we can assure you, we will make a video on Calendar and Time dropdown using Figma. Thanks again for being with us. I hope you will subscribe. 😊
Very useful video, do you know how can I implement in React?
Hi,
Thanks for your question. I do not have experience in React but I would say from a Figma Design, you can have each part CSS and then your probably can apply the same way as your other react projects 🙂
This is probably the only video that shows accordion menu in Figma that I could find, but too fast and not enough explanation or verbal instruction between major steps.
Thanks a lot for your feedback. We will keep it in mind for our future videos 😊. Keep in touch and please don't forget to support us by subscribing and sharing our videos 🙏.
Hey, First of all thank you for the video. make sure highlight your mouse pointer in your videos coz it's hard to see the mouse pointer when it moving fast and what to click. Thanks.
Thanks a lot for your valuable suggestion. We'll keep it in mind for our future videos. I hope you will subscribe to our channel for future videos. 😊
thank you dude
You are most welcome 🙂
Hi.. This video is so helpful. And I tried it. But it was not working because it didn't have some features. So I filled the form for beta version. but when will I get the beta version?
Thanks a lot for your comment. Actually it may take few days or so. But, fully depends on Figma.
Me too. It's just a fake.
Hi, me again. You may know why the option "change to" don´t appears on my figma version?
Thanks a lot for your comment. Few of the component features, such as "Change to" only available for interactive components beta. There's is a link for be enlisted for the beta version in the description. BTW, it may take some time from Figma end to enable the features.
Hello, good video, when I combine the variants it does not allow me to prototype, why does that happen?
Thanks a lot for your comment. Unfortunately, few of the variant features are only supported in the beta component version. You will find a form by Figma to be enlisted for the beta version in the description.
@@essentialwebapps Ahh!! I had been trying to do this for last 4 hours and I thought I'm doing something wrong 😭 Thank you for this response, next time can you please mention it in the video so someone who dont have access to beta wont waste hours trying to do what you're showing 😊 Thank you for the tutorial though. Have a great day
@@uploads136
I'm sorry that I did not say it in the video. Many thanks for the feedback. We'll noted 😊.
Hello, I followed same tutorial but prototyping is not working , i even signed up the form for interactive media bt didn't get any response on email.. what else can i do?
Thanks a lot for your comment. Figma may take some time to enlist for interactive components beta.
Not super descriptive, which can be good and/or bad, and not my favorite to listen to the generated voice, but overall very helpful. Thanks.
We really appreciate your valuable feedback. We will make more useful videos. And we hope you will subscribe for those 😊
which text to speech software are you using?
You will find the link in the description.
There is something we cant quite see in this video. How the Options for the other different components are set. I am stuck on this part. When i trigger the variants, the texts of the first component appear on all components. Any Help??
Thanks a lot for your comment. If this happens. Try to disconnect all the prototype links and then reconnect again. And, always do the prototyping after you complete designing all the components in the component variable frame. I hope this helps. 😊
@@essentialwebapps It worked, a million thanks!
Don't k ow
How long will it take me to learn this
Somehow this tutorial is better than anyone else who's actually using their real voice.
please share source file with us
Thanks for your feedback. We are preparing all of our tutorials source file, and will make these available for for download 🙂 hopefully in few days.
its for beta version of figma
Thanks for your comment. Few of the features of the components might be from the beta component version. So, it will be safe to be enlisted in the beta version for this. You will find the instructions for it in the description.
@@essentialwebapps thank you for reply I wish you attached figma file here so we can reuse the frame 😁😁
@@visheshgour Thanks a lot for your feedback. We have prepared all the raw files of all of our Figma tutorials. Soon we will upload those for you. Thanks for staying with us.
Creepy. Soon, Ai will be watching these auto-generated-voices telling them how to steal our souls...
Figma really isn't great for prototyping. It's a shame that you need to go through so many steps in order to make something so simple as an expanding list. If you need to connect every single button in every single list to every other list, the amount of connections you need to make could get exponentially high. This tutorial only covered what to do if you want to open only one list. What if you want to have multiple lists open at the same time? You then have to make even more connections. On a 10-item list, this could easily result in hundreds of connections.
Thanks for your comment. In Figma we use components, and component variants to do that. Just make it once, and use that in several places. If you need to change something, you just have to change the mother component, and all the other components will be synced. But you are not wrong. As far as our experience tells us. None of the software is perfect yet. Thanks for your valuable opinion. 😊
Yeah, we all love tutorials like this one ... that has backing music even though it is totally unnecessary and very annoying, and better still, like this one, when they have no clear step-by-step explanations of each step that needs to be completed - because we all want to see the steps rushed through because its only the end result that matters, and it matters not that such 'tutorials' leave many with little to no more clue as to how to do what we were hoping the tutorial would teach. Thanks for nothing, Essential Web Apps Guy.
Yes, maybe if one watches the video tutorial at a slower playback speed - maybe doing so multiple times - it might be possible to figure out what was rushed through in this video tutorial ... however, call me bonkers, but I'ld rather that the person teaching, does so ... at a pace that one can follow along even if they are new to Figma.
Thanks a lot for your feedback. We understand that this video is not the best one. We made a mistake, and I guess that's how we learn. Thanks again for your very observations for the video, and your helpful feedback. We will try our best for future videos. 😊
YEah i agree, its horrible.