Tools

Tools Overview

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
Framer UI Kit

Framer UI Kit

Bridge code and design to build prototypes.

Open in Framer Package Store

Additional Design Resources

Fonts

Fonts

Learn more about using our custom typeface, Salesforce Sans.

Install from GitHub

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 Playground

Lightning Web Components Playground

Write JavaScript, HTML, and CSS code, then preview the output.

Go to LWC Playground

CSS Customizer

CSS Customizer

Customize CSS scope in an SLDS static resource.

Go to CSS Customizer