A left-pointing arrowBack Home
Interaction Pattern

Autocomplete

Autocomplete is a text field enhancement which predicts the rest of a word the user is typing. Predictions generally appear in a dropdown menu below the text box, and can be navigated using keyboard arrows.

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.
Exact Match
Fuzzy

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 iconTyping
A green checkmark iconHover
A green checkmark iconFocus
A green checkmark iconOpen
A green checkmark iconClosed
A green checkmark iconDefault
A green checkmark iconLoading
A green checkmark iconOverflow

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:

Drag-and-Drop

Drag-and-drop allows the user to click (or tap) and drag an object from one place to another. It is typically used for file uploading, but can also be used in list builders and to reorder items in a list.
Interaction Pattern

Share

Sharing grants users without access the ability to see and/or interact with certain objects in the system. The act of sharing can occur via email, hyperlink, or SMS.
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

Log In

The log in page validates the identity of a user with at least two credentials – typically an email or username and a password.
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.