Exploring design systems.

Week 3: Exploring design systems. 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.

⁠

Explore popular design systems

You’ve learned that 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

⁠

Loading…⁠

⁠

This five-part video series will help you understand how to set up a design system in Figma:

⁠

Video 1 - Foundations⁠

(55 minutes) which will help you kick off designing a design system from scratch, including typography and colors.

⁠

Video 2 - Components⁠

(55 minutes) where you’ll add to your design system by building foundational components and organize them using pages, frames, names, and descriptions.

⁠

Video 3 - Components continued⁠

(55 minutes) which will introduce more complex components like cards, media objects, dialogues, navigations, and forms, to include in your design system.

⁠

Video 4 - Testing⁠

(57 minutes) where you’ll check if your component library is robust enough in real-world scenarios.

⁠

Video 5 - Documentation⁠

(61 minutes) which shares best practices for documenting your design system using Figma and other tools.

⁠

https://docs.google.com/document/d/15DnpF4VU1EM9lVADGcX7F70I9JAsttIMExlw6GbW4Ig/template/preview⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.