Course 5 Module 3

Section 1: Understand design systems

1:1. Video

Welcome to Module 3
0:01
Welcome back. You've been exploring the importance of visual design elements and principles
and how to lay out a page. You even made your own mockups and have been iterating to
improve them.

0:13
In this part of the course, you'll explore the world of design systems and sticker sheets. First, I'll
introduce you to the parts of a design system, as well as the benefits of using a design system.
Then, we'll explore two companies' design systems that are free for you to utilize in your own
work.

0:31
Next, we'll use a design system library in Figma, and you'll have an opportunity to use one in
your mockups. Finally, we'll learn how to use sticker sheets and how you can set up a sticker
sheet in Figma.

0:44
In my opinion, this is going to be the most exciting part of the course. I work on Material Design,
which is Google's design system, so I'm really looking forward to giving you a behind-the-scenes
tour of my world. Let's get to it.

//////////////////////////

Course 5 Module 3
Section 1: Understand design systems

2:2. Video

Introduction to Design Systems

0:01
Hi, again. In this video, we'll discuss design systems and why they matter.
0:06
Let's start with a definition.

0:09
A design system is a series of reusable elements and guidelines that allow teams to design and
develop a product following predetermined standards.

0:19
Have you ever worked at a business that had a series of guidelines for different processes? Did it
get hard to keep track of all the rules? Well, design systems help teams combine all of these
different guidelines in one place, including important information like brand guidelines,
components, color palettes, and more.

0:38
For example, a design system outlines rules about how to use your company's brand colors in
your designs, and which colors should be used for icons and typography.

0:48
Some of the visual elements frequently included in the design system are color, iconography,
layout, copy, animation, elevation, typography, and illustration.

1:05
So, how are design systems set up? Most design systems include visual styles, guidelines for
how to apply them, UI patterns, and supporting code for developers. Let's go through each of
these in more detail. First up, visual styles. Defining the styles for core visual design elements,
like typography, color palettes, and iconography, helps companies express their brand more
consistently.

1:30
This also helps UX designers improve the user's experience.

1:35
Next are the guidelines.

1:37
This is where the design principles, editorial guidelines, and implementation guidelines are
defined. Clear rules about how certain components or styles should be used within a product help
designers stay consistent.

2:11
Then there's UI patterns. UI patterns include elements like text, color, or icons; components,
which are made up of elements, like a button or form label; modules, which are groups of
components, like a header with a logo or a navigation bar at the top of the page; and templates,
which are groups of modules put together to form pages.
2:16
In addition, each of these sections of a design system usually includes detailed notes about which
elements, components, modules, and templates are the most important, and how often to use each
one.

2:30
And, finally, design systems support code for developers. To help developers build out designs
correctly, design systems often include the code to create each of the provided elements or
components.

2:42
Compiling all this information into a comprehensive design system ensures that all the different
elements in your designs will carry through to the final product.

2:46
All right, now that you're starting to get to know design systems, let's explore the benefits of
design systems in the next video. Let's keep going.

////////////////////////////

Course 5 Module 3
Section 1: Understand design systems

3:3. Video

Benefits of Design Systems

0:00
Let's keep learning about design systems. Depending on where you work, design systems might
be really important in your first job as a UX designer. Why? Well, there are a lot of benefits of
design systems. For one, design systems create consistency for designers and users. When
designers are limited to a certain set of elements, there's less chance that they'll introduce
inconsistencies in the product or the company's brand.

0:28
For example, imagine the design system for our dog walker app instructs designers to always use
orange buttons with rounded edges in their designs. Although there are dozens of shades of
orange to choose from, we've decided to use the color FA7B17 in our design system. We've also
decided that the text on these buttons should always use the typeface SF Pro Display. By
deciding on these visual styles up front and including them in the design system, it's easier for
designers to create the buttons and for users to notice them in the product.
1:04
Another benefit of design systems is that they help reinforce a company's brand identity. Design
systems keep the visual design elements consistent within a product and across products. For
example, Google's design system, called Google Material, has four primary colors: blue, red,
yellow, and green. If you open any app on your phone from Google, like Google Maps or Google
Drive, you'll notice these four colors in the designs. You might also notice that all Google
products use the same font, which we call Google Sans, and they favor rounded corners over
square ones.

1:35
Another benefit of design systems is that they're scalable. The term scalable describes a system
that's able to maintain performance levels when workload increases. This can be particularly
helpful at a rapidly growing company like a startup. For instance, if there's a design system that's
already set up with a specific color palette and typography, it can be easier to iterate on the
design as the product evolves. It's also easier to onboard new designers to the team.

