Design system. Components

Question 1

Snackbars

Answer 1

Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons.
Snackbars provide brief feedback about an operation through a message at the bottom of the screen.
Usage
Only one snackbar may be displayed at a time. Each snackbar may contain a single action, neither of which may be “Dismiss” or “Cancel.”

Question 2

Toasts

Answer 2

(Android only) are primarily used for system messaging. They also display at the bottom of the screen, but may not be swiped off-screen.

Question 3

Dialogs

Answer 3

Dialogs provide important prompts in a user flow.
Dialogs can require an action, communicate information, or help users accomplish a task. There are two types of dialogs: basic and full-screen.
Dialogs focus user attention to ensure their content is addressed
Dialogs should be direct in communicating information and dedicated to completing a task
Dialogs should appear in response to a user task or an action, with relevant or contextual information

Question 4

Date picker

Answer 4

Date pickers let people select a date, or a range of dates.
There are three kinds of date pickers: docked date picker, modal date picker, and modal date input.
Date pickers can display past, present, or future dates relevant to a task
Clearly indicate important dates, such as current and selected days
To ensure picking a day or time is intuitive, use common picker patterns, such as a calendar

Question 5

Badges

Answer 5

Badges are used as indicators to convey dynamic information, such as counts or status. A badge can include labels or numbers.

Question 6

Bottom App Bars

Answer 6

Bottom app bars display navigation and key actions at the bottom of mobile screens.

Question 7

Bottom sheets

Answer 7

Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.

Question 8

Buttons

Answer 8

Buttons help people take action, such as sending an email, sharing a document, or liking a comment.
There are five types of common buttons: elevated, filled, filled tonal, outlined, and text.
Choose the type of button based on the importance of the action. The more important the action is, the more emphasis its button should have.

Question 9

Cards

Answer 9

Cards contain content and actions that relate information about a subject.
A card is identifiable as a single, contained unit
A card can hold anything from images to headlines, supporting text, buttons, lists, and other components
A card’s layout and dimensions depend on its contents. There is no one right way to make a card.

Question 10

Checkboxes

Answer 10

Checkboxes allow users to select one or more items from a set and can be used to turn an option on or off. They’re a selection control that often appears when users are asked to pick a choice from options.

Question 11

Chips

Answer 11

Chips help people enter information, make selections, filter content, or trigger actions.
There are four types of chips: assist, filter, input, and suggestion.
Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts.
Chips represent options in a specific context, unlike buttons, which are persistent

Question 12

Dividers

Answer 12

A divider is a thin line that groups content in lists and layouts.

Question 13

FAB

Answer 13

Use a FAB for the most common or important action on a screen
Icons in a FAB must be clear and understandable since these buttons do not have a text label
The FAB should persist on the screen when content is scrolling

Question 14

Icon buttons

Answer 14

Icon buttons help people take supplementary actions with a single tap.
Use icon buttons when a compact button is required, such as in a toolbar or image list. There are two types of icon buttons: standard and contained.
con buttons can take the form of a wide range of system icons
Ensure the meaning of the icon is unambiguous
On hover, include a tooltip that describes the button’s action, rather than the name of the icon itself
Use the outline-style icons to indicate an unselected state and a filled style to indicate selection

Question 15

Lists

Answer 15

Lists are continuous, vertical indexes of text or images.
Lists consist of one or more list items, and can contain actions represented by icons and text. List items come in three sizes: one-line, two-line, and three-line.
Lists should be sorted in logical ways that make content easy to scan, such as alphabetical, numerical, chronological, or by user preference
Lists present content in a way that makes it easy to identify a specific item in a collection and act on it
Lists should present icons, text, and actions in a consistent format

Question 16

Menu

Answer 16

Menus display a list of choices on a temporary surface.
Menus appear when users interact with a button, action, or other control.
They can be opened from a variety of elements, most commonly icon buttons, buttons, and text fields.
Menus should be easy to open, close, and interact with
Menu content should be suited to user needs
Menu items should be easy to scan

Question 17

Navigation bar

Answer 17

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.
The position of the navigation bar makes primary user journeys easy to access on mobile devices
Items in the navigation bar remain consistent in their destination assignment, placement, and interaction behavior across an app
Navigation items should be relatively equal in importance

Question 18

Navigation drawer

Answer 18

Navigation drawers provide ergonomic access to destinations in an app.
Order destinations according to user importance, with frequent destinations first and related ones grouped together
Navigation drawers can be opened or closed by default to accommodate different app layouts
Standard navigation drawers are good for frequent switching to different destinations. Modal navigation drawers are good for infrequent, but more focused, switching.

Question 19

Navigation Rails

