GOOGLE UX DESIGN PROFESSIONAL CERTIFICATE

Course 5 – Create High-Fidelity Designs and Prototypes in Figma

Week 3: Exploring Design Systems

Coursera Study Guide

TABLE OF CONTENT

Come explore the world of design systems! In this part of the course, you’ll be introduced to the parts of a design system, as well as the benefits of using a design system. You’ll examine various companies’ design systems, and you’ll have an opportunity to use them in your own mockups. You’ll also learn how to use and create sticker sheets in Figma.

Learning Objectives

  • Discuss the basic components of a design system
  • Describe features and benefits of working with design systems
  • Create a sticker sheet for a project in Figma
  • Demonstrate how to work with design systems in Figma
  • Describe methods for gaining inspiration from design systems
  • Describe how to use sticker sheets
  • Explore and identify common features in open-source design systems

TEST YOUR KNOWLEDGE ON DESIGN SYSTEMS

1. Which of the following visual elements are included in a design system? Select all that apply.

  • Wireframes
  • Iconography (CORRECT)
  • Color (CORRECT)
  • Typography (CORRECT)

Correct: Iconography is an example of a visual element in a design system as it is the collection of icons used in the design. Typography and elevation are also examples of visual elements in a design system.

Correct: Color is an example of a visual element in a design system as it is the collection of icons used in the design. Typography and Iconography are also examples of visual elements in a design system.

Correct: Typography is an example of a visual element in a design system as it is the style and appearance of written language. Elevation and iconography are also examples of visual elements in a design system.

2. A design team sets up a design system for an upcoming product launch. The design system includes visual styles, usage guidelines, _____, and support codes to ensure all elements in their design carry through to the final product.

  • UI patterns (CORRECT)
  • branding
  • graphics

Correct: Design systems include UI patterns, which consist of elements, components, modules, and templates.

3. One benefit of a design system is that it creates consistency for designers and users. When designers have a specific set of elements to work from, they can increase the speed of production, decrease inconsistencies, and focus on innovative solutions that focus on the user.

  • True (CORRECT)
  • False

Correct: Applying a standard set of elements in a design system makes it easier for designers to create them across the project and for users to recognize them.

TEST YOUR KNOWLEDGE ON FEATURES OF OPEN-SOURCE DESIGN SYSTEMS

1. Which of the following examples represent the best use of the app bar title on a desktop?

UX Design Course 5 Week 3.1
Bar Tittle on Desktop 1
  • (CORRECT)

Correct: The best way to present the title in this example is to use the prominent top app bar and text wrapping shown.

UX Design Course 5 Week 3.2
Bar Tittle on Desktop 2
UX Design Course 5 Week 3.3
Bar Tittle on Desktop 3

2. What pages in a public design system can new designers access for additional information and download baseline design kits for Figma and Adobe XD?

  • Develop
  • Resources (CORRECT)
  • Design (CORRECT)
  • Components (CORRECT)

Correct: Designers can access the Resources, Components, and Design pages on public design systems for additional information and baseline design kits. A Resources page offers valuable information for new designers as well as access to downloadable icons and components.

Correct: Designers can access the Resources, Components, and Design pages on public design systems for additional information and baseline design kits. A Design page offers foundational guidance on how to use color, navigation, and other elements.

Correct: Designers can access the Resources, Components, and Design pages on public design systems for additional information and baseline design kits. A Components page offers downloadable building blocks for designers to use as they start building their designs. It also includes guidance on how to use them effectively in their designs.

3. How does a robust design system support a designer’s day-to-day work?

  • Design systems are only useful to experienced designers, not to people new to the field.
  • Design systems provide a strict guideline that never changes
  • Designs systems are scalable as an organization grows.
  • Design systems create consistent guidelines for colors and images that help with brand recognition. (CORRECT)

Correct: Design systems ensure that designers incorporate an organization’s brand in their design  and that the design will look familiar and consistent to users.

TEST YOUR KNOWLEDGE ON WORKING WITH DESIGN SYSTEMS IN FIGMA

1. You are creating an alternative design for an app using the Material Baseline Design Kit in Figma. You find a style for the navigation bar you’d like to add to the app. You copy the selected style from the _____ page and paste it to the new page.

  • Material Theme
  • Sticker Sheet (CORRECT)
  • Getting Started
  • Cover

Correct: The Sticker Sheet page has a list of components you can use to build or modify your design.

2. A designer begins a new project by reviewing the elevation section in the Material Baseline Design Kit in Figma. Which of the following design features should they apply a higher elevation to? Select all that apply.

  • Page background
  • Navigation (CORRECT)
  • Buttons (CORRECT)
  • Alerts (CORRECT)

Correct: Features like navigation would benefit from a higher elevation because they help the user get to their desired destination. Design features like alerts and buttons would also benefit from a higher elevation.

Correct: Features like buttons would benefit from a higher elevation because they help the user complete tasks easily. Design features like alerts and buttons would also benefit from a higher elevation.

Correct: Features like alerts would benefit from a higher elevation because the user can identify important information easily. Design features like navigation and buttons would also benefit from a higher elevation.

3. Including a design system in your case study showcases the creative and strategic design choices you’ve made while enriching your portfolio for future job opportunities.

  • True (CORRECT)
  • False

Correct: Each design choice you make affects how users will see and interact with your product. Highlighting these in a design system and including that design system in a case study showcases your talent and skills to future employers.

WEEKLY CHALLENGE 3: EXPLORE DESIGN SYSTEMS

1. A team needs different sections of a design to remain consistent throughout the duration of the project. A good way to do this would be to create a design system.

  • True (CORRECT)
  • False

Correct: A design system provides a central location for design guidelines and information. Using one helps a team to stay consistent.

2. Consider the following scenario:

Gabriel is a designer at a branding consultancy. Gabriel’s team successfully implements a design system, and delivers a product design that impresses their clients at a rapidly-growing startup. The clients are so happy, in fact, that they immediately want to iterate on the design and expand the product line.

What is the result of implementing a design system?

  • Established consistency
  • Implemented an approach for managing the client
  • Scaled the product (CORRECT)
  • Saved time and money

Correct: Gabriel’s team was able to deliver a product design that impressed their clients, which resulted in immediate expansion of the line. A design system allows them to more easily scale the product as it evolves.

3. Which Material Design feature explores the interactive building blocks for creating user interfaces, and features items such as date pickers, data tables, and menus?

  • Foundations
  • Components (CORRECT)
  • Design
  • Resources

Correct: Material Design’s components section features interactive building blocks for creating a user interface. These include backdrops, date pickers, cards, progress indicators, and more.

4. What are the main features that designers are encouraged to explore in Shopify’s Polaris design system?

  • Design, Components, Develop, Resources, and Blog
  • Foundation, Navigation, Color, Shape, and Communication
  • Foundations, Content, Design, Components, and Experiences (CORRECT)

Correct: Polaris features the following sections: foundations, content, design, components, and experiences.

5. What types of components and elements can a designer include in their sticker sheet? Select all that apply.

  • Designers
  • Colors (CORRECT)
  • Icons (CORRECT)
  • Navigation bars (CORRECT)

Correct: Sticker sheets often include the colors or color palettes associated with the project.

Correct: Sticker sheets often include icons.

Correct: Sticker sheets often include navigation bars.

6. A designer shared the company’s design system with the development team. What can the developers use the design system for?

  • To document all the code needed for the product
  • To list design errors for the design team to address
  • To find the code to create elements or components included in the design system (CORRECT)
  • To find a written list of design changes that were implemented

Correct: Design systems often support code for developers to help them build out designs correctly.

7. Fill in the blank: Defining the styles in a design system for core visual design elements help companies _____. Select all that apply.

  • develop more products
  • distribute multiple brands
  • improve the user’s experience (CORRECT)
  • express their brand consistently (CORRECT)