2:12
A fourth benefit of design systems is that they save time and money by increasing efficiency for
individuals and teams. When there's a system that can be uniformly applied to the designs,
members of a team will have fewer questions about design specifications, so the work can be
finished more quickly.

2:35
Finally, design systems help designers and developers work together more effectively. Before the
introduction of design systems, projects often hit obstacles when designers handed off their
designs to developers. These challenges arose because the design and development teams tended
to operate independently, and each team had different requirements. By building a design system
together, design and development teams are aligned from the beginning. This allows a developer
to receive a design and immediately know what code needs to be written to bring the design to
life.

3:06
It's important to know that not all design teams have a fully developed design system, but those
that do usually find that it elevates the quality of their interactions and products. Also, the way
that you interact with design systems as a new UX designer will depend on the size of the
company you're working for. At larger companies, you'll probably use a design system that's
already been set up. But if you start out at a smaller company, you might be expected to help
build a new design system, which is a big challenge, but also a great learning opportunity.

3:30
Whatever size company you work for, you should always be ready to follow a design system or
contribute ideas to improve an existing system. That might mean anything from updating the
colors or typography in the style guide to defining components and designing templates. Coming
up, we'll explore Google's public design system, Material Design, which has been used as a
model for a lot of other organizations. Material Design is the team I work on, so I'm really
looking forward to giving you a tour of my world.
/////////////////////////////////////////

Course 5 Module 3
Section 1: Understand design systems

4:4. Assignment
//////////////////////////////////////////

Course 5 Module 3
Section 1: Understand design systems

5:5. Video

Google's Design System: Material Design

0:00
Hi there. It's important for UX designers to understand how to use a design system in the most
efficient way. In this video, we'll explain design system libraries and how they help designers
and developers. We'll also explore Google's own design system called Material Design.

Material Design is a public design system created by Google. It's used by designers and
developers around the world to create different mobile apps and websites. We also have a private
version of this design system that's used internally for various product teams. It's called Google
Material. Currently, I'm a staff interaction designer on the Material Design team here at Google.
As someone who didn't study UX in college, I found design systems to be a super helpful way to
learn about the basics of good design. The guidelines in the system helped me understand the
principles of user interface design.

Some companies don't share their design systems with the public. But Google decided to make
these resources public for designers, developers, and engineers to interact with and learn from.
You should definitely take advantage of the opportunity. Ready to explore Material Design with
me to get a better sense of how this all works? Let's go. Start by navigating to material.io.

1:28
Before we go anywhere, notice the hero area featuring a "Get Started" button. You'll get to
explore that part of the site later on your own. But first, allow me to give you an overall picture
of what this amazing site has to offer. The best way to navigate material.io is to use the
navigation rail on the left, which has the following sections:

 Home
 Get Started
 Develop
 Foundations
 Styles
 Components
 Blog

In this video, I'll be walking you briefly through each of these sections. As we go, I think you'll
quickly discover that design systems are much more than a simple style guide. They can also
provide the foundational principles and guidance for how to use them.

If you scroll down below the Hero on the homepage, you'll find sections for news and launches,
design system updates, and resources. These sections are focused on the Material Design site as a
whole, highlighting general updates and launches that are coming or have come to the site.

As I mentioned, you will explore and get started a little later. We will skip that section for now.
Let's explore the other sections so that you know how to navigate the site and get a feel for what
Material Design has to offer.

Develop Section
First off, there's the "Develop" section. You'll find that for some of the novel items, other than
Home, more granular lists of menu choices will populate beside the main menu, which will have
all of the item topics contained within that section. For the Develop part of the site, you'll find
the menu divided into overview, followed by a short list of several different development
platforms. This section is geared towards developers, so we won't focus on this too much right
now. Just know that here you'll find tutorials and documentation focused specifically on Material
Design for Android, Flutter, and the web.

Foundations Section
Below Develop, you'll find "Foundations," which offers fundamental guidance on topics such as
accessible and adaptive design, as well as customization and design tokens. The Foundations
section guides you through introductory level UX concepts such as designing with user
interaction in mind (like gestures and text input), or design layout considerations (like spacing
and sizing). There's also a helpful "Material A-Z" article with the vocab list that helps you get to
know the terms and concepts used throughout the Material site.
Styles Section
Next in the navigation rail, let's move down to "Styles." In the Styles section, you'll find
guidelines for understanding and applying color, elevation, and icons, as well as detailed articles
focusing on motion, shape, and typography. You've learned in this certification program about a
majority of these elements already, but you should come back to this section regularly to keep
up-to-date with Material Design's latest design guidance. As you dive in further, you'll find some
particularly insightful guidance on pro-level UX concepts like dynamic color and motion.

