Custom Development Icon

Lightning Design System

The Lightning Experience is the name of the beautiful new Salesforce User Experience. This new experience is built on a set of UI components, patterns and guidelines known as the Lightning Design System.

Lightning Design System with Lightning Components

The new Salesforce Lightning Experience is beautiful, and if you need to extend it with custom code, you don’t have to try to mimic the native experience: you have access to the same style sheets, the same icons, the same fonts, and the same UI patterns Salesforce Engineers use to build the Salesforce apps and core components. The result is a visually and functionally cohesive User Experience.

The Base Lightning Components are a set of core components that leverage the Lightning Design System and that you can use as the building blocks to build your own components. If the component you are looking for is not yet available as a Base Lightning Component, you can use the Lightning Design System styles directly in your own markup.

DreamHouse features a series of Lightning Components built with a combination of Base Lightning Components and custom markup leveraging the Lightning Design System styles. Watch the video below to see some of these components in action:

Lightning Design System with Other Frameworks

One of the characteristics of Enterprise systems is that they are heterogenous: made of different pieces accumulated over the years for a variety of reasons. As a result, users are often exposed to disconnected workflows and confusing experiences. If the user workflows span the boundaries of multiple systems, the Lightning Design System can provide a unified UX in front of these systems. The Lightning Design System is language, framework, and vendor independent. For example, you could easily build an app that exposes an integrated UX to the user but that has parts running in Salesforce and parts running in Java or Node.js on Heroku.

As an example of leveraging the Lightning Design System to unify the User Experience on top of different systems, here is a version of the property management app running on Heroku and built with React, Node.js and Postgres. This example shows how to integrate an existing application into a unified experience. However, if this was a new application you have to build, you could get the same result, without code, using standard Salesforce features and the new Lightning Experience.

GitHub Logo

The source code for the React and Node.js version of the application as demonstrated in this video is available in this repository.