[End-of-Support] Lightning Design System UI Kit for Sketch

The Lightning Design System UI Kit for Sketch surfaces SLDS components, icons, wireframes, and artboards as Sketch symbols—along with system documentation—from within many designers' favorite design tool.

📣 Disclaimer

As of Summer `23 (SLDS 2.21.0), we're officially announcing the end-of-support (EOS) for the Lightning Design System UI Kit for Sketch. If you're wondering what that means, simply put, we won't be providing any further updates, bug fixes, or security patches for this plugin.

We understand that many of you have come to rely on this plugin, and we sincerely appreciate your support. But just like all good things, this too must come to an end.

This doesn't mean that the kit will stop working immediately. You're free to continue using it, but do so at your own risk. Since we're not providing security updates anymore, it's possible that future vulnerabilities might go unpatched.

We're archiving this repository, but the code will always be here. Feel free to fork it, tweak it, and make it your own.

Thanks for understanding and for your continued support!

<br />
<br />

Salesforce Lightning Design System (SLDS) UI Kit

The Salesforce Lightning Design System (SLDS) UI Kit is a collection of design resources to support designing and prototyping using <a href="https://www.lightningdesignsystem.com" target="_blank">Lightning Design System</a> components, tokens, and design patterns. There are also useful resources to help make design workflows more efficient with artifacts like page templates, wireframes, key product screens, and components for writing specifications.

Quick start

Download and install these libraries through the SLDS Plugin for Sketch.
<br />
<br />

Requirements

Sketch

Download and install the most recent version of Sketch.
<br />
<em>If you do not have Sketch, you can use the <a href="https://packages.framer.com/package/darshilv/lightning-design-system-ui-kit" target="_blank" title="Framer SLDS UI Kit">Framer SLDS UI Kit</a> or <a href="https://www.figma.com/@salesforce" target="_blank" title="Figma SLDS UI Kit">Figma SLDS UI Kit</a>, however, they may not be as up-to-date as the Sketch files here.</em>

SLDS Plugin for Sketch

Download and install the most recent version of SLDS Plugin for Sketch.

Salesforce Sans fonts

Download and install Salesforce Sans from the Design System repository.
<br />
<br />

Getting Started

The installation of SLDS Sketch libraries is handled through the SLDS Plugin for Sketch. Visit the plugin page on the SLDS website to read more.
<br />
<br />

Design File Descriptions

SLDS Components for Web
<br />
Sketch equivalents of component blueprints and tokens as seen on the SLDS website

SLDS Components for Mobile
<br />
Sketch collection of native mobile patterns and mobile web coded components

SLDS Icon Library
<br />
A file of design system icons which is automatically generated from design system code

Pattern: Builder
<br />
Builder design guideline customized component symbols

Pattern: User Engagement
<br />
User engagement design guideline customized component symbols

Pattern: Chart
<br />
Chart design guideline customized component symbols

Pattern: Rules, Filters, and Logic
<br />
RFL design guideline customized component symbols

Standard Artboards
<br />
Based on user data, Sketch artboards are sized to the common viewport dimensions used

Spec Library
<br />
A collection of symbols to use when documenting dimensions and details of designs for engineers

Wireframes
<br />
Grey box stencils of common Lightning interfaces

Key Screens
<br />
A collection of the most common product screens on mobile (and desktop coming soon)
<br />
<br />

Contributing, Feature Requests and Bug Reporting

The SLDS team welcomes your feedback to help maintain these design resources. Please add any bugs or feature requests under the Issues tab of this repository.

External contributions are currently closed
<br />
Throughout a release, Salesforce's design team contributes to these Sketch files through an application called <a href="https://www.abstract.com/" target="_blank" title="Abstract">Abstract</a>. Public contributions become unmanagable to review and merge since GitHub doesn't have the capability to view binary files.
<br />
<br />

License

All icons and images are licensed under Creative Commons Attribution-NoDerivatives 4.0
<br />
<br />