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.

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.

Additional Development Resources

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