Sketch Tutorial

Get Started with Plaster

Setup, customize, and reuse a mobile design system for a Sketch.

Hi! In this article, I will guide and introduce you to Plaster, a toolkit for creating mobile interfaces in Sketch.

https://dribbble.com/shots/6714384-Get-Started-with-Plaster

With Plaster, you can easily apply on practice rules from Material, & iOS guidelines to design beautiful and usable applications.

Plaster strives to bridge the gap between Android and iOS design principles. By making mobile patterns as open as possible for customization and repeated use with a versatile set of ingredients bound in a single workspace to meet product goals, regardless of the platform.

Mobile Design System for Android & iOS

This guide is meant to show you the basics of customizing and scaling the system to properly fit it into your design process and brand successfully.

Guide contents:

1. Installation
2. Changing Colors
3. Changing Fonts
4. Components
5. Naming convention

1. Installation

Plaster Toolkit consists of three main files:
Light theme, Dark theme, and a UI kit.

Light and Dark theme files serve as Libraries, for all system components sorted by interface patterns and platform.

The UI kit includes predesigned app screens built with Library Symbols from the Light theme. So for the correct use of which, it is required first to add the Light theme as a library.

Open the Light theme file, and run File ➝ Add as Library…

After this, all the changes made to the Light library will transmit to the UI kit.

2. Changing Colors

Plaster contains a reliable set of 22 colors, proven to fit with any component state or font style. Feel free to customize any of them, but we recommend you only change the brand colors to get your project started.

To update the colors:

1. Navigate to the Get Started page;
2. Click on the color you want to change;
3. Choose a new one to replace;
4. Update Color Styles to apply changes to the entire system.

3. Changing Fonts

To change the typeface or an individual text style:

1. Navigate to the Get Started page;
2. Holding ⌘ key, select the desired group of text layers;
3. Make changes or choose a new font;
4. Update the Text Styles to apply changes to the entire system.

4. Components

Components are the primary building blocks, made with particular attention to instances reusability, and readability of overrides, with no irrelevant emojis or descriptions — only the usable stuff.

All components are designed in 1x resolution to seamlessly translate any design elements, such as text styles, icons, dividers, or spacings between Android and iOS symbols.

Plaster utilizes a classic Hard 8pt grid for Android and the so-called Soft 8pt grid for iOS. Having a single grid system allows to compute paddings/margins efficiently, and predictably scale design to larger screens.

Now to the direct use. We recommend using methods described below, as they allow to use components without unlinking them from the primary libraries while keeping them in sync with the Light or Dark themes.

There are two major ways to use components in other documents:

Manually

1. Add Light or Dark theme as a library;
2. Start a new file, and go to Insert ➝ Symbol;
3. Select the needed item from the list, and slam it to the canvas.

Using Runner

1. Hit ⌘+/to launch Runner;
2. On Insert tab, use the keyboard to search and filter the list;
3. Navigate with arrow keys to the needed component;
4. Press
   to insert it.

5. Naming and Scaling

Plaster uses the following set of principles for naming symbols, letting to scale their number and provide a clear understanding of their functional meaning.

1. When coming up with a new name for a component or category — use only naming provided under the official guidelines from Material.io and HIG. Don’t reinvent the wheel.
2. Any component name should always represent its contents. This approach wins by eliminating confusion, making it easier for others, also yourself to understand/remember its functional meaning.
   Ex. ../Lists/Body1+Icon, ../Snackbars/Subheader+Button.
3. To maintain a clear symbol list, always structure components in the same way. Divide their names into the following levels:

4. For more consistent quantitative indicators, for icons, text, or other elements. Use the X prefix to avoid clutter and simplify component reading. Ex. ../Icon x3 + Subheader x3.

That’s all. Still, have questions? We will be happy to help you out. Feel free to shoot an email to hello@buninux.com.

Before you leave

• More news and updates on Twitter and Dribbble.
• Don’t have a Plaster license yet, visit https://plasterdesignsystem.com/.