Learn How and Why We Developed SLDS
Learning Objectives
After completing this unit, you’ll be able to:
- Describe the conditions that influenced the development of the Salesforce Lightning Design System.
- Explain the goals of the SLDS design system team.
Once Upon a Time
It may be hard to fathom, but Salesforce didn’t always have a comprehensive design system. We invite you to journey with us far, far back in time, and experience the origin story of what is now the Salesforce Lightning Design System (SLDS).
SLDS took a roundabout path as it grew into the design system it is today. It evolved in response to the growth of Salesforce, changes in technology, and increasing user needs. SLDS had to scale to keep up with rapid growth and change. Knowing how SLDS got from there to here can help you understand SLDS today, and where it might go next.
Our story opens in 2013, two years before the launch of Lightning Experience. Salesforce is growing fast, has just acquired ExactTarget, and is poised to launch its first full mobile version of the Salesforce platform, Salesforce1. Amid rapid growth, the company’s designers and developers recognize a need to ensure coherent experiences across the full range of Salesforce apps—and to lay the foundation for a design system that evolves with the company and the platform.
And so, with the Salesforce1 launch, this team of plucky visionaries begins documenting a pattern library and building an initial style guide for design teams. The Salesforce1 engineering team chooses the term design tokens to describe style guide values that work across native operating systems and web applications.
Landmark Design System
You know how old movies sometimes use images of rapidly flipping calendar pages to convey the passage of time? Sit back and watch the pages flip by, and—wow, it’s early 2015! Salesforce designers and developers have combined the pattern library and tokens with an expanded Cascading Style Sheets (CSS) framework to create the Landmark Design System.
To ensure that the Landmark Design System works with any platform, the team builds it around HTML blueprints rather than fully functional components, which are more common in design systems. The system also includes an expanded CSS framework and broad UI interaction patterns that follow design best practices. The result is a design system whose elements work together to produce a consistently high-quality user experience.
Lightning Strikes
Pretty impressive—but the Landmark Design System team doesn’t rest on its laurels. While launching the new design system, the team redesigns the Salesforce Classic (Aloha) user interface with a comprehensive visual language called the Lightning Experience, transforming the look and feel of every core Salesforce product. More and more product teams choose Lightning Experience for their offerings. The Landmark Design System team’s goals for the Lightning Experience are to:
- Help sales users sell faster.
- Increase service users’ productivity.
- Provide all users with a modern user interface.
No biggie, right?
A New Name
In 2015, the design guidelines are combined with the CSS framework, with the goal of making the design system more usable by both designers and developers. Along with the rollout, Lightning Experience expands from mobile to the desktop. The first Salesforce design system team also updates the Landmark CSS framework and promotes adoption across Salesforce.
Adoption of Landmark grows, and Salesforce CEO and founder Marc Benioff embraces its potential, renaming it Salesforce Lightning Design System (SLDS). In early 2016, the SLDS CSS framework is added to the core Salesforce code.
Early adopters of SLDS include Sales Cloud (which began using tokens and style guide documentation in winter 2015), Salesforce Mobile, and Service Cloud (summer 2016). With adoption increasing, SLDS engineers partner with UX designers to standardize core patterns and documentation. In response to customer requests, Salesforce launches the world’s first open-source enterprise design system at lightningdesignsystem.com, allowing anyone to use SLDS.
SLDS Today and Tomorrow
By 2018, the Salesforce platform has fully embraced SLDS, which is releasing regular updates affecting the whole Salesforce platform. As it’s grown, the design system has faced challenges in its mission to deliver top-tier support and governance across Salesforce's expanding suite of products. Maintaining a coherent user experience for customers, despite 5x growth over three years, has meant carefully considering multiple acquisitions, new products, technology changes, and shifting priorities with each major release. The SLDS team aims not just to update patterns with each release, but consolidate and incorporate new design elements across its product portfolios into SLDS so that customers continuously enjoy a cohesive experience.
But overall, SLDS has received a positive reception, with increasing numbers of customers and partners adopting the system—and replicating elements of its concepts and governance model in their own organizations. The design system team constantly solicits feedback and updates the system to meet the needs of both consumers and contributors. And as new challenges like exponential corporate growth emerge, SLDS will thoughtfully evolve to meet them while upholding its cohesive experience vision.
Resources