Components Section
Next in the nav rail, let's go to "Components," which you'll find defined as interactive building
blocks for creating an interface. This section offers all of Material Design's components for
creating apps and websites. There are articles, tutorials, and documentation on everything from
badges, buttons, and checkboxes to menus, sliders, and tooltips.

On the Components homepage, you'll discover that all of them can be categorized into six
different areas based on their purpose:

 Action
 Communication
 Containment
 Navigation
 Selection
 Text input

I find this section of the site really helpful whenever I'm starting a new project. I check first to
see what Material components I should be using for my design needs.

Blog Section
Finally, let me show you the Blog page. There is so much helpful, fresh information here for new
UX designers like you. It contains links to blog posts covering so many amazing topics, such as
design components for Android and making text more accessible.

5:52
Now that you have a general understanding of how to navigate the site, let's return back to the
"Get Started" section I mentioned at the start. This is where I want to leave you to start exploring
on your own. You'll want to go through each of the four sections:

 What's Material
 Using Material
 Design
  Develop

This page and the links below have been specifically curated to help you get to know Material's
purpose, what it has to offer, and how it can help you in your design education and design career.

Before I let you go explore though, I want to point out one amazing resource you will find in the
Design section of the Get Started page. It is called the Material Figma Design Kit. If you click
on this page, it will open a new tab. This is a landing page for Material Design's Figma sticker
sheet featuring Figma components ready to use in your Figma projects.

To get started with the design kit in your projects, just click on "Open in Figma" at the top of the
page. The Figma Design Kit is a really great way to jumpstart your designs and prototypes, no
matter the platform or device you're designing for.

There's a lot of information here for you to explore on your own. The Material Design site
doesn't just provide explanations or descriptions. It also includes tons of practical visual
examples of almost any design element, component, or pattern you can think of. I've only gone
over a small portion of what the Material Design website has to offer. Be sure you take time to
explore all of the resources, articles, documentation, and tools that are available here. It has years
of dedicated professional work on design laid out in an easy-to-learn format.

As a new UX designer, you may be working for a company like Google that has its own
established design system, like Material. On the other hand, you might work for a smaller
company or a startup where you need to help build one. Now that you know what design systems
are and have explored a section of Google's Material Design library, you should have a clear idea
of the different elements design systems might include.

/////////////////////////////

Course 5 Module 3
Section 1: Understand design systems

6:6. Video

Shopify's Design System: Polaris

0:00
Hi again. You've just learned about some of the visual elements, like color and text, in Material
Design, the public design system offered by Google. In this video, we'll explore Polaris, the
design system offered by the e-commerce company Shopify. Shopify offers online businesses
services like marketing, shipping, and payments. This design system was created to help
designers and developers make seller-friendly products using the Shopify platform. I'll start by
navigating to polaris.shopify.com, and I'll land on the homepage.

0:38
First, as I start to scroll down, I'll find the Guides section, which offers practical advice for
designing customer-friendly experiences. These include guidelines for internationalization,
which is how to make your product work in other languages and countries, and how to design an
app to work with the Shopify platform.

Next, as I continue to scroll down, Shopify highlights four different parts of their design system.
Let's explore each one briefly now, and we'll go into more detail later in the video.

1. Content Section
This section gives great guidelines for how to choose the best language that goes into the
design.
2. Design Section
In this section, you can find all the visual elements, like color, type, and icons, that will
help enhance your mockup designs.
3. Components Section
This section is full of lots of UI components for designers and developers.
4. Experiences Section
This includes information about page layouts, mobile patterns, common error messages,
and more to meet Shopify's guidelines.

As I keep scrolling down the homepage, I'll find the What's New section, which is a great place
to discover Polaris updates.

1:53
Finally, there's the Resources Section. Here you can find UI kits that can be used for your
designs in Figma or Sketch. We'll cover UI kits in more detail later. Now that you have an idea
of where everything is in the design system, let's go back to the top of the page and navigate to
the Polaris Foundations page.

Polaris Foundations Page

There's a sidebar divided into categories based on key elements to consider in your designs:

 Accessibility
 Internationalization
 Information Architecture
 Mobile
Let's spend a little time in the Information Architecture section. As you learned earlier in the
course, information architecture is about structuring the content in the design for the best user
interaction. The information architecture guidelines include:

 A definition of IA
 Why Shopify values IA
 Their information architecture principles
 And more

