Instructions

User Manual:

Open the PDF directly: View PDF PDF.
Page Count: 1

DownloadInstructions
Open PDF In BrowserView PDF
SPRING ’19

S L D S

C O M P O N E N T

L I B R A R Y

Instructions
Empower your Salesforce Lightning Design System (SLDS) design workflow

Getting Started
Welcome to the Spring ’19 Sketch Library document

Nested Symbols

The Salesforce UX team has made optimizations with this Sketch Library so you can more efficiently

Sketch Symbols allow you to use and reuse a self-contained design element across a Sketch document.

create Salesforce Lightning interfaces. In the instructions below, we’ll cover the basics and some tips

Any changes made to a symbol will update across your whole document. It’s really handy! Nested

for you to get started. You can still use this SLDS Component Library Sketch UI Kit just like you have in

symbols allow for even more customization, without breaking the symbol from its source, by adding

previous releases, by downloading it, but the Salesforce UX team believes these files are best used as a

symbols inside other symbols. These nested symbols are used throughout the Sketch file so that you

Sketch Library.

can customize your designs as much as possible without detaching your Symbol.

Sketch Libraries allow you to have SLDS components and patterns available from Sketch’s symbols

To see nested symbols in action, open any Sketch document and insert a symbol from the SLDS

menu in any file you open. Sketch Libraries will automatically update your designs when the library is

Component Library Insert > Symbols > SLDS Component Library. In Sketch’s right side panel

updated. Your designs will never be out of date if they’re linked to this Sketch Library document.

you’ll see all the symbol overrides or customizations you can make to that symbol without having to
detach the symbol--keeping the automatic update feature in tact.

How to use the SLDS Component Library as a Sketch Library

Item One

Item Two

Item Three

Copy and paste this link in any browser: sketch://add-library?url=https://
www.lightningdesignsystem.com/sketch-library-rss.xml.
This will subscribe your Sketch application to automatically download and install new versions of the
SLDS Component Library Sketch UI Kit.

The right side overrides
section allows for the
tab title and state to be
customized

You can see all your Sketch Libraries in Sketch >
Preferences > Libraries

The tab symbol uses nested symbols for
Hover, Default and Selected tab states

Color Token and Typography Layer Styles
Salesforce Lightning Design System uses design tokens as named entities that store visual design
attributes. The SLDS Component Library uses Sketch Layer Styles and Sketch Text Styles to mimic
Lightning Design System design tokens. This allows Sketch designs to use the equivalent of a design
token--saving you time spec'ing your designs for development.

Artboards Navigation

In symbols, like icons, that contain solid color backgrounds, you’ll find the background is a layer style

All components have their own artboards in this SLDS Component Library document. Finding the

visual styles are introduced in SLDS. Instead of changing fill colors individually in hundreds of shapes in

component symbol you want to use a breeze since the lightningdesignsystem.com website menu is

this document, we can just update a color symbol or point the shape to another color symbol.

which defines the icon background. This allows us to easily make file-wide changes to colors when new

mapped to the Sketch artboard list.

How to use SLDS icon symbols
Icons are used frequently across Lightning Design System. We’ve
constructed them to be easily used individually and as nested symbols.
The steps below cover how to place icon symbols individually.
1. Choose an icon type. SLDS has four types of icons. Utility icons are used for everything except
Salesforce object icons. Utility icons are what you’ll want to use 95% of the time. Action icons are
primarily used in mobile applications. Custom icons are to be used for custom Salesforce objects.
Standard icons are used for standard Salesforce objects.
2. Place your icon type symbol. Once you’ve chosen the type of icon you’d like to use (Utility, right?)
place that symbol where you’d like in your Sketch document.
3. Choose your icon glyph. In Sketch’s right overrides panel, choose the icon glyph you’d like to use
from the dropdown menu.
4. (Optional) Choose an icon glyph color. In Sketch’s right overrides panel, choose the icon glyph color
you’d like to use from the dropdown menu.
SLDS Sketch Library Artboards map to the navigation on
lightningdesignsystem.com website

5. (Optional, for Action, Custom and Standard Icon Types) Choose an icon background color. In
Sketch’s right overrides panel, choose the icon background color you’d like to use from the dropdown
menu.
Source Exif Data: 
File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
Linearized                      : No
Page Count                      : 1
PDF Version                     : 1.4
Producer                        : macOS Version 10.14.2 (Build 18C54) Quartz PDFContext
Create Date                     : 2019:01:10 03:58:26Z
Modify Date                     : 2019:01:10 03:58:26Z
EXIF Metadata provided by EXIF.tools

Navigation menu