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.

Example from Figma of a Custom Component to Apply for a Role that could be exposed outside of Salesforce

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 skillset 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.

Example from Figma of a Custom Component to Upload Contacts from .csv

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


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!

Salesforce User Experience Certification Guide


Source link

Interesting Posts

Leave a Reply

Your email address will not be published. Required fields are marked *