Tools

Tools Overview

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

Design Tools

UI Kits

Figma UI Kit

Figma UI Kit

Unleash the power of the SLDS UI Kit in Figma.

Open in Figma

Additional Design Resources

Color Swatches

Color Swatches

Import color swatches for use in Figma.

Download

Icons

Icons

Use icons to communicate clearly in limited space.

Download   •   Icons Page


Development Tools

Astro drawing on a screen, floating with balloons

SLDS Validator

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


Design System Starter Kit

Design System Starter Kit

Run prototypes of all sizes in the browser using SLDS.

Install from GitHub

Lightning Web Components

Lightning Web Components

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

Go to LWC Website

SLDS Scope Customizer

SLDS Scope Customizer

Customize CSS scope in an SLDS static resource.

Go to SLDS Scope Customizer