Correct: Design systems help improve the user’s experience. They reflect established guidelines and standards designed to create a cohesive visual experience through elements like typography, color palettes, and iconography.

Correct: Design systems help designers stay consistent with a company’s brand.

8. A design team is hiring an additional designer to help manage the increased workload. What is the best resource they can share to help them understand the brand’s visual design elements?

  • The company website’s About page
  • The company’s design system (CORRECT)
  • The lead designer’s portfolio
  • The company’s writing style guide

Correct: The design system is a great resource to help onboard new team members.

9. Beyond offering visual elements to copy and paste, what else might an open-source design system provide? Select all that apply.

  • A guide for typical user flows
  • A library of every color palette that passes WCAG accessibility standards
  • Guides on how to use the design elements effectively (CORRECT)
  • Links to outside resources like downloadable fonts and icons (CORRECT)

Correct: Design systems like Material Design are often public so designers can interact with and learn from them.

Correct: Design systems like Material Design are particularly useful for new designers to reference and pull from.

10. Fill in the blank: Sticker sheets are useful in a design system because _____.

  • designers can work faster and avoid rework (CORRECT)
  • designers can develop elements and components from scratch
  • designers can create each instance of a component
  • designers can apply their individual style when working with other designers

Correct: Sticker sheets save time, increases consistency, and enables collaboration. They help designers work more efficiently.

11. How does adding components to a sticker sheet help a designer save time and energy? Select all that apply.

  • A sticker sheet provides full prototype flows including exact interactions and animations for each action.
  • A sticker sheet includes the different states of a component for a designer to use. (CORRECT)
  • A sticker sheet allows a designer to make changes on all the instances tied to the main component at once. (CORRECT)
  • A sticker sheet allows a designer to easily copy and paste the component into new designs. (CORRECT)

Correct: Designers can often find different states of a component on the sticker sheet including active and inactive states.

Correct: The ability to make even minor design changes across the artboards simply by changing the main component on the sticker sheet is a huge time-saver.

Correct: A sticker sheet makes it easy to pull any predetermined visual element into new designs.

12. A designer wants to develop design components for a new project but needs to start quickly. How can an existing design system assist the designer? Select all that apply.

  • The designer can ask developers to code components from common design systems used in similar projects.
  • The designer can start their own design system from scratch.
  • The designer can use some of the components from an existing design system and adjust elements to match the product’s branding.  (CORRECT)
  • The designer can mix their own components with components gathered from a design system. (CORRECT)

Correct: The designer can incorporate established components into a design and customize the elements to match its brand. This is one way to use a design system effectively.

Correct; The designer can mix personal components with an established design system to incorporate in the design. This is an effective way to build a product faster.

13. Fill in the blank: To make a feature more visible to the user, you should _____ the elevation.

  • align bottom
  • decrease
  • align top
  • increase (CORRECT)

Correct: To make a feature more visible to the user, you should increase the elevation. For example, a screen background is usually at zero elevation, but features like buttons, alerts, and navigation will have a higher elevation.

14. Identify reasons a designer might want to use a sticker sheet during the design process. Select all that apply.

  • Generate scaled versions of the components that were created
  • Create a convenient, easy to print sheet to show to other designers
  • Help designers avoid making errors or creating inconsistencies in their designs (CORRECT)
  • Organize components and elements in a central area for convenience, reusability, and efficiency (CORRECT)

Correct: By allocating commonly or frequently used components of a design into a single sheet, designers can avoid making errors or creating inconsistencies in their designs

Correct: Allocating frequently used components into a sticker sheet can save designers time in Figma. A sticker sheet provides a central area to reuse in different parts of the design

15. A design system can be useful to many people in the company. Which of the following groups are likely to use a design system? Select all that apply.

  • Content writers
  • Users
  • Developers (CORRECT)
  • Designers (CORRECT)

