UNIT 1 BASIC 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

15 April 2024
20CDT42-UID-UNIT I - Basic
Design Components
2
UNIT I: BASIC DESIGN COMPONENTS
UNIT II: ADVANCED DESIGN
COMPONENTS
UNIT III: NAVIGATION AND LAYOUT
UNIT IV: VISUAL STYLE AND MOBILE
INTERFACES
UNIT V: ACTIONS AND COMMANDS- NORMS
AND CONTROLS

UNIT I: Basic Design Components
Material
Design
• Introduction
• Principles.
Material
Environment
• Surfaces.
• Elevation.
• Light.
• Shadows.
Basic
Components
• App bars
Bottom and
Top,
• Bottom
Navigation,
• Buttons, Cards,
• Text Fields,
• Navigation
Drawer,
• Human
Interface
Guidelines

15 April 2024 20CDT42-UID-UNIT I - Basic Design Components 4
1. Material Design
• Introduction
• Principles.
‡ Material Design is a design system built and
supported by Google designers and developers.
‡ Material.io includes in-depth UX guidance and UI
component implementations for Android, Flutter
and the Web.
‡ The latest version, Material 3, enables personal,
adaptive, and expressive experiences – from
dynamic color and enhanced accessibility, to
foundations for large screen layouts and design
tokens.

Material Design Introduction
• Material is a design system created
by Google to help teams build high-
quality digital experiences for
Android, iOS, Flutter, and the web.
15 April 2024
Design Components
5

15 April 2024
Design Components
6

Material Design – 1.1 Principles
• Material is the metaphor
Material Design is inspired by the physical world and its
textures, including how they reflect light and cast
shadows. Material surfaces reimagine the mediums of paper
and ink.
• Bold, graphic, intentional
Material Design is guided by print design methods
typography, grids, space, scale, color, and imagery — to
create hierarchy, meaning, and focus that immerse viewers
in the experience.
15 April 2024
Design Components
7

15 April 2024
Design Components
8
Motion provides meaning
Motion focuses attention and maintains continuity
through subtle feedback and coherent transitions. As elements
appear on screen, they transform and reorganize the environment
with interactions generating new transformations.

1.2 Material Environment
• Surfaces
Material Design has three-dimensional
qualities that are reflected in its use of
surfaces, depth, and shadows.
• Elevation
Elevation is the relative distance between
two surfaces along the z-axis.
• Light and Shadows
Material surfaces cast shadows when they
obstruct light sources.
15 April 2024
Design Components
10

15 April 2024
Design Components
11

1.2.1 Surface
• Surface - Material Environment
• Surface - Properties
• Surface - Attributes
15 April 2024
Design Components
13

Surface – Material Environment
• The physical world
– In the physical world, objects can be stacked or attached to one
another, but cannot pass through each other. They cast shadows
and reflect light.
– Material Design reflects these qualities in how surfaces are
displayed and move across the Material UI.
– Surfaces, and how they move in three dimensions, are
communicated in ways that resemble how they move in the physical
world.
– This spatial model can also be applied consistently across apps.
15 April 2024
Design Components
14
The physical world, Depth, 3D space with x, y, and z axes

• Depth
– Material Design UIs are displayed in an environment
that expresses three-dimensional (3D) space using
light, surfaces, and cast shadows
– All elements in the Material environment move
horizontally, vertically, and at varying depths
along the z-axis.
– Depth is depicted by placing elements at various
points along the positive z-axis extending towards
the viewer.
– On the web, the UI expresses 3D space by
manipulating the y-axis.
15 April 2024
Design Components
15

3D space with x, y, and z axes
15 April 2024
Design Components
16

1.2.1 Surface
• Surface - Material Environment
• Surface - Properties
• Surface - Attributes
15 April 2024
Design Components
17

Surface – Properties
1. Dimensions
2. Shadows
3. Resolution
4. Content
5. Physical Properties
6. Transforming Material
7. Movement
15 April 2024
Design Components
18

1. Dimensions
• Material has varying x & y dimensions
(measured in dp) and a uniform thickness
(1dp).
15 April 2024
Design Components
19

2. Shadows
• Material surfaces at different
elevations cast shadows.
15 April 2024
Design Components
20

Shadows - Do
• Shadows show the elevation of different Material surfaces.
1. Top view.
2. Isometric 3D view showing the shadow cast by light when the
material moves upwards.
15 April 2024
Design Components
21

Shadows – Don’t
• Don’t express shadows without changing a surface’s elevation.
1. Top view.
2. Isometric 3D view depicts a shadow using only color, rather than light and
elevation.
15 April 2024
Design Components
22

