Design And Animate An FAQ Accordion In Figma

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
---------------------------
👉 Access the world’s largest library of Figma & Webflow components
---------------------------
Receive 10% off your first year payment with Termageddon
---------------------------
👉Shopify E-commerce
---------------------------
👉Try Webflow
---------------------------
👉 Test your websites on 2000+ browsers with LambdaTest
---------------------------
👉 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.
---------------------------
👉Sonduck Film Motion Graphic Templates
---------------------------
👉 Envato Elements
---------------------------
---------------------------

#figma

[ThePreferrred]

Simple and straight to the point. This is really helpful. Thank you.

[thebram]

Goodness. This is way helpful and simpler than other tutorials. Thank you so much!

[streetcorner]

Thanks for talking me through this nice and slowly (unlike most Figma tutorials I try to work along with). Just subscribed.

[emaarbez]

Thank you for the detailed video. It was easy to follow and it works great! I made it with a responsive width.

[dannyr]

Straightforward, easy to follow. Thank you so much, sir! 👍

[chloelitchfield]

OMG thank you I watched so many tutorials before yours and couldn't get it but now I got it! 💪 haha you da best!

[Nickysingss]

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

[Krisokafor]

Simple and straight to the point. Thank You!

[ashleighlawrence]

Great video! You explained everything super well and made it simple to understand, thank you! 🙂

[wajooday.zindagi]

you are the besttt teacherrr i everrrr

[roselyn_ez]

Thank you! This is the first video on accordions that is so simple! I followed every step to create mine.

[noemicaronia]

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.

[bitzuix]

It's good but when we open one question and then we try to open another when the first one is already open then it is not gonna work.

[angelgames]

muito obrigado, porem estou com um problema, como eu edito as demais respostas das perguntas do faq?

[WeeEric-cscm]

Thanks you, may i know from video 8:25 how to copy the layout?

[MuttayabBukhari]

HOW TO CHANGE QUESTIONS OF EACH
COMPONENT

[chocodonutella]

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?

[tusharnandre]

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

[timeless_tidbits]

Whay should I do about the other faq. How can I change the answer and q of other faq's

[nurfatinmasyitah]

hi, just wondering, can I change the description using same component? cause tried it before it doesn't work.