wix-incubator / sketch-symbol-legend Goto Github PK

View Code? Open in Web Editor NEW

8.0 3.0 2.0 7.09 MB

A Legend for all your Symbols

License: MIT License

JavaScript 100.00%

sketch-plugin components

sketch-symbol-legend's Introduction

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

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 [email protected]: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 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.

sketch-symbol-legend's People

Contributors

Stargazers

Watchers

sketch-symbol-legend's Issues

OSS the package

https://github.com/wix/ManageOSS_A2Z

Generate Legend on the right instead of bottom

Legend should be generated on the right of the artboard.
Remaining artboards should not be overlapped neither from the right, nor bottom.

Group the Badge rectangle and the Index text as one drageable element

Update documentation with short gifs

Badges are unreachable

Legend group is bottom most element making it impossible to select/drag badges using the mouse.

Artboard size is reduced too much after deleting not totally visible legend

create artboard
add a button
generate legend
leave the legend (don't delete it), shrink artboard to only see the button
clean up the legend
artboard is shrunk.

Why does it happen?
Once legend is not visible, we still delete it. On deletion we shrink artboard by the legend height, should shrink by legend visible height (could be partly visible).

Composite Adapters

We found that in case of wsr component inside wsr component (for example - Card contains a TextLink), the overrides object composites of nested objects which represent each component.
For example - following is the structure of overrides of Card component (the first Id is related to the TextLink, the second is related to the Card itself).

overrides =     {
        **"72E2CF96-E1DD-43B8-B7FF-B53511781C30"** =         {
            "5C84A33A-ED74-43C1-BD5E-B6EB42249257" =             {
                "ED28893F-E896-4AD3-8335-43EBEF821445" =                 {
                    "B653C2C3-326A-4AF1-9D8F-E80757F02F2D" =                     {
                        symbolID = "761C79DA-8EBB-4E55-A90D-865B5F739A24";
                    };
                    symbolID = "44F57B12-1895-4EEC-9735-AF912BE73239";
                };
                symbolID = "D5203370-CECA-4DBF-8CB1-98CA3FFDBFD5";
            };
            symbolID = "";
        };
        **"FD73D679-C4B7-4AD0-8CAE-A586C6F9645A"** =         {
            symbolID = "";
        };
    };
}

The problem is that the TextLink Id doesn’t exist in the symbols of the document (document.documentData().allSymbols())

So - if we will find a way to add it, or find where is it stored - we can pass the override object to its adapter (with some changes in the flow - remove the flattening of all the overridden props).

Better documentation of how to release a new version
Automate stuff in the release process

Badge style

Text color - white
border - none

Icon symbol is not found in symbolDictionary

create artboard
import 06 Navigation / 6.0 Business Manager symbol
run the plugin
icon is not listed among defaults

Expected - icon listed among defaults.

Icon is not in symbolDictionary