3. Resolution
• Material has infinite resolution.
15 April 2024
Design Components
23

4. Content
• Content is displayed in any shape and color on
Material.
• Content does not add thickness to Material.
• Content is expressed without being a separate layer.
15 April 2024
Design Components
24

5. Physical properties
1. Material is solid. User input and interaction
cannot pass through material.
2. Multiple Material elements cannot occupy
the same point in space simultaneously.
3. Material cannot pass through other Material.
For example, one Material surface cannot pass
through another Material surface when
changing elevation.
4. Material does not behave like a gas.
5. Material does not behave like a liquid or gel.
6. Material does not behave like a liquid.
15 April 2024
Design Components
25

1. Material is solid. User input and
interaction cannot pass through
material.
15 April 2024
Design Components
26

2. Multiple Material elements cannot
occupy the same point in space
simultaneously
15 April 2024
Design Components
27

3. Material cannot pass through
other Material.
15 April 2024
Design Components
28

4. Material does not behave like a gas.
15 April 2024
Design Components
29

5. Material does not behave like a
liquid or gel.
15 April 2024
Design Components
30

6. Material does not behave like a
liquid
15 April 2024
Design Components
31

6. Transforming Material
1. Material can change shape.
2. Material can change opacity.
3. Material grows and shrinks only along its plane.
4. Material bends or folds within the depth of the UI.
5. Material surfaces can join together to become a
single Material surface.
6. When split, Material can rejoin. For example, if you
remove a portion of Material from a surface, the
surface will become whole again.
15 April 2024
Design Components
32

1. Material can change shape.
15 April 2024
Design Components
33

2. Material can change opacity
15 April 2024
Design Components
34
1. Material can change opacity uniformly across its entire surface.
2. Material can change opacity across a portion of its surface.

3. Material grows and shrinks
only along its plane.
15 April 2024
Design Components
35

4. Material bends or folds within the depth of
the UI.
15 April 2024
Design Components
36
Don't
Material never bends or folds in ways that exceed the depth of the UI.

5. Material surfaces can join
together to become a single
Material surface.
15 April 2024
Design Components
37

6. When split, Material can
rejoin.
15 April 2024
Design Components
38

Movement
1. Material can be spontaneously generated
or dismissed anywhere in the environment.
2. Material can move along any axis.
3. Material surfaces can coordinate their
motion.
4. Material motion along the z-axis is typically
a result of user interaction.
15 April 2024
Design Components
39

1. Material can be spontaneously
generated or dismissed anywhere in the
environment.
15 April 2024
Design Components
40

2. Material can move along any axis.
15 April 2024
Design Components
41

3. Material surfaces can coordinate
their motion.
15 April 2024
Design Components
42

4. Material motion along the z-axis is
typically a result of user interaction.
15 April 2024
Design Components
43

Surfaces Material Environment
15 April 2024
Design Components
44
The physical world: shadows and reflect light, three dimensions
Depth: light, surfaces, and cast shadows, horizontally, vertically, and at
varying depths along the z-axis
Surface Properties
1. Dimensions: varying x & y dimensions (measured in dp) and a uniform
thickness (1dp).
2. Shadows: Material surfaces at different elevations cast shadows.
3. Resolution: Material has infinite resolution.
4. Content: Content is displayed in any shape and color on Material.
• Content does not add thickness to Material.
Content is expressed without being a separate layer.
5. Physical Properties: Material cannot pass through other Material

Surfaces Material Environment
15 April 2024
Design Components
45
6. Transforming Material: it can change shape, opacity, grows, shrinks,
bends/folds, join, rejoin and split.
7. Movement: Material can move along any axis, coordinate their motion
along with Z axis.
3D space with x, y, and z axes

Surface - Attributes
♣ Basic Material surface
♣ The basic Material surface is opaque white, with 1dp thickness, and casts a
shadow.
♣ All UI elements in Material Design result from modifications to this surface.
♣ Some surface attributes are:
♣ Behavior
♣ Composite surfaces
♣ Stretchable surfaces
♣ Surface positioning and movement (x/y)
♣ Surface opacity
♣ Scrim
15 April 2024
Design Components
46

Material Surface Behavior
• Material surfaces can behave in certain ways:
1. Rigid surfaces remain the same size through all interactions.
2. Stretchable surfaces can grow or shrink along one or more edges
up to a size limit, then behave as rigid surfaces.
3. Pannable surfaces remain the same size throughout interactions.
They can display additional content upon scrolling within the area,
until reaching a content limit. When this limit is reached, they
behave as rigid surfaces in that scroll direction.
15 April 2024
Design Components
47

