UNIT II ADVANCED DESIGN COMPONENTS USING FIGMA

20CDT42 – User Interface Design
KONGU ENGINEERIG COLLEGE (AUTONOMOUS)
DEPARTMENT OF COMPUTER SCIENCE AND DESIGN
P.GOWSIKRAJA M.E., (Ph.D.,)
Assistant Professor
Department of Computer Science and Design

Advanced Components:
1. Backdrop,
2. Checkboxes,
3. Chips,
4. Date Pickers,
5. Dialogs,
6. Dividers,
7. Image List,
8. Lists,
9. Menus,
4/2/2024 20CDT42 _ UID _ UNIT II _ Advanced Design Components 2
UNIT II
Advanced Design Components
Fluent Design System.
10.Progress Indicators,
11.Radio Buttons,
12.Sheets – Bottom and Side,
13.Sliders,
14.Snackbars,
15.Switches,
16.Tabs,
17.Tool Tips,
18.Time Pickers,

1. Backdrop
♠ A backdrop appears behind all other surfaces in an app, displaying contextual
and actionable content.
♠ A backdrop is composed of two surfaces: a back layer and a front layer.
♠ The back layer displays actions and context, and these control and inform
the front layer's content.
2.1 Advanced Design Components

Back Layer and Front Layer

Active front layer

Active back layer

2. Checkboxes
♠ Use checkboxes (instead of switches or radio buttons) if multiple options
can be selected from a list.
♠ Label should be scannable.
♠ Selected items are more prominent than unselected items.
♠ Unselected, selected (hover), and indeterminate checkboxes

Checkboxes - Specs
Checkboxes – Size measurement

3. Chips
♠ Use chips to show options
for a specific context.
♠ Four types:
♠ Assist
♠ Filter
♠ Input
♠ Suggestion
♠ Chip elevation defaults to
0 but can be elevated if
they need more visual
separation.

3.1 Assist Chip

4. Date Pickers
♠ Date pickers can display past,
present, or future dates
♠ Three types: docked, modal,
modal input
♠ Clearly indicate important dates,
such as current and selected
days
♠ Follow common patterns, like a
calendar view

Date Pickers - Specs

Docked date picker padding and size measurements

5.Dialogs & Dialogs Types
♠ Use dialogs to make sure
users act on information
♠ Two types: basic and full-
screen
♠ To completing a single task
♠ Display information
relevant to the task
♠ Commonly used to confirm
high-risk actions like
deleting progress

Basic dialogs - Specs

Basic dialog padding and
size measurements
Full-screen dialogs

Full-screen dialog
measurements
Dialogs - Guidelines

6. Dividers
♠ Make dividers visible but not bold.
♠ Only use dividers if items can’t be grouped with open space.
♠ Use dividers to group things, not separate individual items.
♠ Dividers separating items in a list.
♠ Dividers are one way to visually group components and create hierarchy.
♠ They can also be used to imply nested parent/child relationships.
♠ There are two types of dividers:
♠ Full width
♠ Inset

Dividers – Specs and
measurement
Dividers Types

Vertical divider
♠ A vertical divider can be used to arrange content on a larger screen, such as
separating paragraph text from video or imagery media.

7. Image List
♠ Image lists display a collection of images in an organized grid.
♠ Image lists represent a collection of items in a repeated pattern. They help improve
the visual comprehension of the content they hold.
Image List - Principles

Image List - Types
1. Standard image lists are best for items of equal importance.
They have a uniform container size, ratio, and
padding.
2. Quilted image lists emphasize certain items over others in a
collection. They create hierarchy using varied
container sizes and ratios.

3. Woven image lists facilitate the browsing
of peer content. They display content in
containers of varying ratios to create a
rhythmic layout.
4. Masonry image lists facilitate the
browsing of uncropped peer content.
Container heights are sized based
on the image size.
24
Image List - Types
WOVEN IMAGE LIST
MASONRY IMAGE LIST
4/2/2024 20CDT42 _ UID _ UNIT II _ Advanced Design Components

Image list – anatomy
1. Image container- displays an image
list item’s image or illustration.
2.Text labels (optional)
display one line of text related to an
image list item.
3. Actionable iconography (optional)
It represent related actions.
4.Text protection (optional)
It is a semi-opaque scrim placed in front
of imagery to keep text above it legible.
5.Image list item
It represent individual items in an
image list

Image list – padding
♠ Padding can vary between images in an image list.
♠ The following padding values are recommended: 1, 2, 4, 8, 16, 20, 24, 32 dp.

♠ Backdrop, Checkboxes, Chips,
♠ Date Pickers, Dialogs, Dividers,
♠ Image List, Lists, Menus,
♠ Progress Indicators, Radio Buttons,
♠ Sheets – Bottom and Side, Sliders,
♠ Snackbars, Switches, Tabs,
♠ Tool Tips, Time Pickers, Fluent Design System.
UNIT II

