What is a Design System? Design Systems 101 for Designers

Summary

This video introduces the concept of design systems, breaking down various definitions from the web and exploring real-life examples, such as Google's Material Design and Shopify's Polaris. The presenter explains that a design system is a collection of guidelines, principles, and assets that help a business maintain consistency across design and communication. These systems can include typography, colors, UI components, content style, and even animation. The video emphasizes the importance of creating and evolving a design system based on a company's objectives and needs.

Takeaways

• 📚 Design systems are collections of guidelines, principles, and assets that help teams build, learn, and grow together.
• 🌐 Definitions of design systems vary, but they generally include reusable components and coding conventions.
• 🖥️ Examples of popular design systems include Google’s Material Design, Shopify's Polaris, IBM’s Design Language, and Trello’s Nachos.
• 🎨 A design system includes key elements like typography, colors, grids, icons, and components to ensure consistency across products.
• 📖 Design systems also often include non-aesthetic elements like content guidelines, voice, tone, and language use.
• 🛠️ Companies like Google, Shopify, and IBM break their design systems into sections like design, development, and tools to provide comprehensive guidance.
• 🔄 A design system is not static; it's a living document that evolves with a business’s needs.
• 🎥 Upcoming videos will cover building a design system from scratch, providing step-by-step guidance.
• 💬 The purpose of a design system is to create a unified and coherent brand experience across all platforms and communications.
• 📝 Most design systems include examples of what to do and what not to do, reinforcing best practices for teams.

Q & A

What is the main focus of the video?

The main focus of the video is to explain what design systems are, using various definitions and examples from the internet to provide a solid understanding of the concept.

What does the speaker suggest is the best way to understand design systems?

The speaker suggests that understanding design systems is best achieved not just by looking at definitions, but also by examining real-life examples of design systems.

What is the definition of a design system according to UXPin?

According to UXPin, a design system is the complete set of design standards, documentation, and principles, along with the toolkit which includes UI patterns and code components to achieve those standards.

How does Free Code Camp define a design system?

Free Code Camp defines a design system as a collection of reusable components that tie whole products together.

What are the three attributes of design systems mentioned in the video?

The three attributes of design systems mentioned in the video are rules, constraints, and principles.

What is Google's design system called?

Google's design system is called Material Design.

What are some common sections found in design systems?

Common sections found in design systems include style and design guidelines, pattern libraries or component libraries, motion guidelines for UI animations, and content style guidelines.

What is Shopify's design system called and what does it include?

Shopify's design system is called Polaris. It includes sections on content guidelines, design guidelines, components, and other elements tailored to Shopify's e-commerce platform.

What is the purpose of a design system according to the video?

The purpose of a design system is to help a business's team to learn, build, and grow by providing guidelines, principles, and assets relevant to the business.

Why is it important to understand design systems before building one?

It is important to understand design systems before building one because it ensures that the system is based on the objectives of the business and is a living, breathing document that will evolve with the company's needs.

What is the next step the speaker mentions after understanding design systems?

The next step mentioned by the speaker after understanding design systems is to watch the upcoming video where they will show how to build a design system from scratch.