The Salesforce Lightning Design System (aka SLDS) is a component library full of resources available to designers and developers. It allows users to create a consistent Look and Feel across the Salesforce-related apps while abiding by the CSS best practices. Many users say that the SLDS is a “wonderful system that once you start using, you’ll simply fall in love with and will keep coming back to”.
What’s great about SLDS is that it’s:
? continuously being updated by the Salesforce UX team,
? open-source (the code is publicly available on GitHub),
? classified as enterprise-grade (which means that it presents qualities such as scalability, testability, reliability, etc),
? accessible by all users (therefore all the icons and images include alternate texts; SLDS components have ARIA roles, states, and properties; keyboard controls can be used as an alternative to mouse-based controls; all the icons and images include alternate texts; etc),
? platform-agnostic.
This inhouse design system allows its consumers to build user interfaces the same way Salesforce developers built their own. After all, SLDS was created in response to users’ needs who loved how perspicuous the Salesforce interface was and wanted theirs to match that high standard. Inhouse developers realized that the solution was not to design new pages, but offer their customers an entirely new design system. Each design pattern and guideline is driven by comprehensive research and they all match the way Salesforce builds their own platforms, which means users can easily implement solutions that were designed by the best Salesforce experts.
The Salesforce Lightning Design System offers 4 main resources which help developers to match the Salesforce Look and Feel:
? CSS framework (headers, labels, form elements, layouts, size and other visual adjustments),
? Icons (PNG and SVG versions of Salesforce’s standard and utility icons),
? Fonts designed to give a distinct visual personality to any product,
? Tokens that allow designers to tailor aspects of the visual design to match their brand. Customizable variables include colors, fonts, spacing, and sizing.
It’s important for every company to set their core principles and follow them in everything they do. The SLDS fundamentals, applied universally across the organization include:
? Clarity – “enable people to see, understand and act with confidence”
? Efficiency – “ intelligently anticipate needs to help people work better, smarter, and faster”
? Consistency – “create familiarity and strengthen intuition by applying the same solution to the same problem”
? Beauty – ”demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship”
What users find to be one of the most compelling things about the SLDS is its ability to intentionally navigate the space between technical complexity and user-friendliness.
Salesforce’s priority is to allow its consumers to build applications connected to enormous datasets and automate abstruse business processes – and the best part is that there is no coding required to achieve this goal. However, “no coding” doesn’t mean “no customization” – users still have the power to customize and manage the entire experience for their organizations.
The Salesforce Lightning Design System can be used in:
? Salesforce: Lightning Experience (the SLDS styling is automatically applied to all of the components).
? Salesforce: Outside Lightning Experience, such as Visualforce pages, Standalone Aura Apps, and Lightning Components for Visualforce.
? Mobile apps that have access to Salesforce through the Mobile SDK or another API.
? Lightning Out and standalone web apps operated by Heroku or a suchlike platform.
If you want to start using the SLDS or have any questions regarding the topic, please contact me via direct message or e-mail.