1. Rigid Surface
15 April 2024
Design Components
48

2. Stretchable Surface
15 April 2024
Design Components
49

15 April 2024 20CDT42-UID-UNIT I - Basic Design Components 50

3. Pannable Surface
15 April 2024
Design Components
51

Composite surfaces
1. Surfaces can be divided into areas
which display different types of
behavior.
2. A card can stretch to display a region
that scrolls independently of other
card content.
15 April 2024
Design Components
52

Composite surfaces – Example
1
1. Surfaces can be divided into areas which
display different types of behavior.
15 April 2024
Design Components
53
A single surface can
contain multiple
pannable surfaces,
such as an
embedded map (1)
that pans
independently of a
scrollable list (2).

Composite surfaces – Example
2
2. A card can stretch to display a region that
scrolls independently of other card content.
15 April 2024
Design Components
54

Stretchable surfaces
• A stretchable surface can be stretched before
reaching a limit, at which point the entire surface
becomes rigid.
• Surfaces can stretch vertically, horizontally, or in
both directions.
• Typically, user interaction with a surface will stretch
it in one direction.
– For example, tapping "more details" can cause a card to
grow vertically and display additional content.
• Stretchable surface
1. Material stretch direction can be exclusively vertical.
2. Material stretch direction can be exclusively horizontal.
3. Material stretch direction can be along both horizontal
and vertical axes, either independently or
simultaneously.
15 April 2024
Design Components
55

1. Material stretch direction can be exclusively vertical
15 April 2024
Design Components
56

2. Material stretch direction can be exclusively horizontal.
15 April 2024
Design Components
57

3. Material stretch direction can be along both horizontal
and vertical axes, either independently or simultaneously.
15 April 2024
Design Components
58

Surface positioning and movement (x/y)
1. Surfaces can remain in a fixed position on the x-
and y-axes, or can be moveable in any direction.
2. Surface movement can be confined to a single axis,
allow movement along a single axis at a time, or allow
movement along both axes simultaneously.
3. Surfaces can move in any direction.
4. Surfaces can move independently of each other.
5. One surface’s movement can depend upon
another’s movement.
15 April 2024
Design Components
59

1. Surfaces can remain in a fixed
position
15 April 2024
Design Components
60

2. Surface movement can be confined to a
single axis
15 April 2024
Design Components
61

3. Surfaces can move in any direction
15 April 2024
Design Components
62

4. Surfaces can move independently of
each other
15 April 2024
Design Components
63

5. One surface’s movement can
depend upon another’s movement.
15 April 2024
Design Components
64

Surface opacity
• Material surfaces can be transparent, semi-
transparent, or opaque.
1. Content on transparent or semi-transparent
surfaces may need a background treatment to
preserve legibility.
2. Don’t use transparent surfaces, as they
have no opacity, making it difficult to identify
the surface on which content appears.
15 April 2024
Design Components
65

Surface opacity - Do and Don’t
15 April 2024
Design Components
66
Do Don’t

Scrim
• Scrims are temporary treatments that can be applied to Material
surfaces for the purpose of making content on a surface less
prominent. They help direct user attention to other parts of the
screen, away from the surface receiving a scrim.
• Scrims can be applied in a variety of ways, including:
1. Darkening or lightening the surface and its content
2. Reducing the opacity of the surface and its content
• Multiple surfaces on a screen at a time can display scrims.
• Scrims can appear at any elevation, whether in the foreground
or background.
15 April 2024
Design Components
67

Scrim - Example
15 April 2024
Design Components
68

Surface - Attributes
♣ Basic Material surface
♣ The basic Material surface is opaque white, with 1dp thickness, and casts a
shadow.
♣ All UI elements in Material Design result from modifications to this surface.
♣ Some surface attributes are:
♣ Behavior
♣ Composite surfaces
♣ Stretchable surfaces
♣ Surface positioning and movement (x/y)
♣ Surface opacity
♣ Scrim
15 April 2024
Design Components
69

2.2 Elevation
15 April 2024
Design Components
71
Component elevation
values
1. Nav drawer: 16dp
2. App bar: 4dp
3. Card: 1dp to 8dp
4. FAB: 6dp
5. Button: 2dp to 8dp
6. Dialog: 24dp
• Elevation is the relative distance between two surfaces along the z-axis.

