Visualization

Funnel Chart

Used to represent values at successive stages of a process.

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.

Horizontal

Vertical

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.

Title

Legend

X-Axis

Annotation

Date Selector

Filtering

Tooltip

Download

Print

Share

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:

Grouped Bar

Used for showing multi-category change over time.

Donut

Used to illustrate numerical percentage, where the arc length of each slice is proportional to the quantity it represents. The area in the center can be used to show additional information.

Area Range + Trendline

Used to show how the delta or difference between two values changes over time.

Column

Used to present categorical data with rectangular bars with heights or lengths proportional to the values that they represent.

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.