Introduction to the Salesforce Lightning Design System

Salesforce Lightning Design System is also known as SLDS. These are standard design patterns you can use to style custom components in a uniform way that’s consistent with Salesforce’s rest. According to Salesforce, this is the world’s first open-source, platform-independent, living, open-source design system. We will examine the layers of SLDS, where it can be used, and why you should use it in this article.

The 4 Pillars of SLDS

In order to ensure end users receive the best experience, Salesforce Lightning Design System incorporates the following principles:

1. Accuracy: Is what the user is looking for easily found?
2. Productivity: Making your development more productive can be achieved by reusing components
3. The experience: Does the experience differ across the system?
4. Aesthetics: A product must look attractive to get used.

SLDS consists of 5 layers

In order to deliver a consistent experience, it provides a Design Pattern.

1. The Design Pattern provides a set of principles for delivering a consistent experience.
2. An element’s look and feel can be defined using CSS frameworks (for example, styling).
3. Activity Timeline, for instance, can be built from component blueprints.
4. The HTML element is part of SLDS, so you can easily create it.
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.

How can SLDS be used?

In spite of the fact that this framework (or set of principles) is built around Salesforce, it can also be used outside of Salesforce. With Lightning Components, SLDS can be used to ensure that the standard UI looks and feels the same as Lightning Components. There are differences between Aura and Lightning Web Components when using SLDS, however.

Then you use the Apex:SLDS /> tag in Visualforce to introduce the latest Salesforce Lightning look and feel to your Visualforce pages.

The Best Tools For Help

When you are designing a solution, there are tools available (like Figma, Sketch, or Framer) that can provide wireframes using the SLDS.