Week 3: Exploring Design Systems
Discover the exciting world of design systems! In this segment of the course, you’ll explore the essential components of a design system and understand the advantages of implementing one. You’ll dive into design systems used by various companies, gain inspiration, and apply them to your own mockups. Additionally, you’ll learn how to create and utilize sticker sheets in Figma to enhance your projects.
Learning Objectives:
- Explain the core elements of a design system.
- Identify the features and benefits of using design systems.
- Develop a sticker sheet for a project in Figma.
- Demonstrate how to effectively use design systems in Figma.
- Explore methods for finding inspiration from existing design systems.
- Understand how to apply sticker sheets in design workflows.
- Recognize common characteristics of 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)
Iconography is an example of a visual element in a design system, as it represents the collection of icons used in the design. Typography and elevation are also examples of visual elements in a design system.
Color is an example of a visual element in a design system, as it defines the palette used throughout the design. Typography and iconography are also examples of visual elements in a design system.
Typography is an example of a visual element in a design system, as it encompasses 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 simplifies the design process for designers by ensuring consistency across the project and makes it easier for users to recognize and interact with familiar patterns.
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?
- (CORRECT)
Correct: The best way to present the title in this example is to use the prominent top app bar and text wrapping shown.
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)
Designers can access the Resources, Components, and Design pages on public design systems for additional information and baseline design kits. The Resources page provides valuable information for new designers and offers access to downloadable icons and components.
Designers can access the Resources, Components, and Design pages on public design systems for additional information and baseline design kits. The Design page provides foundational guidance on how to use color, navigation, and other design elements effectively.
Designers can access the Resources, Components, and Design pages on public design systems for additional information and baseline design kits. The Components page offers downloadable building blocks for designers to use when creating their designs and includes guidance on how to implement them effectively.
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)
Navigation features would benefit from a higher elevation because they assist users in reaching their desired destinations. Design features like alerts and buttons would also benefit from a higher elevation.
Buttons would benefit from a higher elevation because they make it easier for users to complete tasks. Design features like alerts and navigation would also benefit from a higher elevation.
Alerts would benefit from a higher elevation because they allow users to quickly identify important information. 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 influences how users perceive and interact with your product. By highlighting these decisions in a design system and incorporating that design system into a case study, you can effectively showcase your talents and skills to potential 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 delivered a product design that impressed their clients, leading to the immediate expansion of the product line. With a design system in place, they are able to scale the product more efficiently 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 offers interactive building blocks for creating a user interface. These include elements such as 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)
Design systems help improve the user’s experience by reflecting established guidelines and standards, creating a cohesive visual identity through elements like typography, color palettes, and iconography.
Design systems help designers maintain consistency 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 an excellent resource for onboarding new team members, providing them with a clear understanding of the design standards and processes used within the organization.
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)
Design systems like Material Design are often made public, allowing designers to interact with and learn from them.
Design systems like Material Design are particularly useful for new designers to reference and draw inspiration 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)
Designers can often find different states of a component on the sticker sheet, including active and inactive states.
The ability to make even minor design changes across artboards by simply updating the main component on the sticker sheet is a huge time-saver.
A sticker sheet makes it easy to incorporate 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)
The designer can incorporate established components into a design and customize the elements to match the brand. This is one effective way to use a design system.
The designer can combine personal components with an established design system to incorporate them into the design. This is an effective way to speed up product development.
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 its elevation. For example, a screen background typically has zero elevation, but elements like buttons, alerts, and navigation are positioned with a higher elevation to make them more prominent.
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)
By grouping commonly or frequently used components of a design into a single sheet, designers can avoid errors and inconsistencies in their designs.
Allocating frequently used components into a sticker sheet can save designers time in Figma. A sticker sheet provides a central location for reusing elements 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)
Developers work closely with designers, and a design system is a key tool for collaboration.
Design systems are primarily used by the design team, although teams that work closely with designers may also utilize them.
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)
Type scale generators are helpful tools that assist designers in building and customizing designs effectively.
Downloadable icons and fonts are valuable tools that help designers build and customize designs efficiently.
Baseline design kits are useful tools that 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 layers and depth to your interface. Key features, such as navigation and alerts, are given higher elevation to ensure they are more visible and accessible 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)
Sticker sheets include elements commonly used in a design, such as colors, buttons, and typography.
Sticker sheets are collections of components that make up a design system. Buttons, colors, and typography are examples of components included in a sticker sheet.
A design’s typography, colors, and buttons are included in a sticker sheet to make them easier to manage and 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)
Designers can create their own design system by combining both elements they design and elements from an existing design system. They can also customize components from existing design systems to align with the brand.
Using an existing design system can save designers time while providing the flexibility to maintain brand consistency. They can also mix and match their own elements with components 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 stage in the design process where the sticker sheet proves to be most useful, as it allows designers to quickly incorporate predefined elements and maintain consistency throughout the design.
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 layers and depth to your interface. Key features, such as navigation and alerts, are assigned higher elevation to ensure they stand out and are easily 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 guidelines and detailed notes about which elements, modules, templates, and components are most important, as well as how often each should be used to ensure consistency and usability across the interface.
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
Sticker sheets are a collection of elements and components that form part of the design system. However, they do not include experiences. Sticker sheets are made up of elements and components used 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 to components, ensuring consistency and alignment with the overall design vision and user experience goals.
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)
Developers and designers often work independently, as they serve different roles in the project. Design systems help align the team from the start by providing clear guidelines and standards.
Design systems bundle essential information into a cohesive package for teams across the project to reference. When a team needs to iterate quickly, design systems can be updated, moved, and built upon as needed.
Design systems create consistency for both designers and users. By limiting designers to a specific set of elements, design systems reduce the likelihood of deviating from the product’s goals 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)
Buttons can be included in a sticker sheet to maintain consistency in a design.
Icons can be included in a sticker sheet to maintain consistency in a design.
Colors can be included 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.
36. Fill in the blank: A _____ is a collection of elements and components that make up part of the design system.
- sticker sheet (CORRECT)
- wireframe
- material design
- theme sheet
37. Imagine a designer just joined a new company and needs to learn how the company expresses their brand through typography, color palettes, and iconography. Which design system component should the designer consider to learn these rules?
- Guidelines
- Developer codes
- Visual styles (CORRECT)
- UI patterns
38. Fill in the blank: If a design team is working on a new logo and visual style, a design system reinforces _____ and helps the design team present a unified presence to the world.
- brand identity (CORRECT)
- interest
- user likability
- company values
39. Which of the following are benefits of the Material Design Color Tool? Select all that apply.
- Ability to purchase pre-built color palettes
- Text accessibility information related to contrast and size (CORRECT)
- Preview lighter or darker tones of a primary color (CORRECT)
- Text color is automatically adjusted for optimal contrast (CORRECT)
40. Fill in the blank: A component is made up of _____ like text color and shape.
- elements (CORRECT)
- UI
- stickers
- pieces
41. Which of the following is a series of reusable elements and guidelines that allow teams to design and develop a product following predetermined standards?
- A design system (CORRECT)
- Wireframes and prototypes
- Visual style
- Support code
42. Fill in the blank: If a design team is working on multiple projects all at the same time, a design system creates _____ and helps the design team align.
- consistency (CORRECT)
- user interest
- scalability
- user conversions
43. Which of the following describes an open-source design system?
- It is a guide for users to understand the reasoning behind design choices.
- It is a guide on how to create the best prototypes
- It is a collection of research insights to help inform designs.
- It is a public design system that can be used by any team of designers to create different mobile apps and websites. (CORRECT)
44. Which feature in Material Design communicates a change in a component?
- Elevations
- Themes
- States (CORRECT)
- Statuses
45. What is a sticker sheet?
- Components provided by large companies like Google and Shopify
- Anything that is downloaded and added to an existing mockup
- Inspirational designs that a designer can reference while making new designs
- A collection of elements and components that make up part of the design system (CORRECT)
46. In the Material Design system, does the Material Theming tool allow the user to customize the theme to align with a company’s brand identity?
- Yes, that’s its main purpose (CORRECT)
- No, it will always align to Google’s brand identity
- It depends on the amount of changes needed
47. To let a user know that a component has been changed, which feature of Material Design should you use?
- State (CORRECT)
- Status
- Elevation
- Navigation
48. Which of the following is a collection of elements and components that make up part of the design system?
- Sticker collection
- Mockup
- Sticker sheet (CORRECT)
- UI sheet
49. Grouped items in a design tool are basically a what?
- Component (CORRECT)
- Sticker
- Element
- Mockup
50. Which of the following are benefits a design system can provide? Select all that apply.
- Aligning multiple brands
- Develop more products, faster
- Improving user experience (CORRECT)
- Expressing a brand consistently (CORRECT)
51. Which of the following are commonly included in a design system? Select all that apply.
- Prototypes
- Competitors
- Color (CORRECT)
- Layouts (CORRECT)