PRACTICE QUIZ
Which of the following visual elements are included in a design system? Select all that apply.
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. Explanation: 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. Explanation: 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.
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.
Design systems include UI patterns, which consist of elements, components, modules, and templates.
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.
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
Which of the following examples represent the best use of the app bar title on a desktop?
The best way to present the title in this example is to use the prominent top app bar and text wrapping shown.
What pages in a public design system can new designers access for additional information and download baseline design kits for Figma and Adobe XD?
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. Explanation: 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. Explanation: 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.
How does a robust design system support a designer's day-to-day work?
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
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.
The Sticker Sheet page has a list of components you can use to build or modify your design.
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.
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. Explanation: 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. Explanation: 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.
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.
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
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.
A design system provides a central location for design guidelines and information. Using one helps a team to stay consistent.
Consider the following scenario:
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.
Which Material Design feature explores the interactive building blocks for creating user interfaces, and features items such as date pickers, data tables, and menus?
Material Design’s components section features interactive building blocks for creating a user interface. These include backdrops, date pickers, cards, progress indicators, and more.
What are the main features that designers are encouraged to explore in Shopify’s Polaris design system?
Polaris features the following sections: foundations, content, design, components, and experiences.
What types of components and elements can a designer include in their sticker sheet? Select all that apply.
Sticker sheets often include the colors or color palettes associated with the project. Explanation: Sticker sheets often include icons. Explanation: Sticker sheets often include navigation bars.
A designer shared the company’s design system with the development team. What can the developers use the design system for?
Design systems often support code for developers to help them build out designs correctly.
Fill in the blank: Defining the styles in a design system for core visual design elements help companies _____. Select all that apply.
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. Explanation: Design systems help designers stay consistent with a company’s brand.
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 design system is a great resource to help onboard new team members.
Beyond offering visual elements to copy and paste, what else might an open-source design system provide? Select all that apply.
Design systems like Material Design are often public so designers can interact with and learn from them. Explanation: Design systems like Material Design are particularly useful for new designers to reference and pull from.
Fill in the blank: Sticker sheets are useful in a design system because _____.
Sticker sheets save time, increases consistency, and enables collaboration. They help designers work more efficiently.
How does adding components to a sticker sheet help a designer save time and energy? Select all that apply.
Designers can often find different states of a component on the sticker sheet including active and inactive states. Explanation: 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. Explanation: A sticker sheet makes it easy to pull any predetermined visual element into new designs.
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 incorporate established components into a design and customize the elements to match its brand. This is one way to use a design system effectively. Explanation; 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.
Fill in the blank: To make a feature more visible to the user, you should _____ the elevation.
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.
Identify reasons a designer might want to use a sticker sheet during the design process. Select all that apply.
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 Explanation: 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
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.
Developers work closely with designers and a design system is a key tool for collaboration. Explanation: Design systems are primarily used by the design team, though teams that work closely with designers may also use design systems.
Fill in the blank: If a startup’s team is growing rapidly, a design system promotes _____ and helps the design team maintain performance levels.
A design system improves scalability because it helps create a more efficient process of iterating on designs.
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.
Type scale generators are helpful tools to help designers build and customize designs effectively. Explanation: Downloadable icons and fonts are helpful tools to help designers build and customize designs effectively. Explanation: Baseline design kits are helpful tools to help designers build and customize designs quickly.
To add layer and depth to your interface, which feature of Material Design should you use?
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.
What are some items to include in a sticker sheet? Select all that apply.
Sticker sheets include elements often used in a design, like color, buttons, and typography. Explanation: 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. Explanation: A design’s typography, colors, and buttons are included in a sticker sheet so that it’s easier to track.
What are some ways a designer can incorporate an existing design system into their designs in Figma? Select all that apply.
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. Explanation: 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.
Identify the main features designers are encouraged to explore in Material Design.
Material Design features the following sections: design, components, develop, resources, and blog.
Which of the following statements are true about a company's design system?
A design system provides helpful guides for both designers and developers.
At what point of the design process is a sticker sheet useful?
Creating mockups is the point in the design process where the sticker sheet is going to be most useful.
Which feature in Material Design adds layering and depth to your interface?
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.
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?
A brand establishes a design system to quickly iterate across teams. Which section of a design system outlines the guidelines for modules and templates?
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.
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? c' Implemented an outline for managing the project d' Reinforced the engineering team’s ideas for the project
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.
Sticker sheets are a collection of elements and components that make up part of the design system.
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.
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?
Making sure components are all tied to the main component on the sticker sheet allows designers to easily implement visual design changes.
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?
Visual style for core visual design elements include typography, color palettes, and iconography.
What are some key benefits of using a design system? Select all that apply.
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. Explanation: 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. Explanation: 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
Which area of Polaris features content on accessibility, internationalization, information architecture, and mobile?
The foundations section of Polaris emphasizes accessibility, internationalization, information architecture, and mobile as key considerations during the design process.
What components can be used in a sticker sheet? Select all that apply.
Buttons can be used in a sticker sheet to maintain consistency in a design. Explanation: Icons can be used in a sticker sheet to maintain consistency in a design. Explanation: Colors can be used in a sticker sheet to maintain consistency in a design.
In established design systems like Material Design, can a designer customize preset styles?
Designers can customize preset styles for elements like typography, color, elevation, and states.
Fill in the blank: A _____ is a collection of elements and components that make up part of the design system.
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?
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.
Which of the following are benefits of the Material Design Color Tool? Select all that apply.
Fill in the blank: A component is made up of _____ like text color and shape.
Which of the following is a series of reusable elements and guidelines that allow teams to design and develop a product following predetermined standards?
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.
Which of the following describes an open-source design system?
Which feature in Material Design communicates a change in a component?
What is a sticker sheet?
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?
To let a user know that a component has been changed, which feature of Material Design should you use?
Which of the following is a collection of elements and components that make up part of the design system?
Grouped items in a design tool are basically a what?
Which of the following are benefits a design system can provide? Select all that apply.
Which of the following are commonly included in a design system? Select all that apply.
What is a design system?
A brand establishes a design system to quickly iterate across teams. Which section of a design system outlines the specifications for modules and templates?
Consider the following scenario: Gabriel is a designer working on a client’s design project. Gabriel is new to the team and is working with a developer who is also new to the company. When discussing the project, both Gabriel and the developer are able to reference the company’s design system. What is the result of implementing a design system?
Ready to test your recall?
Which of the following visual elements are included in a design system? Select all that apply.
How confident are you in this answer?