Learn About Design Systems
Learning Objectives
After completing this unit, you’ll be able to:
- Identify the characteristics and capabilities of a good design system.
- Describe how designers and developers use, contribute to, and manage design systems.
- Explain how the Salesforce Lightning Design System (SLDS) helps developers build solutions on the Salesforce platform.
- Describe how and why SLDS differs from most design systems.
What Is a Design System?
Before we dive in and explore its magical powers, let’s define design system.
Design System Definition |
Explanation |
|---|---|
|
A design system is a collection of repeatable design patterns and reusable code, referred to as components. Components include buttons, menus, sounds, animations, visual patterns, and more. In some design systems, they may be fully functional and built on a UI platform. In others, including SLDS, they remain platform independent. |
Think of a design system as a set of building blocks (maybe even those iconic interlocking plastic ones beloved by both kids and adults). |
A design system is guided by clear and accessible standards, principles, and documentation. |
Like those beloved blocks, the components in a design system are highly standardized, with a recognizable look and feel. |
Developers combine the design system’s components in multiple ways to build applications in JavaScript. Design guidelines serve as instructions for assembling components into patterns for specific use cases. |
The components don’t do much on their own, but put those blocks together and you can build almost anything. |
A good design system is:
-
Scalable. As a design system matures, less time and money are spent creating foundational elements (building blocks). Developers reuse those elements across products and features.
-
Efficient. Design systems save time and energy by freeing designers and developers to focus on usability and meaning.
-
Visually cohesive. A design system’s patterns are anchored in purpose. Its aesthetic elements arise from user needs. Standardized components reinforce both visual style and branding, resulting in products and features that have a consistent look and provide a consistent user experience.
-
Shared. Reusable, documented, and accessible elements support collaboration, making it easier to hand off portions of a project or build on others’ work.
Start Building Now
Like building blocks, a design system helps you start building immediately. Using predesigned components lets you focus on solving complex problems and delivering the best user experience.
Another huge benefit of a design system is that it allows you to manage design at scale. The library of components, rules, and guidelines help to maintain consistency across designers, developers, teams, and products. A design system evolves as needs change, enabling designers and developers to quickly and easily update interfaces and tools across a complex platform.
Know the Players
Any design system is only as good as its stakeholders.
-
Consumers are the designers, developers, and stakeholders who use elements of the design system to build applications. Consumers come from both inside and outside the company that created the design system if the company, like Salesforce, has an ecosystem of customers who build applications on the company's platform..
-
Contributors create the elements and patterns that make up the design system. For each release, anyone can propose new patterns, components, or guidelines, or suggest changes to existing ones.
-
Curators are custodians of the design system. This team of engineers, product designers, and visual designers maintains the design system, oversees its code, and teaches the community how to use it. Curators review proposed updates and incorporate updates to evolve the design system.
If you’re reading this, you’re probably an SLDS consumer or contributor.
The Lightning Design System at Salesforce
At Salesforce, we’re all about design systems. One reason the Salesforce platform is so powerful is that it adapts to the complex needs of a wide variety of users.
We’re also growing incredibly quickly, expanding both our product scope and our employee numbers. As we grow, we address more user needs. It’s crucial that we design a cohesive product experience efficiently and at scale.
SLDS helps Salesforce teams do that. Use case-specific patterns help designers iterate faster and create cohesive solutions more efficiently. Component developers always have the latest framework, with clean, accessible markup and pixel-perfect CSS, to help them work faster with fewer errors. Customers and partners build customizations on the Salesforce platform using a frequently updated, clean, consistent system that includes clear explanations and design examples—eliminating the temptation to reverse-engineer any software.
Most design systems provide fully functional code. But because SLDS supports so many different code bases, such as Lightning Web Components and React, it must remain independent. (To learn more about how SLDS differs from other design systems, see the resources at the end of this unit.)
Next, we take a trip into the past, way, way back to the birth of SLDS.