Build Your Accordion Component In Figma

This is my step-by-step guide to help you build your Accordion in Figma.

At the end of this article, you’ll have all the knowledge to build your own accordion in Figma. Also, at the end of this article, you can find a link to try and buy the accordion component I built if you can and want to contribute to my work!

1. Before you start

• Imagine and define how you want the accordion to be (look and feel).

• Define the properties to include and their names.

• You can optionally search the web or the Figma Community for inspiration or references.

• Define the use cases you want to cover with this component. This will help you define the properties and variants you must include.

2. Build the component

1st step (the base):

Start by adding a new frame and activating auto-layout. You can build it to your liking, but for the example, I will use these settings:

In the example, I specify that I want the frame to be horizontally centered and have automatic spacing between inner layers.

2nd step (the content):

In this step, we will add all the content we want the component to have. Here’s where we will add the title (text), body (text), the chevron/arrow handler to allow users to open or close the accordion, and all the other items we can imagine and want to include.

For example, besides the title and body, you can include an avatar, an icon, a flag, etc. This will depend on the type of usage you need to have with the accordion.

For now, we will add all these items.

At this stage, you could have something similar to this:

And you could have something similar because there is no unique way. The result you get will depend on the items you want to include.

In my example, I added these items to the frame:

• An icon

• A title

• A chevron icon as the handler

• A text body

3rd step (making it a component):

So far, we have the frame with auto-layout and items in it. We need to turn that into a component.

We can click the secondary button over the frame and click the “Create component” option.

This action converts the frame into a reusable component we can use later. However, it still requires some work before it is finished.

4th step (The non-variant properties):

Now that we have a component, we can assign all the items we included and turn them into properties.

Like before, there is no right order to do this, but in my experience, I always start with creating non-variant properties that can get duplicated later on when creating variant properties. It’s a way to save time.

Non-variant properties can be:

• Text properties

• Boolean properties

• Instance swap properties

In my example, I have the following items to turn into non-variant properties:

• The icon.

• The title.

• The body.

I can create these non-variant properties with these items:

• “Show icon”: As a boolean property that controls whether the icon is displayed or hidden.

• “Icon”: As an instance-swap property that changes the default icon.

• “Title”: A text property that allows the accordion’s title to be changed.

• “Body”: As a text property that allows the change of the accordion’s body text.

You can check Figma's tutorial to learn how to create text, boolean, and instance-swap properties.

At the end of this step, you should have something like this:

5th Step (Adding variant properties):

Here’s where all the fun begins. We must add all the variants we want to include to continue creating our accordion.

To add variant properties, click the “plus” button next to the Properties section and click “Variant”.

If it’s the first variant property you create, you won’t be prompted, and a new variant property with default values will get created:

You can double-click the property name and value to change them.

A variant property's default value refers to the value assigned to that property in the current variant.

If it’s not the first variant property you create in the component, you will be prompted to add the new property’s name and default value.

To continue my example, I will add the “status” variant property to control whether the accordion is opened.

The only thing left is to add as many variants as I need in the property. In this example, I will only need two. One variant for “Opened” (the one in the screenshot above) and one for “Closed”, as shown below:

6th step (repeat the last step):

Repeat the 5th step for each variant property you want to include in your accordion component.

You can add variant properties to your liking. Here I give you some variant ideas:

• Size

• Background color

• Border color

• Shadow style

• Shape

• State/status

You should finish this step when you have the component with all the variants and properties you want to include.

3. Test the component

It's not the funniest step for some people, but it's necessary nonetheless.

Testing your components for errors, typos, and missing variants makes them more robust.

Here are the things I take into consideration when testing a component:

• Check for typos in all variants or properties’s names.

• Check whether the current variants will satisfy all my use cases.

• If you have a component with different sizes, make sure all the inner components/items fit and look perfect.

• Check and make sure the component has the desired behavior when resizing it.

• Check how the component looks and behaves when setting the width or height to “fill container” inside a frame or another component.

• If your component supports light/dark modes, check how it looks when switching from one to the other.

• Make sure that all non-variant properties have their items linked appropriately.

You should complete this step once you believe the component covers all the variants for your use cases and has been checked for bugs.

4. Document the component

It is important to inform others how your component works or what they can do with it.

You can document your component by clicking the “Component configuration” button in the right panel next to the component name (shown when you select the component).

A window will appear, allowing you to add a description and a link to the documentation.

Additionally, you can add your own documentation to the component or its variants to help others understand your component's uses and capabilities more easily.

In the image below, you can see an example of this:

Here, I visually assist users in understanding the component and its functionalities. Additionally, I document each property with its available variants and objectives.

You can also try these things to help others learn how to use the component more quickly:

• Explain briefly the ideal time and place to use the current component.

• Add a “try it” section with an instance of the component where users can easily try the different variants.

• List all available variants, including their names and usages.

5. Use it, share it, enjoy it!

Once your component is ready, you can use it directly in the file where you created it. Alternatively, you can download the .fig file to import it into another project.

If you created this component as part of your design system file, it will be published as a library like the other components.

Originally posted at medium