Getting started for Design System Admins

If you maintain a Design System / symbol library for your team and you'd like to use the ☁️Design System plugin, it's easy to get started. You can check out the example library or follow the instructions below:

Instructions

1. Distribute your Design System / symbols as one or more Sketch libraries. The Stickers plugin builds an index of stickers for each installed library, rebuilding that index for any library that's changed when the plugin is reloaded.

2. Create text layer(s) anywhere in your library file with content in the following format to define the sticker "sections" (categories, essentially):

   !StickerLibrary
   title: My awesome library <-- optional
   subtitle: Some subtitle <-- optional
   
   !StickerSection @Section1
   title: First section
   description: 'A description' <-- Basic HTML markups allowed
   
   !StickerSection @Section1.SubSection
   title: Sub-section
   backgroundEach: '#fff'
   
   !StickerSection @Section2
   title: Another section
   description: '
     <b>Add multi line message</b>
     <br/>
     This one's got cool stickers in it.
     <ul>
       <li>You can</li>
       <li>add</li>
       <li>Lists, too!</li>
     </ul>
   '
   links:
   - title: See the spec
   - url: https://path.to/spec

   More details on the format below.

3. Turn any layer into a 'sticker' by appending the section ID to the layer name. Section IDs look like @Section1 or @Section1.SubSection, and any layer can be a sticker, be it a symbol instance, or a group, or even an entire artboard. Note that section IDs can only have letters and numbers, so avoid any special characters like semicolons, spaces, ampersands, etc.

   For example, to turn an artboard named Mobile form template into a sticker in the section Page templates > Mobile with ID @PageTemplates.Mobile, rename the artboard to Mobile form template @PageTemplates.Mobile.

Metadata text layer syntax

The basic format for sticker metadata is:

!StickerSection @<Section ID>
<YAML code describing this section>

!StickerSection @<Section ID>
<YAML code describing this section>
...

Here are the currently supported sticker section properties (keys):

Property	Type	Description
title	string	The title of the section.
description	string	A longer description of the section. Only works for root-level sections (i.e. works for @Section but not for @Section.SubSection).
background	string	A CSS color like #fff. If present, gives the entire section some extra padding, a border, and the given background color. Only works for sub-sections (e.g. @Section.SubSection).
backgroundEach	string	Like background, but sets a background and pads stickers individually.
hideNames	boolean	Default false. If true, hides sticker names for stickers directly in this section.
links	array	An array of links to show below the section description, where each link is an object with a title and url. Only works for root sections (e.g. @Section).
layout	string	An optional layout type for this section. Available options are flow for root sections and row for sub-sections.

Custom icons

To add a custom library icon, add @@icon to the name of any square-size layer in your file, e.g. My custom icon @@icon.

---

Huge thanks to Roman Nurik for creating Stickers.