Getting started with Symbols Browser
If you are getting frustrated with the default dropdowns way of Sketch to browse your Sketch Library then symbols browser is the plugin for you.
--- OR ---
If you maintain a Design System or Sketch symbol library for your team and want to share more than just symbols you'd like to use the Symbol Browser which allows you to share stickers / UI Kit along with Symbols as a part of your Sketch Library. It's easy to get started.
You can check out the Example Sketch library or follow the instructions below:
You can install your own Sketch Library or use this Example Sketch library. Learn more about Sketch Libraries here.
Symbol Browser plugin will by default show all the symbols present in each installed library. To Browse simply hit cmd + shift + d or select 🔍View Design System from the plugin menu.
Under the hood, symbol browser builds an index of those symbols when you run 🔍View Design System for the first time and after that, the plugin will keep track of the modifications done in the Libraries.
Symbol Browser lets you share Artboards, Symbol Instances, any Group of the layer along with Symbols from your Sketch Library.
What is a Sticker?
Sticker is a shareable layer from your Sketch Library.
- With Stickers you will be able to share symbol instances which preserves your text and layer overrides.
- You can also share illustrations which is a group of layers.
- Or entire login page which is a group of symbol instances, background shapes and text layers and virtually all the layers supported by Sketch.
Check below image to see what can be shared through Sketch Library.
Here is a step-by-step tutorial on creating custom groups and adding Stickers to them.
Or you can check out the Example Sketch library to see what's possible with Symbol Browser.
- Getting started with Symbols Browser
- Create custom sections for Symbols
- Understanding Metadata syntax
- Sample Metadata code