Measuring elevation
• Elevation in Material Design is measured
as the distance between Material
surfaces.
• The distance from the front of one
Material surface to the front of another is
measured along the z-axis in density-
independent pixels (dps) and depicted
(by default) using shadows
15 April 2024
Design Components
72

Measuring elevation - Example
15 April 2024
Design Components
73
1. One surface at 1dp elevation and another surface at 8dp elevation, as
viewed from the front
2. The difference in elevation between the two surfaces is 7dp, as viewed from
the side

Measuring elevation - Example
15 April 2024
Design Components
74
Surfaces at the same elevation can appear differently when other surfaces are behind them.
1. Both surfaces A and B are at the same 8dp elevation. They cast different shadows because Surface B is in
front of another surface (C) that already has elevation.
2. Elevation differences between surfaces (A), (B), and (C), as viewed from the side.

The elevation system
• All Material Design surfaces, and components, have
elevation values.
• Surfaces at different elevations do the following:
– Allow surfaces to move in front of and behind other
surfaces, such as content scrolling behind app bars
– Reflect spatial relationships, such as how a floating
action button’s shadow indicates it is separate from a card
collection
– Focus attention on the highest elevation, such as a
dialog temporarily appearing in front of other surfaces
• Elevation can be depicted using shadows or other
visual cues, such as surface fills or opacities.
15 April 2024
Design Components
75

Material Design displays elevation
using shadows.
15 April 2024
Design Components
76

Different surface fills can be used
to express elevation instead of
shadows.
15 April 2024
Design Components
77

Opacity can be used to express
elevation instead of shadows.
15 April 2024
Design Components
78

Resting elevation
• Resting elevations are starting elevation values given
to components by default.
• For example,
– all cards have the same resting elevations as each
other, and
– a dialog has the same resting elevation as other dialogs.
• Resting elevations vary based on the environment,
platform, or app.
– The resting elevations on mobile are designed to provide
visual cues, like shadows, to indicate when components
are interactive.
– In contrast, resting elevations on desktop are shallower
because other cues, like hover states, communicate when
a component is interactive. For example, cards at 0dp
elevation on desktop are outlined with a stroke.
15 April 2024
Design Components
79

Resting elevation – Example 1
15 April 2024
Design Components
80
1. Resting elevations on mobile for an app bar (A), cards (B), and a floating action
button (C), as viewed from the front
2. The same components, as viewed from the side

Resting elevation – Example 2
15 April 2024
Design Components
81
1. Resting elevations on desktop for an app bar (A), floating action button (B), and
cards (C), as viewed from the front
2. The same components, as viewed from the side

Changing elevation
15 April 2024
Design Components
82
Some components respond to user input with increases in elevation.
1. Upon user input, this button increases its elevation from 2dp to
8dp
2. The same component, as viewed from the side

Elevation interference
• When a component moves between its
resting elevation and dynamic elevation
offset, it shouldn't collide with other
components.
• To avoid these kinds of collisions,
components can move out of the way.
• For example,
– if increasing a card's elevation positions it to
pass through a floating action button, that
button can disappear or move off-screen
before the collision occurs.
15 April 2024
Design Components
83

Elevation interference -
Example
15 April 2024
Design Components
84
Temporarily reposition or remove components which might collide with transitioning components. Front (1)
and side (2) views of a card stream on a mobile device, demonstrating how a floating action button (B)
disappears when a card (A) is picked up.

Default elevations
15 April 2024
Design Components
85
Component Default elevation values (dp)
Dialog 24
Modal bottom sheet Modal side sheet 16
Navigation drawer 16
Floating action button (FAB - pressed) 12
Standard bottom sheet Standard side sheet 8
Bottom navigation bar 8
Bottom app bar 8
Menus and sub menus 8
Card (when picked up) 8
Contained button (pressed state) 8
Floating action button (FAB - resting elevation)
Snackbar
6
Top app bar (scrolled state) 4
Top app bar (resting elevation) 0 or 4
Refresh indicator Search bar (scrolled state) 3
Contained button (resting elevation) 2
Search bar (resting elevation) 1
Card (resting elevation) 1
Switch 1
Text button 0
Standard side sheet 0

Cross-section diagram showing the resting
elevation and dynamic elevation offsets for multiple
component
15 April 2024
Design Components
86

2.3 Light and shadows
• In the Material Design environment,
virtual lights illuminate the UI.
• Key lights create sharper,
directional shadows, called key
shadows.
• Ambient light appears from all
angles to create diffused, soft
shadows, called ambient shadows.
15 April 2024
Design Components
87