Correct: Developers work closely with designers and a design system is a key tool for collaboration.

Correct: Design systems are primarily used by the design team, though teams that work closely with designers may also use design systems.

16. Fill in the blank: If a startup’s team is growing rapidly, a design system promotes _____ and helps the design team maintain performance levels.

  • Scalability (CORRECT)
  • user conversion
  • company values
  • profitability

Correct: A design system improves scalability because it helps create a more efficient process of iterating on designs.

17. Fill in the blank: Resources in a design system contain helpful tools like _____ to help designers build designs quickly and learn how to use elements effectively. Select all that apply.

  • prototype templates
  • type scale generator (CORRECT)
  • downloadable icons and fonts (CORRECT)
  • baseline design kits (CORRECT)

Correct: Type scale generators are helpful tools to help designers build and customize designs effectively.

Correct: Downloadable icons and fonts are helpful tools to help designers build and customize designs effectively.

Correct: Baseline design kits are helpful tools to help designers build and customize designs quickly.

18. To add layer and depth to your interface, which feature of Material Design should you use?

  • Elevation (CORRECT)
  • Style guide
  • Navigation
  • Cover

Correct: Elevation is Material Design’s system for adding layering and depth to your interface. Important features, such as navigation alerts, have higher elevation so that they’re visible to users.

19. What are some items to include in a sticker sheet? Select all that apply.

  • Single-use element
  • Color (CORRECT)
  • Buttons (CORRECT)
  • Typography (CORRECT)

Correct: Sticker sheets include elements often used in a design, like color, buttons, and typography.

Correct: Sticker sheets are a collection of components that make up a design system. Buttons, colors, and typography are examples of components included in a sticker sheet.

Correct: A design’s typography, colors, and buttons are included in a sticker sheet so that it’s easier to track.

20. What are some ways a designer can incorporate an existing design system into their designs in Figma? Select all that apply.

  • Figma does not allow designers to import existing design systems.
  • A designer can pull elements from an existing design system for their designs, but there is no way to adjust the color of these elements.
  • A designer can mix and match their own elements with elements from the design system. (CORRECT)
  • A designer can use components from an existing design system and customize them to match the brand. (CORRECT)

Correct: Designers can create their own design system combining both elements they design as well as elements from an existing design system. They can also customize components from existing design systems to match the brand.

Correct: Using an existing design system can save a designer time while also providing the flexibility to maintain consistency with the brand. They can also mix and match their own elements with elements from the design system.

21. Identify the main features designers are encouraged to explore in Material Design.

  • Foundation, Navigation, Color, Shape, and Communication
  • Foundations, Content, Design, Components, and Experiences
  • Design, Components, Develop, Resources, and Blog (CORRECT)

Correct: Material Design features the following sections: design, components, develop, resources, and blog.

22. Which of the following statements are true about a company’s design system?

  • It is a user-facing guide that provides the brand’s mission and values.
  • It is where all the high-fidelity prototypes are saved.
  • It should not be shared with anyone but the UX designers.
  • It can be used by multiple teams including designers and developers.  (CORRECT)

Correct: A design system provides helpful guides for both designers and developers.

23. At what point of the design process is a sticker sheet useful?

  • Once final designs are completed and delivered
  • When designers are working on mockups (CORRECT)
  • During the user research phase
  • Before any design decisions like color palette or typography are made

Correct: Creating mockups is the point in the design process where the sticker sheet is going to be most useful.

24. Which feature in Material Design adds layering and depth to your interface?

  • Assets
  • Sticker sheet
  • Elevation (CORRECT)
  • Material theme

Correct: Elevation is Material Design’s system for adding layering and depth to your interface. Important features, such as navigation and alerts, have higher elevation so they’re visible to users.

25.  Imagine a designer just started a new project and needs to learn the rules about how certain elements or styles should be applied. Which design system component should the designer consider to learn these rules?

  • Guidelines (CORRECT)