Standard Image List
♠ Standard image lists can be displayed with or without text labels.
1. image list with images only
2. image list with images and text labels

Quilted image list
♠ Quilted image lists emphasize certain items over others in a collection. They use varied
container sizes and ratios to create hierarchy across images.
♠ click the link

♠ Woven image list
♠ Woven image lists use alternating container ratios to create a rhythmic layout.
♠ A woven image list is best for browsing peer content.

Masonry image list
♠ Masonry image lists use
dynamically sized container heights
that reflect the aspect ratio of each
image.
♠ This image list is best used for
browsing uncropped peer content.

Guess the
image list
types
32
1
4
3
2
1. Standard image list
2. Quilted image list
3. Woven image list
4. Masonry image list
4/2/2024 20CDT42 _ UID _ UNIT II _ Advanced Design Components

8. Lists
♠ Use lists to help users find a specific
item and act on it
♠ Order list items in logical ways (like
alphabetical or numerical)
♠ Three sizes: one-line,
two-line,
three-line
♠ Keep items short and easy to scan
♠ Show icons, text, and actions in a
consistent format.

List Sizes
one-line two-line three-line

List - Specs

One-line list item alignment, padding, and size measurements

Two-line list item alignment, padding, and size measurements

Three-line list item alignment, padding, and size measurements

List - Configurations
1. With avatar
2. With image or thumbnail
3. With video
4. With icon
5. Text-only
6. With checkbox
7. With radio button
8. With switch
1. With avatar
2. With image

4. With Icon
3. With Video 5.With text
6. With checkbox

8. With radio button & switch
7. With radio button

9. Menus
20CDT42
_
UID
_
UNIT
II
_
Advanced
Design
Components
♠ Menus display a list of choices on a temporary surface.
♠ Use menus to show items in a scannable way
♠ Make menus easy to open, close, and select from
♠ Menus can open from a variety of components,
including icon buttons and text fields.
4/2/2024 42
Menus - Specs

Menu padding and size
measurements
♠ Menus appear when users interact
with a button, action, or other
control.
♠ A few examples:
1. Button
2. Text field
3. Icon button
4. Selected text
Menus - Configurations

Menus - Usage
1. Menus display
a list of choices
on a temporary
surface.
2. Menus appear in front of
all other permanent UI
elements 3. Menus can change
their position to avoid
being truncated by the
screen or browser’s
edge

Menus - Usage
4. The space between the
bottom of the menu and the
bottom of the screen is the
same size as the height of a
menu item.
5. When content is scrollable,
menus display scrollbars
6. Menu with filter
showing a list of states
filtered by the letter C

Menus - Usage
7. A menu can be
triggered by an icon tap,
appearing below the
overflow menu icon
Menus at different
positions on screen open
in different ways, adapting
to the space available

10. Progress Indicators
♠ Progress indicators show the status of a process in real time.
♠ Use the same progress indicator for all instances of a process (like loading)
♠ Two types: linear and circular
♠ Never use them as decoration
♠ They capture attention through motion
Linear progress indicator
Linear progress indicator size
measurements

Determinate
linear progress
indicator
20CDT42 _ UID _ UNIT II _ Advanced Design Components 4/2/2024 48

Indeterminate
linear
progress
indicator

Circular progress indicator anatomy and size measurement

Determinate circular progress
indicator
Indeterminate circular progress
indicator

Progress Indicators - Guidelines
♠ Indicate overall progress of a
group. Don’t indicate the
progress of each activity in
a group.

♠ A linear progress indicator
changes from indeterminate to
determinate while loading a
screen
♠ A linear indicator at the center of the
screen indicates loading all screen
content

♠ circular indicators should be used for
short, indeterminate activities
(between 2-5 seconds). Longer activities
may require alternate methods of
communication, such as snackbars or
notifications.
♠ Don’t apply progress indicators to every
button in your app. They can
unnecessarily interrupt the user’s task.

11. Radio Buttons
♠ Radio buttons let people select one option from a set of options.
♠ Use radio buttons (not switches) when only one item can be selected from a list
♠ Label should be scannable
♠ Selected items are more prominent than unselected items
Radio button size
measurements
Radio Buttons – Specs & size

Radio Buttons –
Anatomy
♠ Radio buttons should always be accompanied by clear inline labels.
♠ Radio buttons are single-select, unlike checkboxes which are multi-
select.
Radio Buttons - Guidelines

Radio Buttons - Guidelines
♠ Use radio buttons when only one option can be selected from a list.
♠ Use Checkboxes when multiple options can be selected from a list.
♠ Avoid nesting radio buttons or using radio buttons to select multiple options.

