Tools Overview - Lightning Design System

All the tools you need to work with and learn about Salesforce Lightning Design System.

Design Tools

Unleash the power of the SLDS UI Kit in Figma.

Import color swatches for use in Figma.

Use icons to communicate clearly in limited space.

SLDS Validator is a VS Code extension that helps developers write SLDS compliant code.

Run prototypes of all sizes in the browser using SLDS.

View web component JavaScript, HTML, and CSS code, then preview the output.

Customize CSS scope in an SLDS static resource.