Light and shadows - Examples
15 April 2024
Design Components
88

Light sources
• Shadows in the Material environment are cast by a key
light and ambient light.
• In Android and iOS development, shadows occur when
light sources are blocked by Material surfaces at
various positions along the z-axis.
• On the web, shadows are depicted by manipulating the
y-axis only.
• The following example shows a card with an elevation of
6dp.
15 April 2024
Design Components
89

Shadows
• Shadows provide cues about depth,
direction of movement, and surface
edges.
• A surface’s shadow is determined by its
elevation and relationship to other
surfaces.
• Because shadows express the degree of
elevation between surfaces, they must
be used consistently throughout your
product.
15 April 2024
Design Components
90

15 April 2024
Design Components
91

3. Basic Material Components
15 April 2024
Design Components
92

M3 - Material Components
(categories)
• Components are interactive building
blocks for creating a user interface.
• They can be organized into categories
based on their purpose:
1. Action
2. Containment
3. Communication
4. Navigation
5. Selection
6. text input
15 April 2024
Design Components
93

Example Components
15 April 2024
Design Components
94

M3 - Material Components (states)
• Material Components are interactive building
blocks for creating a user interface, and include
a built-in states system to communicate
– focus,
– selection,
– activation,
– error,
– hover,
– press,
– drag, and
– disabled states.
• Component libraries are available
for Android, iOS, Flutter, and the web.
15 April 2024
Design Components
95

Example States
15 April 2024
Design Components
96

1. Actions Components
• Action components help people achieve an
aim.
• Some Action Components are:
1. Common Buttons
2. Extended FAB Buttons
3. Floating Action Buttons (FAB)
4. Icon Buttons
5. Segmented Button
15 April 2024
Design Components
97

Actions Components -
Examples
15 April 2024
Design Components
98

2. Containment Component
• Containment components hold information
and actions – including other components like
buttons, menus, or chips.
• Some containment components are:
1. Bottom Sheets
2. Cards
3. Carousel
4. Dialogs
5. Divider
6. List
7. Side Sheets
8. Tooltips
15 April 2024
Design Components
99

Containment Component -
Examples
15 April 2024
Design Components
100

Containment Component -
Examples
15 April 2024
Design Components
101

3. Communication
Component
• Communication components provide helpful
information.
• Some Communication components are:
1. Badges
2. Progress Indicators
3. Snackbar
• Examples:
15 April 2024
Design Components
102

4. Navigation Components
• Navigation components help people move
through the UI.
1. Bottom App Bar
2. Navigation Bar
3. Navigation Drawer
4. Navigation Rail
5. Search
6. Tabs
7. Top App Bar
15 April 2024
Design Components
103

Navigation Components -
Examples
15 April 2024
Design Components
104

Navigation Components -
Examples
15 April 2024
Design Components
105

5. Selection Component
• Selection components let people specify
choices.
1. Checkbox
2. Chips
3. Date Pickers
4. Menus
5. Radio Button
6. Sliders
7. Switch
8. Time Pickers
15 April 2024
Design Components
106

Selection Component -
Examples
15 April 2024
Design Components
107

Selection Component -
Examples
15 April 2024
Design Components
108

6. Text inputs component
• Text input components let people
enter and edit text.
• Example: Text Fields
15 April 2024
Design Components
109

Some Basic Design Components
• Bottom App bar
• Top App bar
• Bottom Navigation
• Buttons
• Cards
• Text Fields
• Navigation Drawer
15 April 2024
Design Components
110

Bottom app bar
• Bottom app bars display navigation and key
actions at the bottom of mobile and tablet
screens.
• Use bottom app bars to draw attention to
important actions.
• Can contain up to four icon buttons and a
floating action button (FAB).
• Bottom app bar layout and contents can change
on different screens of an app.
• Easy to reach on a mobile device.
15 April 2024
Design Components
111

Bottom app bar with four icon
buttons and a FAB
15 April 2024
Design Components
112

Bottom App Bar – M2 vs M3
15 April 2024
Design Components
113

Bottom App Bar - Specs
15 April 2024
Design Components
114

Bottom app bar padding and
size measurements
15 April 2024
Design Components
115

Bottom App Bar - Tips
• Bottom app bars
should be used for:
– Mobile devices
only
– Screens with two
to five actions
• Bottom app bars
shouldn't be used
for:
– Apps with a
navigation bar
– Screens with one
or no actions
15 April 2024
Design Components
116

