A Legend for all your Symbols
Clone or download
Lior Belinsky Lior Belinsky
Latest commit 8004938 May 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Legend.sketchplugin/Contents/Sketch Updated manifest & readme download link to version 2.0.0 May 23, 2018
scripts Rename prepublish script as it's reserved Apr 26, 2018
.appcast.xml Update .appcast with new tag May 23, 2018
.eslintrc.yml Add eslint to project Apr 23, 2018
.gitattributes added gif and ability to not download it Mar 11, 2018
.gitignore
.prettierrc never reduce artboard dimensions (#40) Apr 26, 2018
LICENSE add licence file Apr 16, 2018
LegendPlugin.gif add new demo gif Apr 5, 2018
README.md
package.json Publish 2.0.0 release 🚀 May 23, 2018

README.md

sketch-symbol-legend

Legend plugin for sketch app.

download me

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

  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

Demo

legend 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.

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