Contents Section
Let's scroll back up and check out the Contents Section next. This section provides best
practices for:

 Voice and tone

 Grammar and mechanics
 Naming

There are a lot of helpful tips about content and writing, no matter what platform you're
designing for. Then in the Actionable Language section, there's information about the words we
should use to guide users to take action in the most efficient way as they use a product.

3:14
Let's go back up to the top of the page and click on the Design Section. Lots of the visual design
elements we covered earlier are all here, like color, typography, and sounds. You can also
explore some of the more technical elements, like spacing and interaction states.

That's a quick tour of Shopify's design system, Polaris. Now you have two design systems that
you can reference as you continue to build your own designs. There are many more popular
design systems out there, so keep exploring. Coming up, we'll cover sticker sheets, which are a
collection of different elements and components that go into your design system. Meet you there!

//////////////////////////

Course 5 Module 3
Section 1: Understand design systems

7:7. Reading
Explore Popular Design Systems
Design systems are a series of reusable elements and guidelines that allow teams to design and
develop a product, following predetermined standards. As a UX designer, you’ll utilize design
systems all the time to improve the speed and consistency of your work. Especially when you're
new to the field, design systems can help you better understand best practices in design and can
drastically improve the quality of your own design work.

One way to explore design systems is to check out some popular examples you’ve likely
experienced while using an app or a website, such as:

 Google’s Material Design

 Shopify’s Design System: Polaris
 Apple Human Interface Guidelines
 Microsoft Fluent Design System
 Airbnb's Design System
 U.S. Web Design System, a design system for the U.S. federal government

Review the details of these design systems, and take note of components that you might want to
leverage in your own designs!

//////////////////

Course 5 Module 3
Section 1: Understand design systems

8:8. Assignment
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////

Course 5 Module 3
Section 2: Create a sticker sheet

9:1. Video

Create a Sticker Sheet in Figma

Introduction
In this video, we’ll explore sticker sheets, also known as design kits. Sticker sheets are
collections of elements and components that make up part of a design system. These sheets allow
designers to maintain consistency and efficiency when working on multiple projects.

What Are Sticker Sheets?

Sticker sheets are collections of commonly used elements and components in a design. Here's an
example of a sticker sheet for a dog walker app. The sheet includes colors, buttons, icons, and
navigation bars that are frequently used in designs. By documenting these elements and
components carefully, you prevent errors and inconsistencies in your designs.

Why Are They Called Sticker Sheets?

The name "sticker sheets" comes from the idea that you can figuratively peel off each element
and stick it into your design with a simple copy and paste. This makes it easier to reuse
components throughout your design.

Components and Reusability

When designing your first mockup, you may reuse elements like text, colors, icons, or buttons.
These reusable elements are the types of things you would place onto a sticker sheet.

 Components: A component is made up of elements. For example, a button is a

component consisting of elements like text, color, and shape.
 Instances: Figma allows components to be reusable. You can label the original
component as the main component, and any copies of that component will be referred to
as instances.

When components are placed on a sticker sheet, any changes made to the component (like
changing the color of a button) will automatically reflect in all its instances.

Benefits of Sticker Sheets

 Consistency: When you change a component, all instances tied to it will update. This
helps in maintaining consistency throughout the design.
 Time-saving: If you change the primary button color from orange to blue in the sticker
sheet, all instances that are linked to the main component will update automatically,
saving time and effort.

How to Create a Sticker Sheet in Figma

To create your own sticker sheet:

1. Create a Blank Frame: Start by creating a blank frame in Figma.

 2. Add Elements and Components: Copy and paste the elements and components that you
frequently use throughout your design onto the sticker sheet.
o Example: In the dog walker app, the sticker sheet might include buttons,
dropdowns, chips, and a walker profile.
3. Include Different States: It’s important to show the different states for each component.
o States are visual representations that communicate the status of a component or
interactive element.
o Example: The reviews icon might have a white version and an orange version,
representing inactive and active states, respectively.

Why Sticker Sheets Are Useful

Sticker sheets are essential for:

 Collaboration: When working with other designers, a sticker sheet serves as a simple
style guide, making communication easier.
 Consistency Across Teams: As your design team grows, sticker sheets help keep
designs consistent. For example, you won’t accidentally create a rectangle button with
sharp corners while a teammate uses rounded corners.
 Onboarding New Designers: When new designers join your team, they can start using
the pre-existing design elements and components from the sticker sheet, allowing them to
quickly get up to speed.

Conclusion
Designers use sticker sheets to make their work faster and to avoid rework. Sticker sheets are
invaluable tools for ensuring consistency, improving collaboration, and maintaining design
standards across a project. Now you know how to create and use sticker sheets for your own
designs!

