Skip to content
A new way to browse your symbols. Make the most of your Design System by bringing symbols and UI Sticker sheet together.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
art Add files via upload Jun 4, 2019
assets fixed drag and drop Jun 10, 2019
examples fixed drag and drop Jun 10, 2019
src bug fixes Jun 10, 2019
symbol-browser.sketchplugin/Contents
web fixed drag and drop Jun 10, 2019
.gitignore Create .gitignore May 17, 2019
LICENSE Initial commit May 17, 2019
README.md
appcast.xml fixed drag and drop Jun 10, 2019
package-lock.json
package.json fixed drag and drop Jun 10, 2019
skpm-build-with-child.js initial commit May 26, 2019

README.md

Sketch Symbol Browser

Sketch Symbol Browser

Better way to browse your symbols. Make the most of your Design System by bringing symbols and UI Sticker sheet together.

This plugin lets you..

  • Browse Sketch symbols
  • Drag-N-Drop UI Kit / Stickers
  • Add documentation to your Sketch Library
  • New Share instances of the Symbol
  • New Works offline
Visit plugin website for more.

GitHub Release Github All Releases GitHub License

Installation Guide

  • ⬇️Download the latest release of the plugin
  • Un-zip
  • Double-click on the symbol-browser.sketchplugin

Important links


See it in action

Symbol Browser Features image


FAQ


What is a Sticker?

A sticker is nothing but a specially tagged layer item.

This can be shape/text layer, group, artboard or even symbol instance. You can use Sticker as a component of your UI Kit which you repeatedly use and want to save time re-creating it.

Check a syntax cheatsheet for Stickers to explore what all you can do!

How do I add my custom stickers?

To add any layer as your Sticker, you just have to "specially" tag it. Take look at below image to see how you can tag an artboard, symbol instances and any layer or group.

Sketch Symbol Browser

This tagging is a suffix which looks like this


To tag a layer with Main Category
Layer_Name @MyStickers

OR

To tag a layer under Sub Category
Layer_Name @MyStickers.InfoCards


You can tag multiple layers with the same category.

Note: Here MyStickers and InfoCards are the defined categories.

Know more about "How to define categories?" in next question.

How to define Sticker categories?

Sticker categories are the logical sections you create to better distribute and logically group Stickers. You can currently have 2 levels of category.

Sketch Symbol Browser
#To define Parent Category

!StickerSection @Section1                         # categoryId
title: My Stickers                                # Optional, if not provided uses categoryId, provides readable name
description: 'A description'                      # Optional, Supports basic HTML tags
#To define Sub Category

!StickerSection @Section1.SubSection              # append subCatId to categoryId with .
title: Info Cards                                 # Optional, if not provided uses SubCatId
description: 'A description'                      # Optional, Supports basic HTML tags

Check out Cheatsheet for Stickers for more details.

Why is it taking so long for indexing?

Time required to index your Sketch Library is directly proportional to the size and number of symbols it has. But don't worry! This is a one time activity.

If you have suggestions on how can this be optimized, feel free to raise a pull request.

My Library symbol update is not reflecting in Symbol Browser!

The plugin checks for the Sketch Library modification time and keeps indexing the change when you Open a new document or add a new Sketch Library.

But in case you want to force plugin to index again, you can go to plugin menu and click 🧹 Clear Symbol Index to remove cached symbols. So after this when you one the Symbol Browser, it will re-index Sketch Libraries.

🧹 Clear Symbol Index

How is this plugin different from 'Stickers'?

Symbol Browser is a forked version of Roman Nurik's Sticker project. The goal of this sketch plugin is to provide additional features such as showing Sketch Library symbols along with the Stickers you have tagged.



Contributing

Lots of room for improvement, let's build it together. Report an issue or request for an exciting feature.

Credits and Acknowledgement


About Author

Symbol Browser is developed by Pratik Shah.

You can’t perform that action at this time.