Salesforce Lightning Design System (SLDS) UI Kit
The Salesforce Lightning Design System (SLDS) UI Kit is a collection of design resources to support designing and prototyping using Lightning Design System components, tokens, and design patterns. There are also useful resources to help make design workflows more efficient with artifacts like page templates, wireframes, key product screens, and components for writing specifications.
Quick start
Download and install these libraries through the SLDS Plugin for Sketch.
Requirements
Sketch
Download and install the most recent version of Sketch.
If you do not have Sketch, you can use the Framer SLDS UI Kit or Figma SLDS UI Kit, however, they may not be as up-to-date as the Sketch files here.
SLDS Plugin for Sketch
Download and install the most recent version of SLDS Plugin for Sketch.
Salesforce Sans fonts
Download and install Salesforce Sans from the Design System repository.
Getting Started
The installation of SLDS Sketch libraries is handled through the SLDS Plugin for Sketch. Visit the plugin page on the SLDS website to read more.
Design File Descriptions
SLDS Components for Web
Sketch equivalents of component blueprints and tokens as seen on the SLDS website
SLDS Components for Mobile
Sketch collection of native mobile patterns and mobile web coded components
SLDS Icon Library
A file of design system icons which is automatically generated from design system code
Pattern: Builder
Builder design guideline customized component symbols
Pattern: User Engagement
User engagement design guideline customized component symbols
Pattern: Chart
Chart design guideline customized component symbols
Pattern: Rules, Filters, and Logic
RFL design guideline customized component symbols
Standard Artboards
Based on user data, Sketch artboards are sized to the common viewport dimensions used
Spec Library
A collection of symbols to use when documenting dimensions and details of designs for engineers
Wireframes
Grey box stencils of common Lightning interfaces
Key Screens
A collection of the most common product screens on mobile (and desktop coming soon)
Contributing, Feature Requests and Bug Reporting
The SLDS team welcomes your feedback to help maintain these design resources. Please add any bugs or feature requests under the Issues tab of this repository.
External contributions are currently closed
Throughout a release, Salesforce's design team contributes to these Sketch files through an application called Abstract. Public contributions become unmanagable to review and merge since GitHub doesn't have the capability to view binary files.
License
All icons and images are licensed under Creative Commons Attribution-NoDerivatives 4.0