Get Started with Slice for Sketch
Setting up a modular design system.
In this article, I will guide you through all the necessary steps and features to properly set up and use Slice in Sketch at its maximum potential.
- 👀 Overview
- 📦 Installation
- 🎨 Changing Colors
- ✏️ Changing Fonts
- 🔪 Using components
- 🧩 Naming and Extending
Slice is a Modular Design System shaped from separate UI libraries. Its main purpose is to serve as a project boilerplate and provide you with all the necessary building blocks to create stunning websites and apps.
By Modular, we mean, that the whole system is intelligently partitioned into sustainable modules like Core, Controls, Navigation, and Cards.
Keeping components in separate modules makes Slice much easier to use with different brands and user interface circumstances. This approach dramatically reduces the time spent on designing and coding, which results in great development cost savings, and makes scaling your projects a breeze.
Now that you know the concept let’s make it work. 💪
Slice entirely relies on the use of libraries as modules. To use Slice properly, you first need to add the Slice Sketch files as libraries. There are two options for accomplishing this:
- Adding files one by one. Open each library file and run
File ➝ Add as Library….
- Batch adding files. Open the Sketch preference menu and drag all library files into the Libraries tab.
3. Changing Colors
The Core file contains all the styles that are synced with other libraries. This makes global changes to the system super fast, here are two ways for updating colors:
Open the Core file and navigate to Shared Styles page, select and update the desired colors.
Note: Remember to always propagate changes to libraries by clicking on Update Layer Style.
Using Find and Replace
Change colors globally by running
Edit → Find and Replace Color, choose a color you want to update and hit Replace.
Note: Remember to always mark both checkboxes “Include all opacities of this color” and “Preserve original opacity” in order to propagate changes through all existing color groups.
Next, after replacing the colors, go to the Text Styles page and make sure that text styles are matching with the recently updated colors. Update them if needed.
4. Changing Fonts
Changing the font family will affect each library and each system component, which will allow you to transform the whole system in just a few clicks ultimately.
- Navigate to Text Styles page;
- Hold ⌘ key and select the desired text group;
- Make changes either to the entire font or individual styles;
- Click on Update Text Styles, and Save;
- Now, open the library files and pull the newly updated text styles. You should be able to preview all components changes before the update.
5. Using Components
Slice provides a wide range of building blocks, allowing you to combine and use them at your discretion.
Nevertheless, managing such an extensive collection can be tedious. That’s why we have developed Galleries, whose primary purpose is to serve as a mirror for your components. 🔮
These files are designed for the fastest possible drag and drop, letting you use components without unlinking them from the primary library.
To use them properly, simply open a new file tab, and paste the needed components.
Note: Gallery files only contain Library Symbols from the corresponding libraries. In order to distribute all the updates into the Gallery files, make sure to pull updates in all the library files first. ⚠️
6. Naming and Extending
Slice provides you with a reliable and straightforward naming convention that you can easily extend and use with your team through the following naming principles:
- Do not create separate groups for each size or color. Instead, use a single group to describe the complete style. This method will improve the Insert Symbols menu and simplify navigation to the desired component.
2. When adding new variations of components, make sure to include them in the Contents group. Doing this will allow you to enable new component override quickly.
3. When coming up with names for new components/instances — always use the description of its contents. This approach wins by eliminating confusion and making it easier for users of your files to understand the functional meaning of each Symbol.