Get a Quote!
tutorials

Accordion UI design

The exploration for Accordion component UI design, states, templates and use cases for desktop & mobile viewports.
September 2021 · 6 mins read

by Roman Kamushken

Userpic
← Back

Heya! Roman's here.

I am a UI designer, maker, and seller. It's been already 3+ years passed since I started to make templates for Figma and founded Setproduct to help startups and individuals save on design and release their apps faster.
Working for 20+ years in graphic design, last years I've been browsing thousands of apps, screens, components, and layouts almost DAILY to gather the most complete ebook of how to design components, templates, and entire apps.

Fortunately, I've started with the 1st chapter related to the State of Avatar. Glad I was listed on some popular design resources and got a bunch of retweets and mentions. Which makes me decide to continue my explorations, so meet the research aimed to explain on how to design Accordions.

What is Accordion?

Accordion (aka Expansion panel) — vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
Accordion UI design tips

Table of contents

Accordion Anatomy
  • States
  • Chevrons
  • Additional icons
Styles & Themes
  • Expanded item
  • Contained Accordion
  • Separated Accordion
UX & Usability
  • Using subtitles
  • Using badges
  • Helper text
  • Mobile & desktop patterns
SetGPT is a free chat gpt clone aimed for UI, UX and product designers, writers and solopreneurs

Research, copy and ideate with SetGPT!

We've launched the alternative ChatGPT clone dedicated to UI designers, UX researchers, writers and indiehackers.

Powered by the latest OpenAI gtp-3.5-turbo model, this free chatbot is the perfect tool for those in need of intelligent and innovative insights, wrapped with a slick UI and sophisticated user experience.
Start Now
SetGPT is a free service; however, authentication is required

Anatomy

States
Default states for Accordion are:

  • collapsed
  • expanded
  • onhovered
  • focused
  • disabled
Accordion UI design tips
Chevrons placement
Chevron icon represents the opportunity to expand/collapse Accordion item. Once Accordion was clicked, the chevron rotates to indicate the successful expansion. Further collapse returns the chevron to a previous position.
Accordion UI design tips
Instead of a chevron, you may use the following symbols:

  • Up / down caret
  • Plus / Minus
  • Up / down arrow
Accordion UI design tips
Additional icon
In the case of right-sided Accordion, you may place additional icons to strengthen the meaning. Use wisely not to overload the component.
Accordion UI design tips
In some cases, you may apply colors to visually separate the items:
Accordion UI design tips

Styles & Themes

Expanded item
Highlight expanded state to let a user recognize what is opened in case of multiple Accordions. There are several possible styles for the highlighting:

  • Elevation shadow
  • Background fill
  • Outline stroke
Accordion UI design tips
While the elevation works well on both smooth grey and white surfaces, you may fill the Accordion expanded item's background with 8–12% opacity fill. Fits good for white surfaces. Add outline stroke, if necessary.
Accordion UI design tips
Contained Accordion
Use contained Accordion for most of the cases. Separate its items by a slightly visible divider. This placement either saves some vertical space.
Accordion UI design tips
Separated Accordion
There are some cases when you can separate Accordions with whitespace. Use this method to divide when it's needless to save vertical space.
Accordion UI design tips

Accordion UX & Usability

Subtitle to pre-know
Enable a subtitle to inform your users about what to expect when Accordion expands. This either helps to display the user's pick when everything is collapsed.
Accordion UI design tips
Badge to pre-know
Either use a badge to indicate the selection hastily, while Accordion is collapsed.
Accordion UI design tips
Helper text
Enable a helper text for Accordion to ergonomically show up a user's pick when collapsed, especially for mobile viewports.
Accordion UI design tips

Mobile patterns

Full-width usage
On mobile devices use only full-width Accordions.
Accordion UI design tips
Side menu
Implement Accordions into the navigation drawer to reveal submenu items.
Accordion UI design tips
Filters
Use side panels with Accordions to utilize multiple filters, properties, etc.
Accordion UI design tips

Desktop patterns

Side menu
Analogous as mobiles, you may implement Accordion-driven side navigation for desktop apps, dashboards, etc.
Accordion UI design tips
Filters
Depending on the desktop layout structure, Accordions (e.g. as Filters) could be placed as both left or right-sided.
Accordion UI design tips
This is all you need to know to design better Accordions.

If you looking for those Accordion cards - Duplicate for Figma

Hope this exploration will help you to improve your in-app UX. The next chapter is for the App Bars, probably. Stay tuned!

