A left-pointing arrowBack Home
Interaction Pattern

Form

A form includes one or more components such as text fields, check boxes, or drop-downs, and is used to collect input from the user. Once completed and validated, this data is submitted and/or saved to the system.

Visual Example

Download for FigmaInteraction Pattern

Types

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

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 iconDefault
A green checkmark iconInitial
A green checkmark iconError
A green checkmark iconWarning
A green checkmark iconInfo
A green checkmark iconFocus
A green checkmark iconHover
A green checkmark iconSingle Page
A green checkmark iconMulti-Page
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:

Setup Assistant

A setup assistant guides the user through specific steps, sequenced or not, in order to teach them how to do specific tasks.
Interaction Pattern

Invite

The invite flow enables users to grant system access to others who lack the appropriate rights or permissions to do so on their own.
Interaction Pattern

Authentication

Authentication helps verify that the user is who they claim to be. Verification can be done via a third party tool or by asking personally-identifying information.
Interaction Pattern

Scheduling

Scheduling is the manner in which hours of operation can be defined for a location.
Interaction Pattern
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.