How Do You Prototype Accordions in Figma?

Prototyping an accordion in Figma is a great way to create a user interface design with multiple sections. An accordion is a UI element that allows you to display multiple sections of content in an organized and efficient manner.

By using Figma, you can design an accordion with ease and quickly create a prototype for testing.

To begin prototyping an accordion in Figma, first create a frame that will contain the sections of content. This frame should have a width and height that will accommodate all of the content within the accordion.

Next, divide the frame into sections by adding rectangles or other shapes to indicate each section. You can also add labels to each section to help distinguish between them.

Once you have the basic structure of the accordion set up, it’s time to add interactivity. To do this, select the entire frame and then click on the Prototype tab at the top of Figma’s interface. Here you can select which interaction type you wish to add – such as clicking or hovering – and how it will affect each section within the accordion.

You can also adjust how each section will appear when interacted with – such as expanding or collapsing – by selecting certain options from within the Prototype tab. This allows you to easily create a prototype for testing with multiple states for different interactions.

Finally, once your prototype is complete, you can test it out directly within Figma by selecting “Preview” from within the Prototype tab. This allows you to quickly see how your prototype behaves under different interactions and make any necessary adjustments before sharing it with others.


Creating an interactive prototype for an accordion in Figma is simple and straightforward. By dividing your frame into sections, adding labels, adjusting interactions and states, and previewing your work in-app, you can quickly create a prototype for testing that looks professional and functions properly. With just a few steps, anyone can easily create an interactive accordion design with Figma.