///////////////////////////////

Course 5 Module 3
Section 2: Create a sticker sheet

10:2. Reading

Creating Sticker Sheets for Design Projects

Sticker sheets (or design kits) are collections of reusable assets in a design system. These assets
include components such as buttons and icons, as well as the elements that make up those
components, such as color and fill. By assembling reusable assets, sticker sheets make designing
more efficient and consistent. With a sticker sheet, designers can:

 Copy assets from the sticker sheet and paste them into the design
 Share the sticker sheets with teammates and other collaborators
 Update all instances of an asset by updating the original in the sticker sheet

This guide explains how to create a sticker sheet for a design system in Figma. When complete,
the sticker sheet will contain the design system’s most-used assets, including:

 Reusable UI components, such as buttons, menus, and cards

 Typographic elements, including typefaces and font families
 Color choices, including an overall palette and specific component colors
 Icons representing recurring actions or navigation choices a user might interact with

Steps to Create Sticker Sheets in Figma

1. Open Your Project in Figma

Go to www.figma.com or start the Figma desktop app. Make sure you're logged in and on the
correct Figma account. Next, on the left side of the navigation bar, click on Recent to see your
recent projects. Search for your project and click on it.

Note: Figma is launching their new interface UI3 this year. Updates will be released on a rolling
basis, and some users may already have the new UI! For users transitioning, Figma has a
resource to help with navigating UI3.

2. Create a New Page in Your Figma File

When you start a new file in Figma, you have one page by default. To keep things organized,
you should separate different parts of the project into different pages.

To create a new page:

1. Select the Layers panel in the top-left corner.

2. Click the Page 1 option (the default page).
3. Click the + button to add another page. If it's your second page, the default name will be
Page 2.
4. Rename the page by double-clicking the default name and typing the new name (e.g.,
Sticker Sheet, Design Kit, or Style Guide).

3. Create a New Frame

A frame acts as a container for your sticker sheet. To create a new frame:
 1. Select the Frame Tool from the Region Tools menu in the top-left corner. You can also
use the keyboard shortcut Cmd + F (Mac) or F (PC).
2. Draw a frame of any size or select any size option from the right sidebar (e.g., the
Desktop option for ample space).
3. Rename the frame by double-clicking its default name or by renaming it in the Layer
panel.

4. Select UI Assets for Your Sticker Sheet

Before creating a sticker sheet, select the assets to include. These typically consist of typography,
color, and buttons.

Typography

Choose typefaces and fonts that align with your product’s branding, tone, and style. For example,
if you're designing an app for kids, use playful, rounded typefaces. For a professional look,
choose simpler, serious fonts.

An example: For the Google app GeoShapes, the UX designer chose the Yaldevi Colombo
typeface, varying the font weights to highlight important information.

Color

Color plays an essential role in a product’s branding and user experience. It evokes emotion,
establishes hierarchy, and conveys meaning.

For example, GeoShapes uses:

 Primary colors: Red, purple, and green (representing passion, creativity, and growth,
respectively)
 Secondary colors: Less vibrant versions of the primary colors
 Grayscale palette: Subtle shades with hints of the primary colors

You can create color swatches by:

 Creating shapes (circles or squares)

 Filling them with your chosen colors
 Labeling each with the hex code

Buttons

Buttons should reflect the brand’s style and guide users in making choices. To create buttons in
Figma:

1. Click the Text tool or press T on your keyboard.

2. Type the button name (e.g., "Button") in your sticker sheet frame.
 3. Convert the text layer to an auto-layout frame by selecting the text and pressing Shift +
A.
4. Style the button using the right sidebar options:
o Adjust color and fill
o Modify corners (rounded or sharp)
o Adjust padding (distance between the text and button edges)
o Add shadow effects

You can check out how buttons were designed for the GeoShapes app for reference.

5. Save Assets as Components

To ensure consistency, save assets as components. A component is a reusable design element,

and changes made to the component will be reflected across all instances.

To save an asset as a component:

1. Select the asset in the Layer panel or canvas.

2. Right-click and choose Create component or use the shortcut:
o Mac: Option + Command + K
o Windows: Ctrl + Alt + K
3. You can also click the Create component icon in the toolbar.

6. States and Variants

Some components, like buttons, have different states (e.g., active, inactive). To organize these in
Figma, use the Variants function. For example, in GeoShapes, buttons have multiple states that
should be grouped together in a variants container.

7. Add UI Assets to the Sticker Sheet

