Design And Animate An FAQ Accordion In Figma
HTML-код
- Опубликовано: 17 фев 2023
- In this step-by-step tutorial, I'll show you how you can design and animate a collapsable faq component in Figma.
We'll start with designing the basic structure of our accordion. We'll start by building out the frame that will represent the question portion of our accordion. Once we set that up, we'll add another frame that will act as our answer container.
Will then make it a component and add a variant. In our example, the default variant will be the unopened state and the other will be the opened state.
Finally, we will set up an animation so our prototype has a working FAQ accordion.
---------------------------
Disclosure: There are affiliate links below, and I may receive commissions for purchases made through these links.
Tools/Resources I'm Currently Using :
💻 Apple 2023 MacBook Pro Laptop M3 chip
amzn.to/47iLnyh
---------------------------
👉 Access the world’s largest library of Figma & Webflow components
library.relume.io/?via=brian
---------------------------
👉The SEO Plugin for Webflow
Audit, score and optimize your website right in the Webflow designer.
www.semflow.com/?via=brian
---------------------------
👉Try Webflow
webflow.grsm.io/dn8xly95yi9g
---------------------------
👉 Test your websites on 2000+ browsers with LambdaTest
www.lambdatest.com?fp_ref=brian22
---------------------------
👉 Tired of wasting thousands of hours starting from scratch on every project and rebuilding the same components? Check out Untitled UI. Save thousands of hours, and level up as a designer.
untitledui.lemonsqueezy.com?aff=p27pE
---------------------------
👉Sonduck Film Motion Graphic Templates
www.sonduckfilm.com/?ref=22
---------------------------
👉 Envato Elements
1.envato.market/yR6A4b
---------------------------
👉 Use BRIAN99512 at checkout and get 20% OFF at FULLERMOE. Watch a demo here! fullermoe.com/welcome
---------------------------
#figma
HOW TO CHANGE QUESTIONS OF EACH
COMPONENT
been struggling with this all morning, thank you sm.
Great video. Thank you!
So simple and helpful. Thank you
Great video! You explained everything super well and made it simple to understand, thank you! 🙂
Thank you for the detailed video. It was easy to follow and it works great! I made it with a responsive width.
Straightforward, easy to follow. Thank you so much, sir! 👍
Awesome!!! Just worked perfectly
Goodness. This is way helpful and simpler than other tutorials. Thank you so much!
Thank you
Thanks for talking me through this nice and slowly (unlike most Figma tutorials I try to work along with). Just subscribed.
Awesome!
Glad to hear you got some value from the video
thanks dude
OMG thank you I watched so many tutorials before yours and couldn't get it but now I got it! 💪 haha you da best!
Thank you so much! Really appreciate the feedback and glad you got it to work
Thank you, this helped a lot! Yet after a while, the down arrow icon stopped rotating and “dissolve transitioned” into the up arrow. Is Figma just tired?
Brilliant tutorial. Well presented.🤟
Thank you so much, Steve
Really appreciate it
Thank you sir
Thank you! This is the first video on accordions that is so simple! I followed every step to create mine.
thanks a looooooooooooot ❤❤❤❤
usefil tutorial, tx
Thank your for your video which is easy to follow and not too fast. I subscribed 😁.
U have a question what if I want to add an icon on the left side of the Question portion. Will it be the same process?
Should be the same process...just include the icon in the unopened and opened state
How do I do this for multiple questions pls?
hi brian, I have been working on a self project which utilises accordion, although I haven't been able to get the animation right, is there a way I can reach you with my prototype?
sure thing
lovebrian649@yahoo.com
Excellent vidéo. Thanks. How could you edit the content of the other questions/answers you created?
HI LXP Academy
Thanks for watching.
The way I do it is that if I create two additional variations. One with the next question in the closed state and one with the new question in the opened state.
So for example if I have 5 FAQ Questions in my prototype, I'd have 10 variants
@@brianlove28 Thanks! That is what I figured, you can't just duplicate the same components in the new Auto Layout.Thanks again for the video!
This might be a strupid question, but I'm new on Figma. How do I change the Text in each "question" without makeing the same text in each container?
Great video by the way! I've been looking for a good tutorial for 2 days now and this is so simple and easy to follow along.
Thank you so much for the kind words. That's a great question
I originally made the video just to demonstrate the accordion interaction.
If you're looking to change the text for each FAQ, this tutorial does a good job of explaining/showing how to control the text for each FAQ.
ruclips.net/video/N19yXnC28xs/видео.html
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)
can you make a tutorial on that please
How do I edit the answer for the second question if we have more than one question in the FAQs?
That's a great question
I originally made the video just to demonstrate the accordion interaction.
If you're looking to change the text for each FAQ, this tutorial does a good job of explaining/showing how to control the text for each FAQ.
ruclips.net/video/N19yXnC28xs/видео.html
Hey Brian! Thanks for the video! Would you by chance happen to know how to make the accordion within a scrollable container? I have a lot of Q&A's that won't fit into one phone screen. I have watched a few videos, but they are all doing a similar thing with creating a component. But since we have already made one, I am curious as to if I would need to make another. (:
Hmm not right off. I would probably need to play around in Figma.
I tend to focus more time in Webflow than Figma
Great no worries@@brianlove28 ! Figured it out and now it is interfering with the accordion working. Anyways, thank you!
how?
@@kelseynocek8458
How do you paste your answers for the FAQ when they are default closed?
Hi Kelly,
To add additional answers, I would do it in the component. So in this video, I only had one question and answer and duplicated it to simulate a FAQ section. However, if I wanted to include five different questions and answers, I would create an additional variant or component for each one. Instead of having one pair, I would have five.
I would then add the correct one into the design.
@@brianlove28 thanks for the answer, i was going crazyyy
Instead of copying and pasting the next question, go and do the whole thing again but with ur other question and then put it under the original question and turn both of them into autolayouts
😂😂😂😂😂my partner
😂😂😂