Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Legend plugin for sketch app.

download me


In some companies UX designers make an effort to align with the company's UX standard by creating Sketch symbols that are highly detailed. Some companies even have components library that the developer use and the UX designer wish to give them the most detailed design. After exporting to Zeplin, most of the data is lost.

This plugin provides indexing of Symbols in your artboard with a detailed legend.

It creates a text symbol with the Symbol's index above the Symbol and it adds the definition of the symbol as well as it's overrides if there are any below your artboard. Note that it will add an override only if it was overriden on the SymbolInstance.

Feature requests and pull requests are more than welcome :)


command+shift+y - add legends to selected artboards

command+shift+d - clean up legends for selected artboards

command+shift+ctrl+y - add legends to all artboards

command+shift+ctrl+d - clean up legends for all artboards

How to use

  1. Select artboards for export
  2. cmd+shift+y - add legends for selected artboards
  3. cmd+ctrl+e - export selected artboards to zeplin
  4. cmd+shift+d - cleanup legends for selected artboards


legend demo


# clone the repo
git clone
cd sketch-symbol-legend
# install packages, it will add the plugin to the Sketch app
npm install --no-lockfile

Logs output

npm run sketch:log

Important links:



The following command will create a release with zipped artifact in this repository. That's why you need to generate Github access token.

You need to specify a version bump, it can be one of the following: <new-version> | major | minor | patch | premajor | preminor | prepatch | prerelease.

GITHUB_ACCESS_TOKEN=<token> SKETCH_RELEASE=<version-bump> npm run sketch:release

Create an Adapter

  • The adapter is a function that gets the symbol master and the overriden values, and returns the props that should be shown in the legend
const adapter = ({symbolMaster, overridedValues}) => {
    // your logic
    return {
      //wsr props to show in the legend

Example -

Note that the map key is the component name.

Notes (tips, caveats, issues)

  • Some newer ES features don't work in Mac OS <= Sierra (e.g. spread operator on objects)
  • Plugin works in Sierra and High Sierra
  • Object.class() result maps 1-to-1 to ObjectiveC headers from Sketch. These are extremely helpful for debugging and finding all the possible methods/properties and their signatures.
  • You can run your code async, consider the following snippet from skpm airbnb/react-sketchapp#97
  • Most of collections support forEach, but not other native Array methods, consider casting to array with Array.from before doing map/reduce/filter/includes etc.