sketch-symbol-legend

Legend plugin for sketch app.

Motivation

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 :)

Shortcuts

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

Select artboards for export
cmd+shift+y - add legends for selected artboards
cmd+ctrl+e - export selected artboards to zeplin
cmd+shift+d - cleanup legends for selected artboards

Demo

Installation

# clone the repo
git clone git@github.com:wix-incubator/sketch-symbol-legend.git
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:

Debugging:

Release

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

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 - https://github.com/wix-incubator/sketch-symbol-legend/blob/add-adapter-logic/Legend.sketchplugin/Contents/Sketch/legendifyArtboard/adapters/loader.js

* After creating the adapter, you should add it to the components map in the `index.js` file -  https://github.com/wix-incubator/sketch-symbol-legend/blob/add-adapter-logic/Legend.sketchplugin/Contents/Sketch/legendifyArtboard/adapters/index.js

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.
  https://github.com/abynim/Sketch-Headers/blob/master/Headers/MSSymbolMaster.h
* You can run your code async, consider the following snippet from `skpm`
  https://github.com/airbnb/react-sketchapp/issues/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.

wix-incubator / sketch-symbol-legend

readme