Once assets are saved as components, add them to the sticker sheet. Start by selecting
typography for headings, ensuring they differ from the design elements used in the sheet.

Categorize your assets logically (e.g., buttons together, icons together) and use design principles
like grids and negative space to keep it clean and user-friendly.

8. Explore Figma’s Baseline Sticker Sheet

For further guidance, explore Figma’s material baseline design kit. This serves as an excellent
reference for how to organize and showcase typography, color palettes, and other assets.
9. Save Your Work

Figma automatically saves your work, but you should also save evidence for your portfolio. Take
screenshots, photos of your progress, or save files to your computer or cloud storage for future
reference.

Additional Resources
 When to start creating components for design systems: An article from Figma to help
guide the creation of components.
 How to Create Buttons in Figma: A step-by-step guide on designing buttons in Figma.
 10 Tips on Using Components in Figma: Expert tips for better component usage.
 Thrive from Lisa: Real-life examples of sticker sheets and components made by a
Googler.

Key Takeaways
Sticker sheets help UX designers work faster, smarter, and more collaboratively. They allow
designers to collect all essential elements and components, such as fonts, buttons, logos, and
animations, in one place for easy access. Sticker sheets also streamline collaboration, ensuring
consistency across teams and helping developers understand the design specifications for coding.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////

Course 5 Module 3
Section 3: Use design systems

11:1. Video

Using a Design System Library in Figma

Introduction
In this guide, you will learn how to use elements and components from an existing design system
in your mockups. As a UX designer, you’ll likely use a design system to build your product
faster. Whether it’s an in-house design system or a public one like Google’s, Microsoft’s, or
Apple’s, knowing how to incorporate the specifications and guidelines from these systems will
be crucial for creating parts of your own mockups.

You might use components from an existing design system and customize elements like colors or
typography to match your branding, or mix in your own components alongside elements from a
design system. In this tutorial, we’ll explore the Material Design system using Figma.

Getting Started with Material Design in Figma

1. Introduction to Material Design System

Material Design is a design system created by Google. It provides guidelines for UI components,
typography, colors, elevation, and states. In this video, we’ll use the Material Design system's UI
kit in Figma to create an alternative version of a dog walker app.

2. Setting Up Figma

 Open the Material Design UI kit in Figma.

 Start a new file using the Material Design kit, which will be linked in your course
readings.
 Navigate to the Material theme page.

Understanding Key Elements in Material Design

1. Typography and Color

The Material Design system offers preset styles for typography and color, which you can
customize to suit your design.

2. Elevation

Elevation refers to the layering or depth of elements in your interface. For instance:

 The background of a screen typically has an elevation of zero.

 A button may have an elevation of four, making it appear lifted off the screen.

Higher elevation elements, such as navigation and alerts, are more visible to users. This helps
improve user experience by guiding focus.
3. States

States represent the status of a component or interactive element. For example, when a user taps
or presses a button, it should visually communicate its status.

 Material Design uses a ripple overlay effect to show feedback when an element is
pressed.
 There are many ways to handle interaction states, and Material Design offers useful
guidelines for defining these states in your mockups.

Working with Material Design Elements in Figma

1. Setting Up the Dog Walker App Mockup

 Start a New Page: In Figma, create a new page for the dog walker app mockup.
 Add a Frame for Phone: Use the frame tool from the top left corner. Select the
appropriate phone frame option from the Design panel on the right side.
 Add Navigation Bar:
o Go to the sticker sheet page in the Material Design UI kit.
o Select the app bar and copy it by pressing "Ctrl + C" or "Command + C".
o Paste it into your mobile frame by pressing "Ctrl + V" or "Command + V".
o Align it to the top of the screen using the “Align Top” button in the Design panel.

2. Adding a Bottom Navigation Bar

 Add from Assets Panel: In Figma, open the assets panel and select the bottom
navigation bar component. Drag the desired version (with three items) onto your phone
frame.
 Align Bottom: Use the “Align to Bottom” button or manually drag the navigation bar to
the bottom of the screen.
 Update Navigation Items: Replace the default icons with those that fit your design. For
example:
o Keep the favorites icon for trusted dog walkers.
o Replace the search and information icons with a home icon for the homepage and
a calendar icon for scheduling a dog walker.

3. Customizing Icons and Text

 Detach Icons: Detach icons from the Material Design component by right-clicking and
selecting "Detach Instance".
 Swap Icons: Replace the search icon with the home icon. Similarly, replace other icons
to match your app’s design needs.
  Adjust Icon Color: Ensure consistency by checking and adjusting the color of new icons
