All the tools you need to work with and learn about Salesforce Lightning Design System.
Lightning Design System Plugin for Sketch
Lightning Design System Plugin for Sketch surfaces SLDS components, icons, wireframes, and artboards as Sketch symbols—along with system documentation—from within many designers' favorite design tool.
Lightning Design System Linter for Sketch New!
Use our Sketch Assistant for Design System alignment with minimal effort!Add to Sketch • Learn More
Salesforce Fictitious Data Plugin
Explore our new tool that populates Sketch mock-ups with fake Salesforce data including names, companies, numbers, dates, and more.Take a Look
Color Tool Coming Soon!
Check out the latest updates on our soon-to-be-released color system!Learn More
Sketch UI Kit
Get access to nine Sketch libraries through the SLDS Sketch plugin.Download
Figma UI Kit
Unleash the power of the SLDS UI Kit in Figma.Open in Figma
Additional Design Resources
Import color swatches for use in Sketch.
Use icons to communicate clearly in limited space.
SLDS Validator is a VS Code extension that helps developers write SLDS compliant code.
Design System Starter Kit
Run prototypes of all sizes in the browser using SLDS.
Lightning Web Components
SLDS Scope Customizer
Customize CSS scope in an SLDS static resource.