26. A brand establishes a design system to quickly iterate across teams. Which section of a design system outlines the guidelines for modules and templates?

  • Visual style
  • Support code
  • Guidelines
  • UI patterns (CORRECT)

Correct: UI patterns outline rules and detailed notes about which elements, modules, templates, and components are the most important, and how often to use each one.

27. Consider the following scenario:

Gabriel is a designer working on a client’s design project. They notice that iterations are consistently bounced back-and-forth between the design and development teams. Gabriel discovers that the overall look, color scheme, and branding that the team wants for the product is not yet established. Gabriel suggests creating a design system to align the two teams.

What is the result of implementing a design system?

  • Scaled the product
  • Established consistency (CORRECT)
  • Implemented an outline for managing the project
  • Reinforced the engineering team’s ideas for the project

Correct: By creating a design system, Gabriel successfully aligns the design team and the development team. The design system helps to establish themes that should remain consistent across the board.

28. Sticker sheets are a collection of elements and components that make up part of the design system.

  • True (CORRECT)
  • False

Correct: Sticker sheets are a collection of elements and components that make up part of the design system. However, they do not include experiences. Sticker sheets are comprised of elements and components for a design project.

29. Imagine a designer just started a new project and needs to learn the rules about how certain elements or styles should be applied. Which design system component should the designer consider to learn these rules?

  • Visual styles
  • Guidelines (CORRECT)
  • Developer codes
  • UI patterns

Correct: Design principles, editorial guidelines, and implementation guidelines define the rules for how to apply design for components.

30. A designer needs to change all the buttons in a design to have rounded corners. What is the fastest way for them to make this update?

  • Pass the task on to the developer, since the change needs to be made on so many buttons.
  • Select all the artboards at once and adjust the corners with everything selected.
  • Go through the designs and update each button individually.
  • Update all the button instances by updating the main button on the sticker sheet. (CORRECT)

Correct: Making sure components are all tied to the main component on the sticker sheet allows designers to easily implement visual design changes.

31. A technology startup called Tempeste is creating the design system for their latest project. They’re defining the styles for the color palettes, typography, grid definitions, and iconography. Which section of the design system are they working on?

  • Guidelines
  • Visual style (CORRECT)
  • UI patterns
  • Support code

Correct: Visual style for core visual design elements include typography, color palettes, and iconography.

32. What are some key benefits of using a design system?  Select all that apply.

  • Identifies gaps in competitor designs
  • Helps designers and developers work together more effectively (CORRECT)
  • Allows teams to scale and update designs (CORRECT)
  • Creates consistency for designers and users (CORRECT)

Correct: Developers and designers often work independently, since they serve different roles in the project. Design systems help to align the team from the start by providing guidelines and standards.

Correct: Design systems bundle important information into a neat package so teams across the project can reference them. When a team needs to iterate quickly, design systems can be promptly updated, moved, and built upon as needed.

Correct: Design systems create consistency for designers and users. When designers are limited to a certain set of elements, they’re less likely to deviate from the goal of the product or the company’s brand

33. Which area of Polaris features content on accessibility, internationalization, information architecture, and mobile?

  • Content
  • Experiences
  • Foundations (CORRECT)
  • Resources

Correct: The foundations section of Polaris emphasizes accessibility, internationalization, information architecture, and mobile as key considerations during the design process.

34. What components can be used in a sticker sheet? Select all that apply.

  • Buttons (CORRECT)
  • Sound clips
  • Icons (CORRECT)
  • Colors (CORRECT)

Correct: Buttons can be used in a sticker sheet to maintain consistency in a design.

Correct: Icons can be used in a sticker sheet to maintain consistency in a design.

Correct: Colors can be used in a sticker sheet to maintain consistency in a design.

35. In established design systems like Material Design, can a designer customize preset styles?

  • Yes (CORRECT)
  • No

Correct: Designers can customize preset styles for elements like typography, color, elevation, and states.