Tools

Tools Overview

Sections

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

Design Tools

Astro hovering over an abstract keyboard

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

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

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

Color Tool Coming Soon!

Check out the latest updates on our soon-to-be-released color system!

Learn More

UI Kits

Sketch UI Kit

Sketch UI Kit

Get access to nine Sketch libraries through the SLDS Sketch plugin.

Download
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 Sketch.

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