Visualization

Timeline

Used to visualize time lapses between events, durations), and the simultaneity or overlap of spans and events.

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.

Vertical

Horizontal

Linear

Staggered

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

Tooltip

Y-Axis

Date Selector

Filtering

Print

Share

Download

Label

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:

Synchronized

Used to compare multiple data points over time.

Candlestick Chart

Used by stock traders to determine possible price movement based on past patterns. A candlestick chart displays four price points – open, close, high, and low – across a specified period of time.

Venn Diagram

Used to see the relationships between two or three sets of items.

Stacked Column

Used to show the parts of multiple totals, and how they change over time.

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.