12. Sheets – Bottom sheets
♠ Bottom sheets show secondary content anchored to the bottom of the
screen.
♠ Use bottom sheets in compact and medium window sizes
♠ Two types: standard and modal
♠ Content should be additional or secondary (not the app’s main content)
♠ Bottom sheets can be dismissed in order to interact with the main content

Bottom sheets - Anatomy
Bottom sheet padding and size
measurements

Bottom Sheets - Guidelines
♠ Bottom sheet containing
contacts and applications
♠ Bottom sheet with menu
items in a list.
♠ Bottom sheet containing a
list with icons.

Bottom Sheets - Guidelines
♠ Bottom sheet with a divider
separating types of actions.
♠ Bottom sheets can contain
thumbnails, images, and video.

Side Sheets
♠ Side sheets show secondary content anchored to the side of the screen.
♠ Use side sheets for optional content and actions without interrupting the main content.
♠ Two types: standard and modal.
♠ Users can navigate to another region within the sheet. It can contain a back icon for navigation.
Side Sheets - Types

Standard side sheet
Side sheet padding and size
measurements

Modal side sheet
Modal side sheet padding and size
measurements

13. Sliders
♠ Sliders let users make selections from a range of values.
♠ Sliders should present the full range of choices that are available.
♠ Two types: continuous and discrete.
♠ The slider should immediately reflect any input made by a user.

Sliders - Specs

Sliders with two handles
♠ Sliders can have two selection handles
(also known as thumbs) for when a user
needs to select a range.
Slider padding and size
measurements

Sliders – Usage
♠ Sliders can be used to
adjust a value in real time,
such as image attributes
♠ Sliders can use icons or
labels to represent a
numeric or relative
scale.
♠ Selection changes are
immediately
reflected.

1. Backdrop,
2. Checkboxes,
3. Chips,
4. Date Pickers,
5. Dialogs,
6. Dividers,
7. Image List,
8. Lists,
9. Menus,
UNIT II
11.Radio Buttons,
13.Sliders,
14.Snackbars,
15.Switches,
16.Tabs,
17.Tool Tips,
18.Time Pickers,

Definition
Snackbars - padding and size measurements
Snackbars - Configurations
Snackbars - Usage
71
14. Snackbars

14. Snackbars
♠ Snackbars show short updates about app processes
at the bottom of the screen.
♠ Snackbars shouldn’t interrupt the user’s experience.
♠ Usually appear at the bottom of the UI.
♠ Can disappear on their own or remain on screen
until the user takes action.
Snackbars - Specs

Snackbars - padding and
size measurements
Snackbars - Configurations

Snackbars - Usage
♠ Only one snackbar may be
displayed at a time.
♠ A snackbar can contain a
single action. "Dismiss" or
"cancel" actions are
optional.
♠ The text label shouldn’t share the same color as
the text button.
♠ Don’t use a filled or elevated button in a snackbar,
as it draws too much attention.

Snackbars - Usage
♠ Place a snackbar in front of the main content. Avoid placing snackbars in
front of navigation components.

Snackbars - Usage
♠ Snackbar above a FAB.
♠ Don’t place a snackbar in front of a FAB. Don’t place a snackbar behind a FAB.

1. Backdrop,
2. Checkboxes,
3. Chips,
4. Date Pickers,
5. Dialogs,
6. Dividers,
7. Image List,
8. Lists,
9. Menus,
UNIT II
11.Radio Buttons,
13.Sliders,
14.Snackbars,
15.Switches,
16.Tabs,
17.Tool Tips,
18.Time Pickers,

15. Switches
♠ Switches toggle(change) the state of an item on or off.
♠ Use switches (not radio buttons) if the items in a list can be independently
controlled.
♠ Switches are the best way to let users adjust settings.
♠ Make sure the switch’s state (on or off) is visible at a glance.
Switches - Specs

Switches – Size Measurements
Switches without icons
Switches with icons
Switches - Configurations

1. Backdrop,
2. Checkboxes,
3. Chips,
4. Date Pickers,
5. Dialogs,
6. Dividers,
7. Image List,
8. Lists,
9. Menus,
UNIT II
11.Radio Buttons,
13.Sliders,
14.Snackbars,
15.Switches,
16.Tabs,
17.Tool Tips,
18.Time Pickers,

16. Tabs
♠ Tabs organize content across different screens and views.
♠ Use tabs to group content into helpful categories.
♠ Two types: primary and secondary.
♠ Tabs can horizontally scroll, so a UI can have as many tabs as needed.
♠ Place tabs next to each other as peers.

Tabs
♠ There are two types of tabs:
♠ Primary tabs
♠ Secondary tabs
♠ Primary tabs are placed at the top of the content pane under a top app bar. They
display the main content destinations.
♠ Secondary tabs are used within a content area to further separate related content and
establish hierarchy.

Tabs - Specs
Tabs – Measurements

