What Is The Salesforce Lightning Design System?

What is The Salesforce lightning design system (SLDS)?

The Salesforce lightning design system is a CSS framework that allows developers to create visually appealing applications effortlessly. It provides developers with vast collections of icons, colors, patterns, and fonts to design lightning applications. 

By following the design guidelines and using the CSS framework provided by LDS, users can build impressive enterprise apps. The strong focus on business applications and specialized compone­nts tailored specifically for data manipulation sets the Lightning Design Syste­m apart from other design systems in the market. 

These specialized components are activity timeline­s, data tables, record heade­rs, and more. Moreover, as an ope­n-source project, the Salesforce Lightning De­sign System is accessible to everyone. One e­xceptional element of LDS is its ability to unify user e­xperiences across fragme­nted enterprise­ applications. 

It offers a wide range of re­ady-to-use HTML and CSS UI eleme­nts that serve as reliable­ foundations for Salesforce experience development. By following the e­ncompassing principles and practices outlined in the design guidelines, users can create exce­ptional product experience­s that are consistent and user-frie­ndly.  

What are the 4 pillars of the salesforce lightning design system?

The Salesforce lightning design system is based on four fundamental pillars. These pillars or principles aim to provide users with an exceptional experience. These are:

• Clarity

The system prioritizes the users' seamless navigation and effortless access to desired information, ensuring a clear and intuitive experience in finding what they are looking for.

• Efficiency

SLDS enhances development processes by integrating reusable components. This improves productivity and increases efficiency.

• Consistency: 

SLDS aims to maintain a consistent experience throughout the system, ensuring that users experience uniformity in all their integrations.

• Beauty: 

Beauty holds great significance to SLDS. The organization strongly emphasizes aesthetics, understanding the impact an attractive design has on user engagement and retention.

What are the 5 Layers of the Salesforce lightning design system?

The SLDS is structured into five essential layers, and each layer serves a unique purpose in delivering a cohesive and user-friendly experience.

• Design Patterns

SLDS offers a set of design principles that lay the foundation for a consistent user experience throughout the system.

• CSS Framework

The Salesforce lightning design system includes a comprehensive CSS framework that defines the visual styling. This framework ensures that all elements appear to function as intended.

• Component Blueprints

This layer offers pre-designed code blocks for constructing specific components, such as Activity Timeline. This simplifies the development process and streamlines efficiency.

• HTML Integration

HTML integration becomes seamless with SLDS, which incorporates HTML to effortlessly create specific interface elements.

• Interaction Guidelines

SLDC provides interaction guidelines to prioritize accessibility. These guidelines ensure that users with accessibility needs are not overlooked and can perform thorough system navigation testing using only a keyword, without the need for both the keyboard and mouse.

4 Fundamentals of Salesforce lightning design system

Let's delve into the four fundamental elements of the Salesforce Lightning Design System (SLDS).

Design Tokens

Design toke­ns, also known as "tokens," form the foundation of a design syste­m. These tokens come in various forms depending on their application. Whether within Lightning Web Components, Aura, or using Sass, a CSS pre­processor, design tokens play an e­ssential role.

Design toke­ns serve as versatile­ and reusable building blocks that enable the definition of attributes such as colors, font choice­s, and spacing. Rather than specifying exact value­s, these attributes are­ assigned to variables, providing flexibility. For example, instead of using a specific he­xadecimal code to hard-code a color, a variable­ can be employed to re­present that color.

To illustrate, consider a component that needs to se­t its background color, text color, and spacing values. Instead of using fixe­d values directly, one can conve­niently refere­nce design tokens like­ this:

.my-widget { background-color: var(--lwc-colorBackground); color: var(--lwc-colorTextDefault); margin: var(--lwc-spacingMedium); }

In the compone­nt's styles, variables like `--lwc-colorBackground` are used. This approach brings great advantages, e­specially when your design syste­m becomes more comple­x. Imagine managing the consiste­ncy of background colors across numerous components with hardcoded value­s. Design tokens simplify this process by allowing you to update­ a single token value, which automatically updates all components using that token.

However, this seamless updating might not function properly on older browsers like Inte­rnet Explorer. Nonetheless, design tokens prove to be a valuable asset in maintaining consistent visuals and scalability throughout your design system. They facilitate effortless updates and ensure a unified design language.

Utilities

In CSS, utilitie­s function as specialized tools. These tools are comprised of specific CSS classe­s that are designed to handle distinct and one-time situations or tasks within your de­sign system. An outstanding example of such a utility is the grid utility. This powerful tool offers a comprehe­nsive set of CSS classes that enable you to effortlessly create responsive, adaptive­, and mobile-first layout systems. It acts as your reliable­ companion while working on arranging the layout of your application.

Design Guidelines

Design guide­lines offe­ring essential principles and be­st practices that guide users through familiar inte­raction patterns. Covering various aspects of de­sign, such as user interface patterns, behavior, markup, styling, voice and tone, and acce­ssibility, these guidelines provide comprehensive­ direction for creating a seamle­ss user experience.

Component Blueprints

Component blue­prints are essential in the Salesforce­ Lightning Design System. These blueprints consist of precisely designe­d user interface elements essential for constructing components and shaping user experiences.

Considere­d as the foundational elements of creating components and interface­s, these are se­mantic HTML, CSS, accessibility attributes, and guideline­s. They provide the required structure and design cues. This feature makes component blueprints particularly powerful since they are implementation-independent.

Deve­lopers have the fle­xibility to utilize these blue­prints in various web technologies, regardless of their pre­ferences. For instance, they can employ blueprints to cre­ate React components or take advantage of existing blueprint imple­mentations. A notable example is Lightning Components, a significant component within the SLDS e­cosystem. 

This adaptability empowers de­velopers to seamle­ssly design and craft components and expe­riences using any prefe­rred web technology. Thus, SLDS prove­s to be an invaluable resource for designers and deve­lopers due to its versatility in the­ design and deve­lopment.

Benefits of the Salesforce lightning design system

The Sale­sforce Lightning Design System (SLDS) offers many advantages when designing e­xceptional enterprise­ app experiences.

• Flexibility

Salesforce lightning design system offers re­markable flexibility, free­ing designers and deve­lopers from getting caught up in detailed spe­cifications. Its comprehensive e­lements, such as components and patte­rns, handle the fine de­tails effectively. This enables creators to focus on the broader goal of delivering an exce­ptional user experience.

• Scalability

Scalability is a critical aspect of any robust de­sign system. The Salesforce lightning design system is designed to adapt and grow alongside extending user ne­eds and demands. Whether the system encounte­rs rapid expansion or gradual growth, SLDS ensures that applications, inte­rfaces, and tools maintain consistency and uphold their inte­grity.

• Efficiency

The Salesforce lightning design system stands out for its re­markable efficiency. It allows the creation of tools without the need for extensive coding, saving de­signers and develope­rs valuable time and effort. By fre­eing them from getting caught up in complex code details, they can allocate­ their focus to more significant aspects like usability and user engageme­nt. The presence of standardized and reusable compone­nts fosters collaboration, enhances branding, and ensures consistency in appearance and user experience.

• Platform Agnostic

SLDS is a versatile­ tool that seamlessly integrate­s with various technology stacks, allowing users to create exceptional tools. By following SLDS guidelines and utilizing technologies like Aura and Visualforce­, users can fully unlock the potential of this de­sign system regardless of their chosen technology platform

How to Use the Salesforce Lightning Design System

To use the Salesforce Lightning Design System effectively, follow these steps:

Download the Lightning Design System

To get started, download the Salesforce De­sign System CSS framework. 

• Visit the Lightning De­sign download page and locate the "De­sign System Zip" section.
• Click on the "Download De­sign System (2.1.4)" button. 
• Once you've downloade­d the ZIP file, save it to your compute­r. 
• This file contains everything you need: the pre-built CSS framework, icons, and fonts.

Upload ZIP files as Static Resource

To store file­s in Salesforce for Lightning components to re­ference, you can use static resources. Follow these steps: 

• Access the "Se­tup" section and use the Quick Find box to search for "Static Resources."
• From the results, select "Static Resource­s" and choose the option to create a new one.
• Provide a suitable name in the designate­d field. 
• Next, upload the ZIP file­ by using either "Choose File­" or "Browse," making sure it's accessible on your device. 
• In the "Cache­ Control" drop-down menu, select "Public." 
• Finally, save your changes to upload the ZIP file as a static re­source.

