Creating a VisualForce Page with the help of Lightning Design System

By | May 3, 2017

While we have already discovered how to use the Lightning components in our VisualForce pages there are other ways available to developers to have the same look and feel of a Lightning design system in a VisualForce page without the use of any Lightning components. The Lightning design system provides a material design approach to VisualForce pages which is certainly an upgrade over the monotonous VisualForce pages. It’s event based faster response will only add more capability and enhance a VisualForce page’s functionality.

To incorporate Lightning design system on your VF pages use the “” tag in the VF page. This component/tag is used as an alternative to uploading design system file in static resource. The markup reference language can use the Lightning design system’s styles and assets under the class “slds-scope”. To use the design system’s assets such as SVG images and icons we use the URLFOR() function and $Asset global variable.

Below mentioned is a small snippet on how to use the Lightning design system in your VisualForce page. For a more advanced and a detailed example, please visit this Salesforce developer blog



Once the code is incorporated in your page your page will be viewed as below, since we are using the “Contact” as standard controller we are passing the id of the Contact in the URL.



With the help of apex controllers and other controller side scripting the developers can integrate a full functional page in lightning design system without any hiatus thus providing us with a UI which comprises the core functionalities of Salesforce classic incorporated with a touch of Lightning.

Also Read:
1. Avoiding API Limits in Test Classes
2. Using Enhanced Lists in Visualforce page
3. Two-factor Authentication
4. Adding/Creating Fieldset in Salesforce.

About Us
Greytrix is one stop solution provider for Sage ERP and Sage CRM needs. We provide complete end-to-end assistance for your technical consultations, product customization’s, data migration, system integrations, third party add-on development and implementation expertise.

Greytrix have some unique solutions for Cloud CRM such as Salesforce integration with Sage X3, Sage 100 and Sage 300. We also offers best-in-class Cloud CRM Salesforce customization and development services to business partners and end users. Greytrix have some unique solutions for On-Premise CRM such as Sage CRM integration with Sage X3, Sage 100, Sage 300, Sage 500 and Sage 50 . We also offers best-in-class On-Premise Sage CRM customization and development services to business partners and end users.

For more information, please contact us at We will be glad to assist you.