Create Interactive Accordion in Figma 2026 (Auto Layout Guide)
In this video, I will show you how to create a responsive interactive accordion component in Figma in 2026. Accordions are essential for FAQ sections and mobile menus, and building them with "Auto Layout" ensures that when one item opens, the content below it pushes down automatically. I will teach you how to build a component that is fully responsive, meaning the text won't break if you resize the width.
I will guide you through creating two variants—"Collapsed" and "Expanded"—and linking them using the "Smart Animate" interaction to create a smooth opening effect. We will focus heavily on Auto Layout settings, specifically "Fill Container" for text linking, so that your accordion works perfectly on both mobile and desktop screens without needing to be rebuilt.
Make sure to set your frame resizing to "Hug Contents" vertically so the container adapts to the text size dynamically. If this tutorial helps you build cleaner UI components, please hit the like button and subscribe for more design tips!