Tools Overview - Lightning Design System

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.

Learn More Download

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

UI Kits

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

Framer UI Kit

Bridge code and design to build prototypes.

Open in Framer Package Store

Additional Design Resources

Color Swatches

Import color swatches for use in Sketch.

Download

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.

Learn More Go to VS Code Store

Design System Starter Kit

Run prototypes of all sizes in the browser using SLDS.

Install from GitHub

Lightning Web Components

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

Go to LWC Website

SLDS Scope Customizer

Customize CSS scope in an SLDS static resource.

Go to SLDS Scope Customizer

Sections