Answer 19

Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.
The navigation rail puts high-priority destinations within reach on large screens
The rail should appear consistently on the same side of each screen in an app
The rail complements adaptive and responsive navigation patterns

Question 20

Progress indicators

Answer 20

Progress indicators inform users about the status of ongoing processes, such 
as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from 
the current screen.

Question 21

Radio buttons

Answer 21

Radio buttons allow users to select one option from a set. They’re a selection control that often appears when users are asked to make decisions or select a choice from options.

Question 22

Segmented buttons outlined

Answer 22

Segmented buttons help people select options, switch views or sort elements.

Question 23

Sliders

Answer 23

Sliders allow users to make selections from a range of values.
Continuous slider
Discrete slider
Sliders should be used for making selections from a range of values
When interacting with a slider, changes should be reflected back to a user immediately
Sliders should present the full range of choices that are available to a user

Question 24

Snackbars

Answer 24

Snackbars provide brief messages about app processes at the bottom of the screen.
Snackbars provide updates on an app’s processes
Dismissive snackbars appear temporarily, and disappear on their own without requiring user input. Non-dismissive snackbars persist until the user takes an action or selects the close affordance.
Snackbars are placed in the most suitable area of the UI

Question 25

Switch

Answer 25

Switches toggle the state of a single item on or off.
Switches have been in user interfaces for a long time and should be used as expected. A switch’s state should be visible at a glance.
Selected items should be more visually prominent than unselected items
Switches make it easy to compare available options

Question 26

Tabs

Answer 26

Tabs are useful for switching between views of distinct and related groups of information. They are the same as segmented buttons.
There are two types of tabs: primary and secondary.
As tabs can horizontally scroll, a UI can have as many tabs as needed
Tabs organize content into categories to help users easily find different types of information
Tabs are displayed next to each other as peers, in categories of equal importance

Question 27

Text Fields

Answer 27

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
Text fields should stand out and indicate that users can input information.
Text field states should be clearly differentiated from one another.
Text fields should make it easy to understand the requested information and to address any errors.

Question 28

Time picker

Answer 28

Time pickers help users select and set a specific time.
Time pickers help users select and set a specific time
Input types are flexible in order to account for a range of use cases and contexts
Time can be selected without significant adjustment of one’s hand position on a mobile device

Question 29

Top App Bars

Answer 29

Top app bars display information and actions at the top of a screen, such as the page title and shortcuts to actions.
Top app bars provide content and actions related to the current screen
Elevating with a drop shadow or top app bars use a color fill to create separation from content
The width of the top app bar container is the same as the width of the view or device

Question 30

What is design token?

Answer 30

Design tokens represent the small, repeated design decisions that make up a design system’s visual style. Tokens replace static values, such as hex codes for color, with self-explanatory name.

Question 31

Generally, design tokens include?

Answer 31

Generally, design tokens include colors, typography, radius, spacing, sizing, motion values, and shadows.

Question 32

3 types of design tokens

Answer 32

Design tokens are generally categorized into three types, stored value, global token, and alias token.

Question 33

Stored value tokens

Answer 33

First type of design token are called stored value, like the Hex color.

Question 34

Global token

Answer 34

Global tokens are design tokens that are universally applied in a design system or project. It represents a value or attribute intended to be used consistently throughout the system, regardless of the specific context or component.

Question 35

Alis tokens

Answer 35

Alis tokens, Instead of defining new values, alias tokens reference existing design tokens and inherit their values. This provides a way to reference and reuse the values of other design tokens without duplicating or redefining the values.

Question 36

Naming design tokens

Answer 36

Be descriptive: Use names that clearly describe the attribute they represent.
Example: primaryColor, buttonBackgroundColor, headingTextColor

Question 37

Name convention design tokens

Answer 37

Establish and follow a consistent. naming convention.

Example (camel case): primaryColor, buttonBackgroundColor
Example (kebab case): primary-color, button-background-color

Question 38

Use semantic terms design tokens

Answer 38

Example: headingFont, bodyTextFont, iconSize
Be concise: Keep token names short and clear.
Reflect hierarchy using separators.
Organize tokens by grouping related attributes together.

Example: spacing.small, spacing.medium, spacing.large
Example: typography.headingFont, typography.bodyTextFont

Question 39

Kinds of chips

Answer 39

There are four kinds of chips: Assist, filter, input, and suggestion
Tag & Chip is a compact element that represent an input, attribute, or action.

Question 40

Design system definition

Answer 40

A design system is a documented catalog of components and styles used within a product, including how and why each should be implemented. While design systems are often confused with style guides and pattern libraries, a design system is more strategic and A Design System includes standards and documentation around the look and usage of each component