Get Started with Plaster
Tags: UI, UX, Design, Sketch, Tutorial

Guide contents:

Installation Changing Colors Changing Fonts Components 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:

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

3. Changing Fonts

To change the typeface or an individual text style:

Navigate to the Get Started page; Holding ⌘ key, select the desired group of text layers; Make changes or choose a new font; 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

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

Using Runner

Hit ⌘+/to launch Runner; On Insert tab, use the keyboard to search and filter the list; Navigate with arrow keys to the needed component; 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.

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. 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 . To maintain a clear symbol list, always structure components in the same way. Divide their names into the following levels: