What Do You Need To Know For Salesforce Lightning Design System?


The Lightning Experience is the name of the wonderful new experience of Salesforce which is based on an arrangement of UI segments, patterns, and rules known as the Lightning Design System.

The Lightning Design System is initiated as an open source venture and is accessible to everybody. While different CSS toolboxes are for the most part skeptic in terms of the type of application you design, the Lightning Design System is focussed around business applications. Therefore, in addition to traditional workings, it offers specialized mechanisms that are useful when it comes to manipulating data such as activity timeline, data tables, record headers, etc. Furthermore, in addition to UI components, it gives UI patterns to take care of the basic issues you confront when building data-driven applications.

What is Salesforce Lightning Design System?

The new Lightning Experience is clear, productive and wonderful and sets another standard for User Experience in Enterprise applications. What additionally separates it is that its hidden structure framework (the Lightning Design System) is accessible to everybody to give a bound together ordeal while expanding existing highlights or incorporating with outside frameworks. The end result is an amalgamation of User Experience across the system and streamlined workflows within Salesforce and across system boundaries.

The Lightning Design System is an incredible method to scale out your plan so it’s less demanding to keep up, while additionally guaranteeing that you are continually following accepted procedures and Salesforce structure style. It enables you to spare a ton of time and cerebral pain. We utilize the Lightning Design System at Blue Canvas and prescribe it to all engineers taking a shot at Salesforce applications. We likewise suggest that you get your Lightning Design System code under source control with the goal that you can monitor how your structure is changing after some time and rollback to past states as required.

In this article, we shall cover various aspects related to features, design token, and design principles that are related to Salesforce lightning system and how can they be helpful to enhance the user experience and interface.

Related Post:  What are the Benefits of Sales Process Automation?

Features of Lightning Experience Design System

  • Aesthetics: There are four fundamental design principles behind the Lightning Design System i.e. clarity, beauty, efficiency, and consistency. Much the same as Bootstrap, the Lightning Design System gives cross-browser compatible CSS, icons, font, and design guidelines, and semantic and accessible component markup. It even has it’s very own typography known as Salesforce Sans. The design framework additionally offers a list of background colors and text colors and font sizes to use
  • Components: Additionally, like Bootstrap, the Lightning Design System gives parts and CSS that you can rapidly use to fabricate visually appealing applications. The framework is about something more than CSS. It incorporates the javascript that enables you to build some more mind-boggling functionality into your user experience. A portion of our top picks include:
    • Action Timeline: Ever needed to make a dashboard or steam of occasions in a way that looked the way that the Salesforce dashboard does? You can easily perform that with the help of Activity Timeline component. You would then be able to incorporate different next activity things for a client like a Call, Email, Event or Task.
    • Models: Salesforce gives pre-constructed models that you can use to give imperative data to your clients.
    • Datepicker: How frequently have you tinkered with awkward date-pickers just to wish there was a less demanding approach to improve its look and performance? The Salesforce Lightning Design framework has you covered.
    • Walkthrough: The Lightning Design framework is about more than mere color plans and typefaces. It is tied in with liberating you to make extraordinary applications with the incredible user experience. The Walkthrough part is an incredible case of this as it enables you to construct a superior onboarding, product announcement and training experience for new clients.
    • Rich Text Editor: The Rich Text Editor enables you to give clients amazing text area components without rolling your own javascript.

There are many more components accessible too in Salesforce Lightning.

What are the Design Tokens?

One of the hardest things for any designer is guaranteeing that your application configuration remains steady, consistent and adaptable. The more you build, the more perplexing your structure becomes. Furthermore, in the event that you’ve simply hardcoded values all through your CSS then rolling out updates and improvements is going to excruciating. Additionally, if Salesforce rolls out improvements to their UI, you should manually guarantee that everything gets refreshed.

Related Post:  CRM for Small Businesses- A Worthy Partnership

In this case, design tokens are the response to this issue. They are “named entities that store visual design characteristics.” You can utilize them rather than hard-coded pixel values or hex values.

What’s more important is that it’s not mere the background color, it also includes line-height, spacing, opacity, font, font-size, z-index and more.

What are the Design Principles?

The Lightning Design System mirrors the patterns and components that support the Salesforce product. These patterns and components give a unifies language and steady look and feel while designing applications and products inside the Salesforce community.

Salesforce continually remembers the following core standards when it comes to making design decisions at salesforce and urges you to adopt them as well.

  • CLARITY: Elimination of uncertainty and enable people to see, comprehend, and act with confidence.
  • EFFICIENCY: Streamline and improve work processes. Cleverly foresee necessities to enable individuals to work better, more brilliant, and quicker.
  • CONSISTENCY: Make recognition and reinforce instinct by applying a similar answer for a similar issue.
  • BEAUTY: Exhibit respect for people’s time and attention through mindful and rich craftsmanship.


The Lightning Experience gives a reasonable, productive, steady, consistent and wonderful experience out of the box. Conveying a spotless and instinctive experience is a challenge for any application, however performing it at scale for an immense, metadata-driven, and altogether adaptable framework is a remarkable achievement.

Truly, organizations have regularly depended on custom improvement to put a superior User Experience over parts of their Enterprise framework. With the Lightning Experience, there is no requirement for custom advancement to get a lovely, uncluttered, and instinctive experience, it’s the standard.

Write a Comment

Notify of

Download & Learn from Our Whitepapers

Stop, read and acquire deep insights into complex issues