Difference b/w Bottom App bar
and Navigation Bar
• Bottom app bars aren’t navigation bars.
• Navigation bars provide access to
destinations in an app.
• whereas bottom app bars can contain both
destinations and actions.
15 April 2024
Design Components
117

Top app bar
• Contains a title and actions related to
the current screen.
• Four types: center-aligned, small,
medium, and large.
• On scroll, apply a container fill color to
separate app bar from body content.
• Top app bars have the same width as
the device window.
15 April 2024
Design Components
118

Top App Bar - Types
15 April 2024
Design Components
119

Top App Bar – M2 vs M3
15 April 2024
Design Components
120

Top App Bar (Small) – Anatomy
& Size
15 April 2024
Design Components
121

Top App Bar + Navigation Icon
• Top app bars contain an optional leading navigation
icon. When it appears in an app bar, it’s aligned on the
left of the bar.
• The navigation icon can take any of the following forms:
– A menu icon, which opens a navigation
– A back arrow, which returns to the previous screen
15 April 2024
Design Components
122

Bottom Navigation / Navigation
Bar
• Navigation bars let people switch between UI
views on smaller devices.
• Use navigation bars in compact layouts.
• Can contain 3-5 destinations of equal
importance.
• Destinations don't change. They should be
consistent across app screens.
• Used to be named bottom navigation.
15 April 2024
Design Components
123

Navigation Bar - Specs
15 April 2024
Design Components
124

Navigation Bar - Size
15 April 2024
Design Components
125

Navigation Bar – Target and Margin Size
15 April 2024
Design Components
126

Navigation Bar - Configurations
15 April 2024
Design Components
127

Navigation Bar - Guidelines
15 April 2024
Design Components
128

• Navigation bar destinations have fixed
positions. They don’t scroll or move
horizontally.
15 April 2024
Design Components
129

• Don’t use multiple or low-contrast colors
in a navigation bar, as they make it harder
for users to distinguish the active item and
navigate to other destinations.
15 April 2024
Design Components
130

15 April 2024
Design Components
131

15 April 2024
Design Components
132

Buttons
• Buttons let people take action and
make choices with one tap.
• Use different button types on the same
screen to direct user attention.
• Nine types:
– elevated, filled, filled tonal, outlined,
text, icon, segmented, FAB, extended
FAB.
• Each button has either high, medium,
or low emphasis.
15 April 2024
Design Components
133

Buttons - Types
15 April 2024
Design Components
134

High Emphasis Buttons
Level of
emphasis
Component Rationale Example actions
High
emphasis –
For the
primary,
most
important,
or most
common
action on a
screen
Extended
FAB
The extended FAB’s wider format and
text label give it more visual prominence
than a FAB. It’s often used on larger
screens where a FAB would seem too
small.
Create
Compose
New thread
New file
FAB
The FAB remains the default component
for a screen’s primary action. It comes in
three sizes: small FAB, FAB, and large
FAB.
Create
Compose
Filled button
The filled button’s contrasting surface
color makes it the most prominent
button after the FAB. It’s used for final
or unblocking actions in a flow.
Save
Confirm
Done
15 April 2024
Design Components
135

Medium Emphasis Buttons
Level of
emphasis
Medium
emphasis –
For
important
actions that
don’t
distract from
other
onscreen
elements
Filled tonal
button
Filled tonal buttons have a lighter
background color and darker label color,
making them less visually prominent
than a regular, filled button. They’re still
used for final or unblocking actions in a
flow, but do so with less emphasis.
Save
Confirm
Done
Elevated
button
Elevated buttons are essentially filled
buttons with a lighter background color
and a shadow. To prevent shadow creep,
only use them when absolutely
necessary, such as when the button
requires visual separation from a
patterned background.
Reply
View all
Add to cart
Take out of trash
Outlined
button
Use an outlined button for actions that
need attention but aren’t the primary
action, such as See all or Add to cart.
This is also the button to use for giving
someone the opportunity to change their
mind or escape a flow.
Reply
View all
Add to cart
Take out of trash
15 April 2024
Design Components
136

Low Emphasis Buttons
Level of
emphasis
Low
emphasis –
For optional
or
supplement
ary actions
with the
least
amount of
prominence
Text button
Text buttons have less visual
prominence, so should be used for low
emphasis actions, such as an
alternative option.
Learn more
View all
Change account
Turn on
Segmented
button
Segmented buttons have more visual
prominence than a single icon button.
Left align / Middle
align / Right align
Icon button
The most compact and subtle type of
button, icon buttons are used for
optional supplementary actions such as
“Bookmark” or “Star.”
Add to Favorites
Print
15 April 2024
Design Components
137

