A left-pointing arrowBack Home
UI Component

Pre-formatted Text (Code)

Pre-formatted text tells the browser to display text exactly as it is written, instead of rendering it based on browser rules. Pre-formatted text is generally rendered in a monospaced typeface for increased readability.

Visual Example

Download for FigmaUI Component

Types

Types are variations or derivatives of an individual element. They can help you choose what to include in your design.
Read-Only
Syntax Highlighting
Zebra-Striped
Collapsible
Executable

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 iconDisabled

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

View more:

Map

A map is a graphical representation of geospatial information.
UI Component

Comments

Comments are written remarks about a particular system object. Comments are often combined with a rating or score.
UI Component

Table

A table is list of homogenous items or objects. Tables are useful for presenting detailed information in an easy-to-consume layout.
UI Component

Dialog

A dialog is a small, floating window that communicates information to the user, and/or prompts them for a response.
UI Component
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.