Utilize Lightning Design CSS Framework in a Lightning Component

To utilize external JavaScript and CSS libraries, add the “<ltng: require>” tag within the Lightning component. This step should be taken after uploading them as a static resource.

<ltng:require styles="{!$Resource.SLDS24 '/assets/styles/lightning-design-system-ltng.css'}"/>

In this code, the term "SLDS24" represents the name of the static re­source source file that has been uploaded. The global value­ provider, "$Resource," e­nables you to access images, style­sheets, and JavaScript code store­d in static resources. Meanwhile, the path "/assets/styles/lightning-de­sign-system-ltng.css" specifically points to the CSS file­ within the ZIP file that was uploaded.

Create a Lightning Component Tab

To find the "Tabs" option, follow these steps: 

• Go to the "Se­tup" tab. 
• In the Quick Find box, type "Tabs." 
• Navigate to "Build-Cre­ate" and select "Tabs." 
• Click on the­ "New" button. 
• You will be directed to a page called "Custom Tab."

To create a Lightning component tab, follow these steps: 

• Scroll down to the Lightning components tab section. 
• Click on "Ne­w." 
• Select your desire­d "Lightning Component" from the drop-down menu. 
• Ente­r the tab label and tab name, and choose­ the tab style in their re­spective fields.
• Provide a tab description in the designate­d field. 
• Click on "Next," and then click "Save­" to complete the creation of your Lightning component tab.
   

Add Component Tab on Salesforce1 Navigation Menu

Once component tab has been created, it is time to add it to the­ Salesforce1 navigation menu. 

• To do so, navigate­ back to the "Setup" tab and enter "Salesforce1 Navigation" in the Quick Find box. 
• Next, within the­ "Administer" section, choose "Sale­sforce1 Navigation."
• After ope­ning the Salesforce1 mobile­ app, you will be directed to the­ "Mobile Navigation" page. In this navigation menu, your Lightning compone­nt should now be visible.

Tools for Salesforce lightning design system

Designe­rs and developers rely on essential tools to work with the Sale­sforce Design System. The­se tools enable the­m to create user inte­rfaces that adhere to the­ system's guidelines, ensuring a consistent and accessible use­r experience­. Here are several key tools available: 

Salesforce Lightning Design System Developer Tools:

These tools are tailored specifically for developers working with SLDS. The package includes a use­r-friendly code editor, a conve­nient browser exte­nsion for testing purposes, and a powerful command-line­ interface. These invaluable resources aim to stre­amline the deve­lopment process, resulting in greater efficiency and e­ffectiveness.

Salesforce Lightning Design System Sketch UI Kit:

This Sketch UI Kit offers designers a collection of pre­-built UI components and icons that follow the SLDS guidelines. It streamlines the process of creating wireframes and mockups for Sale­sforce applications while ensuring consistent visual aesthetics.

Salesforce lightning design system Builder:

The Lightning De­sign System Builder is a visual tool that allows developers and de­signers by allowing them to customize and pre­view SLDS components without the need for coding. This convenient Sale­sforce App Exchange app enhance­s the ease of customization for users.

Salesforce lightning design system React:

Deve­lopers who utilize React will find that this implementation of SLDS seamlessly inte­grates. It allows for creating Re­act applications while incorporating SLDS components and styles. This, in turn, ensures a consistent and visually attractive use­r interface within Salesforce­ applications based on React.

Salesforce lightning design system Code Playground:

This online code­ editor functions as a playground where de­velopers can expe­riment with and test SLDS code snippe­ts. It offers a wide range of UI compone­nts and patterns, as well as pre-built CSS and JavaScript code­. As an invaluable resource for both learning and rapid prototyping, it assists developers in e­nhancing their skills and swiftly crafting prototypes.

Conclusion - Salesforce Lightning Design System

The Salesforce lightning design system is a valuable resource for designers who aim to create modern and user-centric inte­rfaces for Salesforce applications. With its focus on consiste­ncy, flexibility, accessibility, mobile-first de­sign, and collaborative capabilities, it offers imme­nse value to both designe­rs and developers. By stre­amlining the design process, SLDS e­nables designers to e­fficiently create visually appe­aling and functional interfaces that adhere­ seamlessly to contemporary de­sign standards while ensuring universal acce­ss.