Common Buttons
• Common buttons prompt most actions in a UI.
• Can contain an optional leading icon.
• Five types: elevated, filled, filled tonal,
outlined, and text.
• Keep labels concise and in sentence-case.
• Containers have fully rounded corners and are
wide enough to fit label text.
15 April 2024
Design Components
138

Buttons – M2 Vs M3
15 April 2024
Design Components
139

Elevated Button – Specs & Size ( Common
to Filled, Filled Tonal, Outlined Buttons)
15 April 2024
Design Components
140

Text Button – Spec & Size
15 April 2024
Design Components
141

Buttons - Usage
• Buttons communicate actions that
users can take. They are typically
placed throughout your UI, in places
like:
– Dialogs
– Modal windows
– Forms
– Cards
– Toolbars
15 April 2024
Design Components
142

Buttons - Guidelines
15 April 2024
Design Components
143

15 April 2024
Design Components
144

15 April 2024
Design Components
145

Text Buttons – Usage.
• Text button in a snackbar.
• Text button against an image
background.
• Text button in a card.
• Text buttons in a dialog.
15 April 2024
Design Components
146

FAB Button
• Floating action buttons (FABs) help people take primary
actions.
• Use a FAB for the most common or important action on a
screen.
• Make sure the icon in a FAB is clear and understandable.
• FABs persist on the screen when content is scrolling.
• Three sizes: small FAB, FAB, large FAB.
15 April 2024
Design Components
147

FAB – M2 vs M3
15 April 2024
Design Components
148

FAB – Specs & Size
15 April 2024
Design Components
149

Small FAB - Size
15 April 2024
Design Components
150

Large FAB - Size
15 April 2024
Design Components
151

FAB - Guidelines
15 April 2024
Design Components
152

FAB - Guidelines
15 April 2024
Design Components
153

FAB - Guidelines
15 April 2024
Design Components
154

FAB (should use)
• A FAB can trigger an action either on
the current screen, or it can perform an
action that creates a new screen.
• A FAB promotes an important,
constructive action such as:
– Create
– Favorite
– Share
– Start a process
15 April 2024
Design Components
155