to match the original ones. Material Design uses color names (like “O3 on
primary/medium emphasis”) instead of hex codes for uniformity.

4. Adding a Call-to-Action Button

 Floating Action Button (FAB):

o FAB is a Material Design component that stays fixed on the screen, always visible
and easy to reach.
o Search for the “Floating Action Button” or FAB in the Components page and
choose an appropriate style (e.g., the "2-extended" button).
o Adjust the button text from “Create” to “Schedule” and modify the button’s width
to match the label.
 Positioning the Button: Place the FAB closer to the bottom for easy accessibility,
ensuring the bottom edge is 96 pixels from the bottom of the frame.

5. Final Touches

 Although the mockup isn’t complete, this is a good start. There are still several things left
to add, such as:
o A logo
o An image of a dog
o A list of available dog walkers

Additionally, you will need to update colors, fonts, and other components to match your brand
and design needs.

Conclusion
In this tutorial, we’ve used Material Design in Figma to create a dog walker app mockup by
incorporating pre-built elements from the design system. Material Design’s UI kit offers a wide
range of components to speed up your design process, and by practicing with these kits, you’ll
become more efficient and improve your design skills.

As you explore different design systems, remember that each offers a set of unique components
and guidelines. Choose the one that fits your needs, and continue practicing to improve your
mockup creation process.

Good luck and have fun!

///////////////////////////////////
Course 5 Module 3
Section 3: Use design systems

12:2. Reading

Getting Inspiration from Design Systems

Introduction
As a UX designer, creating stunning visuals is essential for attracting users, maintaining
consistency across products, and establishing a strong brand identity. For example, think about
the bottle of shampoo or laundry detergent you use. Certain visual elements—such as a signature
font, a distinctive color palette, or a clever icon—make the brand instantly recognizable. These
design elements might have even influenced your decision to purchase the product. Companies
invest significant effort into developing smart designs and creating an entire design system that
can be applied to all their products.

A design system is a collection of reusable elements that allows teams to design and develop
products based on predetermined standards. It forms the visual foundation of a company’s
products and plays a crucial role in attracting users. For UX designers, design systems are an
excellent tool for maintaining consistency within a design and across multiple products.

Example of a Design System

Below is an image of a basic design system for a made-up arts magazine, Artniche. This design
system outlines key design elements such as typography, colors, and buttons. These elements are
consistently used across the magazine's app and website, ensuring a cohesive visual experience.

By using a design system, designers ensure consistency and make their design process more
efficient.

The Importance of a Design System

The number of elements included in a design system depends on the goal of your product.
However, the most important thing to remember is that creating a system to outline the design
elements you use is the best way to ensure brand and product consistency. It also saves designers
significant time by having predefined components to work with. The design system effectively
shapes the world behind the product.
Real-World Examples of Design Systems
1. Google Material Design
o Material Design is Google’s design system applied across all its products,
including Google Search, Gmail, and Android. Material Design is widely
available and free for use in your own designs. You can download the baseline UI
kit for Figma to help incorporate Material Design into your projects.
2. How to Use Design Systems in Figma
o To find and import design systems in Figma, visit the Figma Community and
browse through the available options. You can search for a design system from a
brand you admire, and once you find one, click Duplicate to save a copy to your
Drafts folder. You can then use elements and components from that design system
in your own work.
o A few design systems you may want to explore or download:
 Google Material Design
 Shopify Polaris
 Microsoft Fluent
 Salesforce Lightning
 Atlassian Design System
 Uber Base Web

Use these design systems as inspiration for your own work and take note of elements that
stand out to you.

Showcase a Design System in Your Portfolio

Once you create a design system for the product you're designing in this course, it’s a good idea
to include it in your portfolio. For example, Google UX designer Dane co-created an app called
Pocket for a class project. In his portfolio case study, Dane included details about the product’s
design system, including typography, iconography, and buttons. The image below shows how
these elements were presented.

Documenting Your Design Choices

For your own portfolio, document your design choices in each case study. Whether you create a
comprehensive design system with numerous elements or simply outline the icons and colors
you frequently use, including a design system is a great way to highlight your creative decisions
and enrich your portfolio.
Further Learning
If you want to dive deeper into design systems, check out the resource from DesignerUp titled
10 Best Design Systems and How to Learn (and Steal) From Them for more insights and
inspiration.

////////////////////////////////////

Course 5 Module 3
Section 3: Use design systems

13:3. Reading

Optional - Learn from Figma: Use a Design System Library

Introduction
It's time to learn about creating your own design system from scratch. While this may seem like
an overwhelming task, don't worry—the experts from Figma are here to help!

