Visualization

Sankey Diagram

Used to display flows and their quantities in proportion to one another, using the width of arrows or lines to show their magnitudes.

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.

Monochromatic

Multicolored

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

Annotation

Y-Axis

Filtering

Download

Print

Share

Label

Zoom

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:

Sparkline

Used to present the general shape of the variation in some measurement when space is limited.

Multi-Line

Used to track changes over time for two or more categories.

Scatter Plot

Used to display values in a large set of data with two variables. Scatter plots are useful for visualizing clustering, trending, and movement over time.

Spiderweb

Used to display multivariate data in the form of a two-dimensional chart of three or more quantitative variables, represented on axes starting from the same point.

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.