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
https://amzn.to/47iLnyh
---------------------------
👉 Access the world’s largest library of Figma & Webflow components
https://library.relume.io/?via=brian
---------------------------
👉The SEO Plugin for Webflow
Audit, score and optimize your website right in the Webflow designer.
https://www.semflow.com/?via=brian
---------------------------
👉Try Webflow
https://webflow.grsm.io/dn8xly95yi9g
---------------------------
👉 Test your websites on 2000+ browsers with LambdaTest
http://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.
https://untitledui.lemonsqueezy.com?aff=p27pE
---------------------------
👉Sonduck Film Motion Graphic Templates
https://www.sonduckfilm.com/?ref=22
---------------------------
👉 Envato Elements
https://1.envato.market/yR6A4b
---------------------------
👉 Use BRIAN99512 at checkout and get 20% OFF at FULLERMOE. Watch a demo here! https://fullermoe.com/welcome
---------------------------

#figma