Related links

More useful tutorials
Avatar UI design exploration — The states of userpic component
Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.
Accordion UI design exploration — Styles, states, usage, templates
Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
App Bar UI design exploration — Anatomy, specs, states, templates
Application Bar (aka Navigation Bar) — displays prior in-app controls related to the current app section.
Badge UI design exploration — Tips & tricks, usability, and use cases review
Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview
Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.
Buttons UI design – Comprehensive tutorial on UX, styles and usability
Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications

More to ☕ read

Logo design ideas for creating a lasting visual identity
Whether you're a graphic designer, a marketing professional, or a brand design agency, this guide will help you design an original logo that is both visually appealing and effective in conveying the principles and identity of the brand.
9 reasons to use Material UI kit for Next.js, TailwindCSS and Figma
I am going to express 9 reasons why our Figma & Next.js library is the right choice for web applications, especially when styled into trendy Material You design theme, as well as the pros and cons of investing in this UI kit.
Choosing app UI, UX design & development studio
How to choose the right web design and development agency for your application? It is a important decision that can have a major impact on the success of your product.
Buttons UI design – Comprehensive tutorial on UX, styles and usability
Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.
Adobe Creative Cloud is stealing UI designs to train the AI
The issue of Adobe Creative Cloud stealing artwork is a serious one and is causing a great deal of concern in the creative community.
18 design & developer resources to boost your productivity and creativity
In today's list, you will find texture and gradient generators, beautiful fonts, Figma plugins, AI tools, and much more.
The best 2023 fonts pairing for app design, website, or presentation
We, as Setproduct design studio, nominated the combination of free fonts Outfit & Spline Sans to use for 2023. Whether it's a website, or complex dashboard, this pair fits everywhere.
How is my clock hides behind a mountain? iOS 16 lock screen feature
No big deal! Apple used their advanced 3D rendering technology to create the mountain in the background. The mountain was rendered using a combination of textures, lighting, and shading to give it a realistic and lifelike appearance.
Freelance designer tips: Difficult clients & endless design revisions
Solid strategies on how to work with difficult design clients and protect yourself from endless revisions without getting paid additionally.
Calendar UI design – Date picker best practices & inspiration
Calendar & date picker UI design inspiration & UX tutorial. Got stuck at designing calendars? In addition to useful UX guide, covered in this post; we've included an inspiration gallery full of calendars. Enjoy, steal and remake!
Freelancer guide: how to switch from Fixed-Price to a Hourly Rate
How to set a hourly rate to avoid cases where a project with a pre-agreed amount ended up going beyond implementation because of seemingly insignificant changes on the client's side.
Checkbox UI design – React component styled in Chakra
Styling ideas for React checkbox component designed in Figma and styled in Chakra. This post contains UI design ideas, live components, code samples and some inspiration to assist coders design better.
How to make 3D animation effect on page scroll HTML & JS
In this tutorial, we'll take the Apple AirPods page as an example and show you how to get this effect if you want to create a webpage with the same effect.
Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview
Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.
Best 20 design resources for startups, developers and designers
Today's list includes a bunch of cool icons, powerful UI kits, great collections and tools, even a history of user interfaces, and so much more.
How to design a landing page to improve conversions
The process of making a high-converting landing page. We've put together design rules and outlined the structure of a successful website.
8 designers and developers bootstrapped a side project to success
We've gathered some inspiring stories of 8 Twitter fellas (mostly designers and developers), who bootstrapped their side projects to life and succeed.
Top 11 design tools and resources to kickstart your project
We've reviewed the most popular launches on ProductHunt after the first quarter of 2022 and here is what we discovered.
Badge UI design exploration — Tips & tricks, usability, and use cases review
Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
App Bar UI design exploration — Anatomy, specs, states, templates
Application Bar (aka Navigation Bar) — displays prior in-app controls related to the current app section.
Accordion UI design exploration — Styles, states, usage, templates
Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
Avatar UI design exploration — The states of userpic component
Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.
Why do we need UI kits: Our customer's redesign case study for ecommerce
Recently, we've interviewed a freelancing designer from India - Narendra Ram. He used our Material-X UI kit and made a high-quality and professional redesign of the seller’s panel of the GTrendz e-shop
Material–X: The tiny UI details you won't notice till you get too close
Fresh features and UI tricks: here is what's new in our enhanced Material-X design system for Figma
16 fresh design resources of February 2021
Here is what we are gonna review today: icons, emojis and illustrations, the coolest articles on working with color and tables for enterprise, effective plugins for Figma, sources for inspiration and much more
14 useful UI design resources handpicked. January 2021
What's in today's release: various generators, cool sources for your inspiration, stylish icons, top 2020 products from Product Hunt, tools for exporting animations and GIFs, and much more
The most significant releases of 2020 on a UI design scene
Last year has passed. It was a very unstable year that changed the way things were. In this post, we have summed up the results of 2020, where we have collected for you the top events from the design world
13 fresh and useful design resources of outgoing fall 2020
We’ve picked up the best links to resources that are trendy in the design industry, and that will help you get some inspiration and speed up your workflow
6 ways to generate side income for designers and developers
By launching your own side project, you have a great chance to make it your core business. Sometimes such projects become the work of a lifetime. Setproduct.com is living proof of this. It started as a side project, which became the main source of income within 2 months
Top 15 Figma resources: UI kit, design system, components, illustrations
Handpicked collection of the newest templates for Figma: UI kits, UX tools, design systems, icons, illustrations and more
iOS / Android app case study — From Figma UI kit to application release
This is the story of how a ready-made professional UI kit in Figma helped to create an app, which is now gaining popularity in the App Store and Play Market
Remote work: 9 tips to manage your time and get more productivity at home
Just follow a few simple rules that will seriously increase your effectiveness and help you manage your time wisely
Figma for enterprise: Top 10 tech companies where design tool helped to grow
This tool has proven to everyone it's worth it. Figma has convenient and wide functionality, and the fact that companies such as Microsoft and Uber give preference to Figma - already says a lot
Best 20 free Figma templates for your Design system, Dashboard or Application
Figma freebies reviewed: Ant UX Wireframes, Avatar Illustration System. Brainstorming Design System & Brainstorming Table System. Bright Kit - a kit to rapidly design the landing pages. Browk UI Kit - a design system that keeps updating every week
iOS patterns - UI design inspiration made in Figma
Handcrafted UI inspiration gallery for iOS patterns and best UX practices to use in application design
Top 14 Figma plugins for fixing styles, manage grid, auto-layout, run tracking and more
Plugins reviewed: AutoGrid - grid support for auto-layout. Tracking – plugin for creating tracking annotations. Find and Replace Colors – organizing color styles in design. Spacing Manager – plugin for consistent spacings in components. Geometric – creating math shapes and curves and more
Free Figma resources — Best 15 templates of design systems, applications, icons and more
Templates from the Figma community to save your time, boost a productivity and cut costs for a product design
Figma plugins review — Best 16 underrated plugins to speed up design workflow at the beginning of 2020
We’ve collected the tools that help us improve our workflow, boost our productivity and just add some joy to the design process. We’ll start from the last place, so make sure you don’t miss all the fun
Design system features - Start with the UI kit & app templates
How purchasing commercial design system for Figma (or Sketch) can save a significant amount of time for you or your organization
How to create UI kit - Design system to sell worldwide
Your design asset will help someone speed up their work and you will get rewarded for it
8 simple UI design tricks for more dynamics in static prototypes
Perhaps this will help to make your best shot on Dribbble or win a few points in customer's eye or the design team-lead, because of the use of these techniques positions you as a performer attentive to UI details
Table UI design tutorial – Figma data grid within single cell-component
There are three approaches to table design to create a data grid with a flexible architecture. In each case, either a row component, a column component or a cell component is used. Each of the cases will be discussed in detail below.
How to create responsive mobile components in Figma
Every time you create a new project, you want to make it better than the previous one. You want to choose a more elegant solution, to create convenient and flexible components of the design system in Figma.
Free Figma iOS components - Datepicker
Designed for perfection, our Figma iOS date picker component features an isometric skewed design and customizable text. Experience the most natural and intuitive date picker out there, available for free!
Monetizing the design: what I learned after a year of non-stop UI grinding
My 15 insights of successful digital product. Results of the year for the UI designer, who didn`t have any interesting projects in his portfolio and decided to create his own design products for everyone.
Orion UI kit - data visualization and charts templates for Figma
Figma library with 35+ full-width charts templates served in light & dark themes. Contains 200+ of dataviz widgets that look perfect on desktop & mobile screens. Organized as a design system for Figma and supported with 500+ components based on auto-layout
Figma components tutorial: the management for Instances
Pros and Cons of swapping between hidden layers and detaching a Component into the new Master. Inspired by Userpic design item.
Show more ⬇︎