FAB (shouldn't use)
• Avoid using a FAB for
minor or destructive
actions, such as:
– Archive or trash
– Alerts or errors
– Limited tasks like cutting
text
– Controls better suited to a
toolbar (like controls to
adjust volume or font color)
15 April 2024
Design Components
156

Extended FAB
• Extended floating action buttons (extended FABs) help
people take primary actions.
• Use an extended FAB for the most common or
important action on a screen.
• Contains both an icon and label text.
• The most prominent type of button.
• Use when a regular FAB (with just an icon) may not be
clear.
15 April 2024
Design Components
157

Extended FAB - Specs
15 April 2024
Design Components
158

Extended FAB - Size
15 April 2024
Design Components
159

Icon Buttons
• Icon buttons help people take minor actions with one tap.
• Icon buttons must use a system icon with a clear meaning.
• Two types: standard and contained.
• On hover, display a tooltip describing the button’s action
(not the name of the icon).
• Use outline-style icons to indicate an unselected state, and
filled-style icons for selected state.
15 April 2024
Design Components
160

Filled Icon Button – Specs &
Size
15 April 2024
Design Components
161

Icon Buttons - Guidelines
• Use filled icon buttons for high emphasis actions, such as turning
off a microphone or camera.
• Use a toggle icon button for actions like Raise hand in a video
meeting. When selected, its visual emphasis is greater than the
medium-emphasis outlined button for the Overflow menu, but less
than the high-emphasis filled button for End call.
• Use outlined icon buttons in cases that require a more emphasis
than a standard icon button, but less than a filled or tonal icon
button. Here, outlined icon buttons indicate that more content is
available.
15 April 2024
Design Components
162

Segmented Buttons
• Segmented buttons help people select options,
switch views, or sort elements.
• Segmented buttons can contain icons, label text, or
both.
• Two types: single-select and multi-select.
• Use for simple choices between two to five items (for
more items or complex choices, use chips).
15 April 2024
Design Components
163

Segmented Buttons - Specs
15 April 2024
Design Components
164

Segmented Buttons - Size
15 April 2024
Design Components
165

Segmented Buttons - Density
• Density can be used in denser UIs where
space is limited. Density is only applied to
the height.
• Each step down in density removes 4dp
from the height.
15 April 2024
Design Components
166

Segmented Buttons -
Guidelines
15 April 2024
Design Components
167

Cards
• Cards display content and actions about a single subject.
• Use cards to contain related elements.
• Three types: elevated, filled, outlined.
• Contents can include anything from images to headlines,
supporting text, buttons, and lists.
• Can also contain other components.
• Cards have flexible layouts and dimensions based on their
contents.
15 April 2024
Design Components
168

Card Types - Specs
15 April 2024
Design Components
169

Cards - Anatomy
15 April 2024
Design Components
170

Card - Size
15 April 2024
Design Components
171

Text Fields
• Text fields let users enter text into a UI.
• Make sure text fields look interactive.
• Two types: filled and outlined.
• The text field’s state (blank, with input, error, etc) should
be visible at a glance.
• Keep labels and error messages brief and easy to act on.
• Text fields commonly appear in forms and dialogs.
15 April 2024
Design Components
172

Text Fields – Specs & Size
15 April 2024
Design Components
173

Text Fields - Sample
15 April 2024
Design Components
174

Text Fields - Guidelines
15 April 2024
Design Components
175

Navigation Drawer
• Navigation drawers let people switch between
UI views on larger devices.
• Use navigation drawers in expanded
layouts and modal navigation drawers
in compact and medium layouts.
• Can be open or closed by default.
• Two types: standard and modal.
• Put the most frequent destinations at the top
and group related destinations together.
15 April 2024
Design Components
176

Navigation Drawer - Types
15 April 2024
Design Components
177

Navigation Drawer - Specs
15 April 2024
Design Components
178

Navigation Drawer (Standard) -
Size
15 April 2024
Design Components
179

Navigation Drawer (Model) -
Size
15 April 2024
Design Components
180

Standard & Model Navigation Bar -
Sample
15 April 2024
Design Components
181

Human Interface Guidelines
• The HIG contains guidance and best
practices that can help you design a
great experience for any Apple
platform.
15 April 2024
Design Components
182

Apple Platforms
• iOS
• iPadOS
• macOS
• tvOS
• visionOS
• watchOS
15 April 2024
Design Components
183

iOS
• As you begin designing your app or game for iOS, start by
understanding the following fundamental device characteristics
and patterns that distinguish the iOS experience.
– Display. iPhone has a medium-size, high-resolution display.
– Ergonomics. People generally hold their iPhone in one or both hands as they
interact with it, switching between landscape and portrait orientations as
needed. While people are interacting with the device, their viewing distance
tends to be no more than a foot or two.
– Inputs. Multi-Touch gestures, onscreen keyboards, and voice control let
people perform actions and accomplish meaningful tasks while they’re on the
go. In addition, people often want apps to use their personal data and input
from the device’s gyroscope and accelerometer, and they may also want to
participate in spatial interactions.
– App interactions. Sometimes, people spend just a minute or two checking on
event or social media updates, tracking data, or sending messages. At other
times, people can spend an hour or more browsing the web, playing games, or
enjoying media. People typically have multiple apps open at the same time,
and they appreciate switching frequently among them.
– System features. iOS provides several features that help people interact with
the system and their apps in familiar, consistent ways.
15 April 2024
Design Components
184

Components for Apple Platform
• 8 categories of components
– Content
– Layout and organization
– Menus and actions
– Navigation and search
– Presentation
– Selection and input
– Status
– System experiences
15 April 2024
Design Components
185

15 April 2024
Design Components
186

15 April 2024
Design Components
187

15 April 2024
Design Components
188

15 April 2024
Design Components
189

15 April 2024
Design Components
190

15 April 2024
Design Components
191

15 April 2024
Design Components
192

15 April 2024
Design Components
193

Input Methods
• The following input methods are people use to control
your app or game and enter data.
– Action button
– Apple pencil and scribble
– Digital crown
– Eyes
– Focus and Selection
– Game Controllers
– Gestures
– Gyroscope and accelerometer
– Keyboards
– Nearby Interactions
– Pointing Devices
– Remotes
– Touch Bar
15 April 2024
Design Components
194

Thank You
15 April 2024
Design Components
195

UNIT 1 BASIC DESIGN COMPONENTS USING FIGMA

Recommandé

Recommandé

Contenu connexe

Similaire à UNIT 1 BASIC DESIGN COMPONENTS USING FIGMA

Similaire à UNIT 1 BASIC DESIGN COMPONENTS USING FIGMA (20)

Dernier

Dernier (20)

UNIT 1 BASIC DESIGN COMPONENTS USING FIGMA