A left-pointing arrowBack Home
Visualization

Euler Diagram

Used to illustrate the relationships between sets or groups, like explaining complex hierarchies and overlapping definitions.

Visual Example

Download for FigmaVisualization

Types

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

Interaction States

Interaction states communicate the status of an element on the user interface. Consider all of the following states when designing this element:
A green checkmark iconEmpty
A green checkmark iconInitial
A green checkmark iconDefault
A green checkmark iconHover
A green checkmark iconError
A green checkmark iconLoading

Chart Features

For this particular visualization, you may consider these additional features.
A tag icon
Title
A tag icon
Legend
A tag icon
Label
A tag icon
Download
A tag icon
Share
A tag icon
Print
A tag icon
Date Selector

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 systemThe logo for the Figma design app
Buy for Figma
Preview the file before you buy!

View more:

Stacked Bar

Used to show the parts of multiple totals.
Visualization

Column

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

Funnel Chart

Used to represent values at successive stages of a process.
Visualization

Directed Graph

Used to represent asymmetrical, directional relationships between objects (called nodes).
Visualization
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.