Patterns are reusable, best practices solutions that solve common user problems. They offer complex guidance that often involves the relationship between multiple components. To outline a pattern's conventions, we provide design guidelines that describe a pattern's usage, appearance, features, variations, and more. We also often provide demos to help you visualize the implementation of a pattern.
How do I use patterns?
Patterns provide design guidance on how you should combine different components and foundational styles for recurring design challenges, such as displaying complex data or managing user workflows. While patterns offer abstract guidance, they are distinct from extensions, which provide the actual pre-built coded solutions.
Our more holistic design patterns, such as our dashboard and card view, are maintained in our separate Patterns & Extensions Figma library.
Explore patterns
The best practices for designing processes that a user can trigger by clicking or selecting a UI element, such as a button or link.
A defined method for users to select or deselect multiple items within complex content views or data tables.
A structured layout designed to display a grid of cards in a gallery, optimizing for browsing and interaction.
Guidance on how to choose between similar components and use them appropriately based on specific user contexts and use cases.
A highly customizable layout that serves as a high-level overview of key metrics or performance indicators.
The design rules for implementing filtering mechanisms that allow users to narrow down content from large datasets or complex views.
A guided process for generating secure passwords, often complementing input fields that require strong credentials.
A defined visual mechanism for displaying the strength of a password and whether it meets necessary security requirements.
A two-pane layout that shows a list of items and corresponding details for the currently selected item.
Guidelines for adapting a UI to support right-to-left writing modes for localization.
Guidance on the consistent and accessible use of color and iconography to communicate status and severity across the UI.
