Design Systems + Sketch — How to start preparing UI Components Library
Finally, Design Systems became the industry standard. This is why it is critical to know how to prepare them for our projects. If you are like me and you create your digital designs mostly in Sketch, this Story contains a bunch of tips to prepare there UI Components for your Design System.
Note:
I like to keep things clear. As the creator of UXMisfit.com, my priority is to help designers by inspiring them with a bit different view on UX and preparing time-saving tools.
UXMisfit toolkits are prepared mostly for Sketch. You can find ones to prepare User Flows efficiently or to ensure a better quality of App Icons.
You may also find the Design System Kit — it is called Prime. It contains more than modern UI Design System for Sketch should have. Except hundreds of customizable elements, it includes Illustration System, Web UI Kit, Charts and Vector Templates of Main Devices.
Regardless of the Prime Design System Kit, all tips mentioned in the story works even if you decide to prepare UI Components on your own.
In the beginning, there was chaos…
It does not matter if you start preparing components for Design System at the beginning of a new product, or if you decide to include it in the existing few years old project. It is always a challenging decision if you make it for the first time because you have to convince other people (not only designers) to the idea of creating a system. Let’s consider how you can make different people more enthusiastic about Design Systems:
Business People & Management— they may be scared of time and cost of creation something big from the ground (of course there are ways to speed up the process). Obviously, initial cost may be high, but you have to convince them that in the future price of the creation of new components will be much lower, implementation will be faster and the quality of product… much better.
Developers — thanks to design system they will be able to prepare components earlier and use their instances in multiple pages. Maintaining design consistency will be much easier. Developers will not have to think if this blue button should have a bold font face or a shadow — they will just use the right component (Primary Button).
QA — Show testers that they will receive the single source of truth. Thanks to this there will be no doubt if something is done right.
OK, If your team is ready, let’s grab a mug of coffee and launch Sketch!
Got an existing project? Make its inventory.
If you did not prepare some kind of Design System or your own UI Kit for your current project, the first step to make it is to check all the existing elements. You will probably find multiple instances of elements that differ just a bit, but this will have to be fixed.
If you use the existing Design System Kit, you will get instantly the list of almost all elements your component library should have. What’s more, they are already categorized as symbols. You can adjust existing elements to match the ones from your solution, and you should be able to use it quickly.
If you decide to create a library from scratch, it is good to prepare the list or a spreadsheet first. This will help to establish the right structure. Developing the right document architecture may be hard, but it is worth to do it to speed up later work.
But… Sketch Libraries are not Design Systems?
This may sound not so obvious, but it is right. I agree with Brad Frost. Your Sketch Libraries are not a Design System, but they also remember that: they are its fundamental part.
Lots of libraries are the initial sparks of Design Systems. There are also methods of preparing living systems from them, but this will be covered in the next chapters.
Design Systems are much more than UI components. They should also include guidelines of motion, principles of content strategy and copywriting style and finally living implemented components — ready to be used on the particular platform.
In the end, all of this is begins with components made in design tool like Sketch. Remember that the kits are not Design Systems itself, but these libraries are here to help you build systems.
Building UI Component Library for Design System
Let’s take a look how to prepare components for your system from the tiniest particles to the large organisms and templates. The Atomic Design philosophy is very useful when you prepare the library that should be used frequently and expanded in the future.
Particles
Speaking of Atomic Design. Before you jump into creating the fundamental UI components, it is necessary to establish particles.
Colors
It is good to start with colors because every brand has got their own palette. Remember to establish a good naming convention. It is good to point which tone is Primary one, or Secondary and the ones for Success, Warning or Error elements. Do not let your system to include just “blue” or “purple,” it is crucial because every color has got its meaning. Proper naming will allow your team to recognize the purpose of the color.
🔥 Tip: To optimize Fill and Border Style Customization. Create a Shape Layer with Shared Style containing only a fill, then create one in exactly the same position and size which includes only the Shared Style with Border. Fill, and Border should have the same color. If you also add Shape Layers with Styles that differ only with opacity nearby or in the same position, you will be able to update the style exceptionally quickly. You will just have to select the shape layers, update two parameters (fill and border in the right side panel of Sketch) and update Shared Styles.
Gradients & Overlays
Some say that gradients are the new colors. If you browse Dribbble or Behance, you will notice that many shots include them. That’s why your Design System Library should have the set prepared for the project.
The same situation is with overlays. Tone and opacity should be defined in the system to ensure consistency.
Fortunately, from Sketch 52+, there is no need to prepare special artboards for colors, gradients, etc. It is all in the Shared Layer Styles and Symbol overrides.
Typography
The good typography system is an essential part of every UI Framework that is part of the larger Design System. When I was creating the Kit, the preparation of this element took a huge amount of time. If you decide to create your typography remember to include at least following styles:
- Black
- White
- Grey
- Primary (with Primary color of your system)
It would be nice to have also:
- Success
- Warning
- Error
These color variants will help you to ensure enough flexibility and consistency in your later work.
Now, let’s dive into the scale and size. There are multiple methods you can define this property along the typography system. I have decided to inspire the ones included Prime by Apple’s and expanding with the modern web trend (huge titles etc.). Thanks to this strong foundation you may be sure that the system will work and the typography will have good readability on mobile and desktop.
If you would like to have a correctly sized typography scale, you may find https://type-scale.com useful. Just pick Base Size, Scale Type and set up a sample font and play around the settings.
When you will define all of your sizes add at least regular and bold options. Then duplicate all items them two times. Align them to the right, center and left. Now create Text Style for every option.
To ensure the best usability of typography use following naming convention:
[Size Name]/[Aligment]/[Color]/[Style]
If you have more than one font family in your system:
[Size Name]/[Font Family]/[Aligment]/[Color]/[Style]
For example:
Title/Center/Black/Bold
Title/SF Pro/Center/Primary/Left
You can also divide typography systems into separate files and make them Shared Libraries.
🔥Tip: To optimize Typography Customization. Place all elements (from single color setup) in one column. Align the layers containing the different alignment styles (left, center, right) on top of each other. Thanks to this you will get the single column with typography. This will let you change typeface or its style by selecting the group and updating them together. It is much faster and more convenient than preparing the parameters for every alignment separately.
Grids and Layouts
Preparing the grid system will not only ensure the consistency but will also speed up your later work. Your grid should be universal — the popular choice is to set up 8 point grid. This will ensure that your UI will work well on Desktop, Tablet, and Mobile.
🔥Tip: To speed up your work setup big nudge (Shift+Arrow) in Sketch to the size of your grid (for example 8 pixels). This will make your work much faster.
Atomic UI Components
Before you will jump right into the specific symbol creation. Take some time to list all of the necessary UI components. This list may be quite long but will help you to plan the structure of your UI Framework.
It is evident that the atomic design system will include components like Buttons, Inputs/Text Fields, Icons, Checkboxes, Switches and Radio Buttons, but there are also elements that are not so obvious when you think of the system for the first time like chat bubbles, chips or rating components.
Even your atomic components may have some particle symbols inside. For example, your button may include the following symbols: Icon, Shadow, Shape, Component state or even Text (if you decide to prepare separate symbols for them).
These atoms will be not only the instances of UI controls in your future projects, but they will also help to build more complex ones in your Sketch Library.
🔥Tip: What is worth mentioning, Since Sketch 52 you do not have to prepare special masks for colors of your buttons or icons. Shared Styles take care about that with Symbol Override feature. This means less symbol and more transparent and elegant workflow.
Molecules and Organisms
So you have created all atomic elements. Now you can combine them into molecules.
This means that your basic Input, Button and Icon may be combined into the more complex one — Search Text Field Card component for your system may be created from Shape or Image, Overlay, Icons, Button or Text Styles.
Using a set of essential elements in symbols and layers with Shared Styles lets you build the system that updates itself very quickly.
UI Kit
The atomic design calls the complex sets of predefined atoms, molecules, and organisms as Templates. These are large parts (like website sections) of your solution that may be used multiple times.
It is good to design Templates with their purpose in mind.
Prime includes the following categories for Templates:
- Hero
- Features
- Gallery
- Pricing
- Content Left
- Content Right
- Content Center
- Customers
When you create your own UI Framework, I encourage you to prepare these large templates with at least these categories.
😱 Missing Elements of Many Design Systems
Many designers think of the Design System Kit for Sketch as of the UI Controls Library. But Design Systems are much more; Sketch also may be used for many other digital design purposes.
When I was creating the Kit I realized that the Libraries should also include charts and vector devices (in outline, flat and realistic style). They are used so often in modern website and solutions that they need to have consistent representation in system.
What is more, nowadays websites and apps are full of beautiful illustrations. That’s why I also included customizable illustration system that contains components to build and style them quickly.
If you decided to design your own set of libraries for Design Systems consider adding these elements to them.
Team Collaboration
Design Systems are the source of truth for the team members. This means that your Sketch Libraries should be prepared to be used by all of the Designers involved in the project. The easiest way to share files with your team is to upload them into the Sketch Cloud
While preparing the UI Framework as a Library remember to ensure consistent and proper naming. Building logical and clear structure will help your colleagues to discover all possibilities of the kit.
Separating files
What is more, you should consider making some parts of the Sketch UI Design System as separate files. Except the core library, you may think to prepare a file for an Icon set, Illustration Kit, Device Templates or Charts.
When to separate these things? You should think of making it when it is clear that there is a big set of particular elements (like icons) or only some designers from your team create them (this may be applied to illustrations) and the rest is just using their creations.
Control the history of your Libraries
The better way to manage Sketch Library files with the team is to use Version Control solution like Abstract. Thanks to this you will be able to browse the library’s history of changes, review your teammates’ modifications, comment them and allow to add them into the master (main version of the Library).
Building living Design System from Sketch
Some tools like InVision Design System Manager lets you build Design System Documentation and the source of truth not only for Designers but also Developers, QA Specialists, and other Team Members.
Usage of the Invision DSM is straightforward, you may find a quick introduction here. You can quickly build design system documentation, manage versions and user permissions to view or edit the system.
This tool makes your Sketch Library the real living Design System.
Finally: Break the consistency — if needed
While the consistent strategy is fundamental, you have to remember that as a UX Designer you have to prepare the solution that solves users needs in a delightful way and meet business requirements. This is why you have to be ready to break your consistent Design System if there is a higher purpose for that.
“You must unlearn what you have learned.”
— Master Yoda
If there is a case where that particular element simply does not work, you have to validate it. If the tests will show that breaking the consistency of the UI will make users happier, consider modifying. Just remember to note this “exceptions” in the system, so the others will know that it was not an error, but a strategic decision.
Summing up
Sketch is the right tool for building Design System UI Components. It is the tool that contains multiple features like Symbols, Layer and Text Styles with override abilities that makes the workflow extremely easy. Thanks to Library philosophy you may quickly share your files, and with additional plugins, you may quickly turn it into the real Design Systems.
If you enjoyed the Story do not forget to 👏👏👏.
By the way…
If you plan to start a new project soon or to organize your UI Library — do not waste your time creating everything from scratch. Feel free to use the Prime — Design System Kit. See Prime in action.
To make it easier there is a gift 🎁 Use MEDIUM10 offer code to get 10% Off.
You can also Create User Flows faster in Sketch — With SQUID you can create User Flows directly in Sketch the sketch file with your artboards. Everything may be done within a couple of clicks. See how it works.
You may also be interested in Sketch Plugins that help to maintain UI Design System:
Thanks for reading, good luck with your Design System!
