Welcome to the Salesforce Lightning Design System (SLDS)

SLDS stands for Salesforce Lightning Design System. In short, this is a set of standard design patterns to style your custom components in a uniform way that’s consistent with the rest of Salesforce.

Salesforce describes this as the “world’s first living, open-source, enterprise, accessible, platform-agnostic design system”. In this article, we’ll dig into the layers of SLDS, where it can be used, and why you should use it.

4 Pillars of the SLDS

Within the Salesforce Lightning Design System, there are principles embedded to ensure end users get the best experience:

1. Clarity: Can the user find what they are looking for?
2. Efficiency: Reusable components can make your development more efficient.
3. Consistency: Is the experience the same across the system?
4. Beauty: It has to look attractive, otherwise people are just not going to use it.

5 Layers of the SLDS

1. It provides a Design Pattern which is a set of principles to deliver a consistent experience.

2. Included is a CSS framework that provides a structure to define how elements look and feel (e.g. the styling).

3. Component Blueprints give you code blocks to build certain components such as the Activity Timeline.

4. HTML is part of SLDS so that you can easily create certain elements.

5. Interaction Guidelines ensure that those with accessibility needs are not forgotten, and you can test navigating the system with just a keyboard, versus a keyboard and a mouse.

Where Can You Use the SLDS?

Although this is a Salesforce framework (or set of principles), this can be used inside and outside the Salesforce platform.

You can use SLDS in Lightning Components to ensure a standard look and feel when compared to the standard UI. The SLDS can be used in both Aura and Lightning Web Components, however, be sure of the differences noted here.

Within Visualforce you introduce the <apex:slds /> tag to get started and make your Visualforce pages pop with the latest Salesforce Lightning look and feel.

Using Lightning Out (beta), you can introduce the SLDS look and feel to other web apps outside of Salesforce such as Heroku or SharePoint.

How Can You Use the SLDS?

This very much depends on the type of component you are building, e.g. Lightning Web Component, Aura Component, or Visualforce, etc.

To get started, head to the vast documentation provided by Salesforce on how to use the Lightning Design system.

The documentation from Salesforce will detail the five layers of the SLDS and provide examples of how to apply to each different solution.

Something to bear in mind here is that when developing Lightning Components, this uses a JavaScript-type skill set so is best suited to those with experience, as it is targeted as a developer skill set.

Tools to Help

There are tools out there (like Figma, Sketch, or Framer) that can use the SLDS to provide wireframes, so when you are designing a solution, you can get an idea of the actual end user experience. They also work collaboratively with stakeholders to ensure the UI is the best possible and that all states of buttons (active, inactive) are considered.

Salesforce provides some tools of their own to help you develop your own components, including:

• SLDS Validator: An add-on for Visual Studio Code to offer suggestions on how to use SLDS in a better way.
• Design System Starter Kit: A GitHub repo to help you get started and run prototypes.
• Lightning Web Components Component Library: An interactive way to show components with code blocks and in browser preview for supported elements.
• SLDS Scope Customizer: Automatically generate the SLDS CSS.

Summary

As a Solution Architect/User Experience (UX) Designer, I’d always opt to use the SLDS when designing a custom interface. This is because it will provide me with the framework for common buttons and layouts that users are using elsewhere – which saves them from building custom functionality for the same.

It’s no surprise that Salesforce is putting the onus on the Salesforce Lightning Design System with this appearing in different exams including JavaScript Developer I and User Experience (UX) Designer. After all, the future is lightning!

Resources

• Salesforce Lightning Design System Documentation
• SLDS Deep Dive and Best Practices
• JavaScript Developer I Exam Guide