Get Started for Sketch

Installation

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.

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:

Manually

Open the Core file and navigate to Shared Styles page, select and update the desired colors.

Remember to always propagate changes to libraries by clicking on Update Layer Style.

Find and Replace

Change colors globally by running Edit → Find and Replace Color, choose a color you want to update and hit Replace.

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.


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.

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.

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.

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.
  • 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.
  • 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.