17. Tooltips
♠ Tooltips display brief labels or messages.
♠ Use tooltips to add additional context to a
button or other UI element
♠ Two types: plain and rich. Use plain tooltips to
describe elements or actions of icon buttons
♠ Use rich tooltips to provide more details, like
describing the value of a feature
♠ Rich tooltips can include an optional title, link,
and buttons
♠ Rich tooltips are best used for longer text like
definitions or explanations.
Tooltips - Types

Plain Tooltip -
Specs
Plain Tooltip - Measurement
Click here:

Rich Tooltip - Specs
Rich Tooltip - Measurement

Tooltips - Guidelines
♠ Use plain tooltips to label icon-only buttons.
♠ Plain tooltips aren't needed when the UI element already has label text.
♠ Use rich tooltips to provide extra information and actions about a UI element or
new feature.
♠ Plain tooltip with a 4dp distance between the target and tooltip.

Rich Tooltip – placement.
♠ Four different rich tooltip locations based on dynamic positioning.

18. Time pickers
♠ Time pickers help users select and set a
specific time.
♠ Time pickers are modal and cover the main
content.
♠ Two types: dial and input
♠ Users can select hours, minutes, or
periods of time.
♠ Make sure time can easily be selected by
hand on a mobile device.
Time Picker Types

Input selector
♠ The input selector is a unique type of text field input. It differs from typical text
field inputs in that it has:
♠ An added highlight to call attention to the selected field
♠ A larger shape, size, and font
♠ A label below the field
♠ Hours and minutes should have separate inputs.
♠ For people using a 12 hour clock, an AM/PM selector appears to the right of
minutes.
♠ For people using a 24 hour clock, the AM/PM selector should not be present.

Dial selector
♠ Dial selectors always mimic a round watch face.
♠ Hours and minutes can be selected by tapping a number or dragging the dial selector
track.
♠ When representing a 12 hour dial, all numbers appear in the outer ring.
♠ When representing a 24 hour dial, even numbers appear in an inner ring, and odd
numbers appear in the outer ring.

Time Picker (dial) - Specs/Anatomy

Time Picker (input) - Specs/Anatomy

Time Picker - Measurements

Time Picker - Guidelines
♠ Time pickers allow people to enter a
specific time value. They’re
displayed in dialogs and can be used
to select hours, minutes, or periods
of time.
♠ They can be used for a wide range of
scenarios. Common use cases
include:
♠ Setting an alarm
♠ Scheduling a meeting
♠ Time pickers are not ideal for
nuanced or granular time selection,
such as milliseconds for a
stopwatch application.
24 hour time selection

Fluent Design System
♠ Explore the next evolution of Microsoft’s design system, enabling more
seamless collaboration and creativity than ever.
♠ Move fluidly from design to development, between apps, and across platforms.
♠ Fluent 2 boasts sweeping changes across-the-board to ensure frictionless
communication throughout the system.
♠ Fluent 2 provides a seamless maker experience from design to development
to delivery.

Fluent – System Level Features
Click Here

Fluent - Components

Fluent - Components
Badge: A badge is a visual indicator that communicates a status or
description of an associated component.
A button triggers a single action or event.
A dialog is a supplemental surface that can provide helpful interactions
or require someone to take an action before they can continue their task,
like confirming a deletion.

Fluent - Components
A card is a container that holds information and actions related to a single concept
or object, like a document or a contact.
Checkboxes let people select multiple options from a group or switch a single
option on or off.
A combobox lets people choose one or more options from a list or enter text in a
connected input.

Fluent - Components

Fluent Design System
1. Accordion
2. Avatar
3. Avatar group
4. Badge
5. Button
6. Card
7. Checkbox
8. Combobox
9. Dialog
10.Divider
11.Dropdown
12.Field
108
1. Fluent provider
2. Icon
3. image
4. info button
5. input
6. label
7. link
8. menu
9. persona
10.popover
11.progress bar
12.radio group
1. select
2. skeleton
3. slider
4. spin button
5. spinner
6. switch
7. tablist
8. tag
9. text
10.textarea
11.toolbar
12.tooltip

1. Backdrop,
2. Checkboxes,
3. Chips,
4. Date Pickers,
5. Dialogs,
6. Dividers,
7. Image List,
8. Lists,
9. Menus,
UNIT II
11.Radio Buttons,
13.Sliders,
14.Snackbars,
15.Switches,
16.Tabs,
17.Tool Tips,
18.Time Pickers,
19.Fluent Design System.

UNIT II ADVANCED DESIGN COMPONENTS USING FIGMA

Recommended

Recommended

More Related Content

Similar to UNIT II ADVANCED DESIGN COMPONENTS USING FIGMA

Similar to UNIT II ADVANCED DESIGN COMPONENTS USING FIGMA (20)

Recently uploaded

Recently uploaded (20)

UNIT II ADVANCED DESIGN COMPONENTS USING FIGMA