UI Component

Drawer/Accordion

An accordion is a vertical or horizontal list of items which can be expanded or collapsed to show or hide additional information.

Visual Example

Download for Figma

Types

Types are variations or derivatives of an individual element. They can help you choose what to include in your design.

Simple

Nested

Animated

Vertical

Horizontal

Interaction States

Interaction states communicate the status of an element on the user interface. Consider all of the following states when designing this element:

Chart Features

For this particular visualization, you may consider these additional features.

No items found.

Get it for Figma!

Everything on this website has been designed in Figma, and is ready to use.

A preview of the Figma Design Encyclopedia design system

Preview the file before you buy!

View more:

Pagination

Pagination is a technique for dividing a list of objects into multiple pages. This eases the load on the database, and often returns results faster than infinite scroll.

Ratings

A rating is a visual representation of rank or grade. Rating systems may vary in step quantity, which is a key factor in understanding how a user rates something, and what their rating means.

Tips

Tips are contextual popovers used to guide the user through a specific task or introduce a new feature.

Primary Navigation Menu

The primary navigation menu divides an app into unique functional areas.

The Design Encyclopedia is a passion project by Jon Moore to learn how to use Figma, and was designed and built in Webflow (this is an affiliate link). If you would like to reference the encyclopedia in a separate project, partner on a collaboration, or have a general inquiry, send me an email.

© 2021 Design Encyclopedia. All rights reserved.

A square collage of design components from the design encyclopedia.