3 Design System Libraries for Sketch
UI Design • July 15th, 2020
Overview
Sketch has quickly become one of the most popular product design tools on the market. It’s low cost, short learning curve, and extensibility through libraries (and plugins), make it an attractive option to enterprises and students alike. In this article, I’ll share my three favorite design system libraries for Sketch and cover how to install them.
What’s a Design System?
Before we begin, let’s briefly discuss design systems. A design system provides guidance on how to create and manage design assets. They also offer guidance on how to align branding standards, across multiple products, to ensure a consistent experience. In software development, design systems outline the visual specification for a user interface (e.g. colors, typography, spacing) and can be managed through shareable libraries.
Why a Library?
With Sketch libraries, you can quickly insert interface components into your designs. This will exponentially speed-up your production rate. No more hotkeys to remember, no documentation to read through, just getting things done -and without sacrificing quality! In addition, if you work on a team (or across multiple teams) you can all work from the same library to ensure consistency. Right click, insert… done! Simply put, Sketch libraries streamline production and collaboration, for individuals and teams.
3 Design System Libraries for Sketch
The three design system libraries that I’ll focus on for today are: Material by Google, iOS by Apple, and Lightning by Salesforce. I chose these specific libraries because of their popularity, familiarity, and ease of use. I’ll provide a little insight into my experience using the systems and provide links to download the Sketch libraries. Let’s get started…
Material Design
Material Design (by Google) was the first enterprise design system that I learned. I began studying the system in 2014 and it took me roughly a month to learn. If you’re already familiar with Google products, which most folks are, this is a great place to start. The Sketch library itself is robust and will include everything you need to create web and mobile applications. Visit the Material Design Resources page to download the design kit for Sketch,
iOS
As a product designer, you’ll most likely find yourself working on mobile applications at some point in your career. Much like Material, iOS is robust and very well documented. However, if you don’t use Apple products, it may feel unfamiliar to you and could take a bit longer to learn. Stay patient… you can’t avoid this one! It’s a great skill to have on your resume too. Visit the Apple Design Resources page to download the iOS Sketch LIbrary,
https://developer.apple.com/design/resources/
Salesforce Lightning Design System
In 2018, I started learning the Salesforce Lightning Design System (SLDS). Since then, it has become my favorite design system as it suits my style really well -I love to illustrate! The guidelines are well organized, easy to read/ follow, and are updated often. In my opinion, SLDS is the most approachable design system, but I am also biased… so there ya go! Download the Sketch UI Kit to get started with Lightning,
https://www.lightningdesignsystem.com/resources/downloads/
Installing a Sketch Library
The installation in Sketch library files is simple. Open Sketch’s Preferences by selecting Sketch > Preferences, and then click on the Libraries tab. From there, click the Add Library… button to browse for your file(s).
Note: The SLDS library is now managed through a plugin, https://www.lightningdesignsystem.com/tools/sketch/. The process for installing a plugin is even easier than installing a library… just double-click the installation file and the Wizard will guide you through.
Next Steps
Now that you have a design system installed, you can begin to use it’s components in your interface designs. To get started, create a new Artboard in Sketch. Then, right click within the Artboard to insert a component from a library. Pretty neat, right!? For more information on Sketch Libraries, including how to create your own, check out https://www.sketch.com/docs/libraries/. Until next time, thanks for reading!
Have an idea I could help with? Let’s chat! While I’m currently on assignment, I’m excited to hear about the next big thing. Email me.