Figma offers an 80-minute course titled Introduction to Design Systems, which provides general
knowledge about design systems. This course covers fundamental concepts, including building,
testing, and documenting your system.

For more information, check out the course overview:

Course Overview: Introduction to Design Systems

Figma’s Five-Part Video Series

Figma also offers a five-part video series to help you understand how to set up a design system
in Figma. These videos will guide you step-by-step through the process:

1. Video 1 - Foundations (55 minutes)

o This video will help you kick off designing a design system from scratch,
covering basics such as typography and colors.
2. Video 2 - Components (55 minutes)
o Learn how to build foundational components and organize them using pages,
frames, names, and descriptions.
 3. Video 3 - Components Continued (55 minutes)
o This video dives into more complex components like cards, media objects,
dialogues, navigations, and forms to include in your design system.
4. Video 4 - Testing (57 minutes)
o In this video, you’ll learn how to check if your component library is robust
enough for real-world scenarios.
5. Video 5 - Documentation (61 minutes)
o This final video covers best practices for documenting your design system using
Figma and other tools.

These videos may be lengthy, but the knowledge you gain will be well worth the time
investment!

/////////////////////////////////////////////////

Course 5 Module 3
Section 3: Use design systems

14:4. Assignment
///////////////////////////////////////////////

Course 5 Module 3
Section 3: Use design systems

15:5. Video

Shabi - Consider Assistive Technologies When Working in Design

Systems

Introduction
Hi, I'm Shabi. I'm an interaction designer at Google. I design digital experiences for people just
like you by understanding your needs and the needs of people with disabilities. Because I work
in design systems, I focus on the component level, so it’s crucial for me to understand how
people with disabilities interact with buttons and other features within an interface.

In order to design effectively, you need to understand the assistive technologies that people with
disabilities use and engage with those communities directly. Assistive technology enhances an
individual's ability to interact with interfaces by creating a connection between the interface and
the technology they use.

Understanding Assistive Technologies

One key assistive technology is the screen reader. A screen reader helps people with limited
vision by reading aloud the content displayed on the screen, including different interactive
elements. For example, when using a screen reader, someone might hear “'Cancel' button,"
which helps them understand the purpose of that interactive element.

Designing for Accessibility

The advice I’d give to anyone interested in designing for accessibility is to reach out to local
communities. There are many independent living facilities, and you may have friends or family
members with disabilities who can provide valuable feedback. It’s important to initiate
conversations and show that you care about making your designs accessible. That’s exactly what
I did when I was still learning and trying to create projects for people with disabilities.

Frustrations in Designing for Accessibility

One of the frustrations I experience when designing for accessibility, especially in collaborative
efforts, is that accessibility is sometimes treated as a patchwork solution. It is often considered
at the end of the design process because the product needs to launch, and meeting certain
guidelines is expected. However, accessibility should not be an afterthought. You should
consider accessibility from the start because designing for people with disabilities often results in
solutions that benefit a broader audience.

Accessibility is crucial because it creates an equitable experience for those who would otherwise
not have one.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////

Course 5 Module 3
Section 4: Module 3 review
16:1. Video

Wrap-up: Exploring Design Systems

Course Recap
Congratulations! You've completed another part of the course. Let’s quickly review everything
you’ve learned:

1. Introduction to Design Systems:

You took your first step into the world of design systems, gaining an understanding of
how they work.
2. Benefits of Using a Design System:
o Consistency: Ensures consistency for both designers and users.
o Brand Identity: Reinforces a company’s brand identity.
o Efficiency: Saves time and money by streamlining design processes.
3. Exploration of Design Systems:
You explored the design systems of two companies, Google and Shopify.
o These systems provide a wide range of elements, components, themes, and
guides that are available for free.
4. Using a Design System Library in Figma:
You learned how to use and set up a design system library in Figma.
5. Sticker Sheet Setup:
You learned how to use and set up a sticker sheet to help manage and organize your
design elements.

Next Steps
Coming up next, we’ll dive into the topic of feedback. As a UX designer, it’s crucial to know
how to give and receive critiques. This feedback is an essential part of improving your designs.
See you there!

///////////////////////////////

Course 5 Module 3
Section 4: Module 3 review

17:2. Reading
Glossary terms from course 5, module 3

Terms and definitions from Course 5, Module 3

Design system: A series of reusable elements that allow teams to design and
develop a

product following predetermined standards

Scalable: Describes a system that’s able to maintain performance levels when

workload

increases

////////////////////////////////////

Course 5 Module 3
Section 4: Module 3 review

18:3. Assignment
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////