Sleuth for Sketch

Sleuth is an open source tool that shows you Sketch library usage per file across your projects.

This is great for getting an idea about how well your design system sketch ui kit is being used, though it's not perfect as using any external library will generate a positive result on any layer or symbol.

Here's a report built from the sample directory

Currently, this tool looks at

Symbols
Layer styles
Text styles

Prerequisites

Nodejs - This tool is built on Node.
Sketch - You need Sketch installed to process the files
Abstract (optional, but recommended) - If your team uses Abstract, you can automatically scan all of your team's projects. Make sure your Abstract projects are all synced before running.

Getting started

Download this repo and extract it. (or fork it if you know what you're doing)
In Finder, locate where you extracted this repo
Right click on the folder
Select Services > New Terminal at Folder

The terminal window will open. This is where you will type any of the commands you need below.

Install dependencies

npm install

Using Abstract

Generate report from Abstract

npm run report -- abstract

This will download all sketch files from all active projects to a temporary directory and scan them to build reports.

Setting up Abstract

Open EXAMPLE.env in a code editor (we like VSCode)
Log into abstract.com from a web browser
Select the org you want from the dropdown
Copy the id from your address bar... app.abstract.com/organizations/ [THIS IS YOUR ORG ID] /projects
Paste it into EXAMPLE.env
Get an Abstract API token
Paste it into EXAMPLE.env ** DO NOT PUBLISH YOUR API TOKEN TO A PUBLIC REPO**
Rename EXAMPLE.env to .env

Generate report from a directory

npm run report -- ./sample #Replace ./sample with the directory of your sketch project files

Copy all the sketch files you want to scan into a directory with this folder structure. There is an example in this repo in /sample

Sketch project master folder
    |- PROJECT_NAME_1
    |   |- sketch_file1.sketch
    |   |- sketch_file2.sketch
    |- SECOND_PROJECT
        |- library.sketch
        |- second file.sketch
...

Start a dev server to display the report

npm run dev

Build a Vue app with the report for distribution elsewhere

npm run build

Contributing

Please read our Contribution Guidelines before making a pull request.

License

MIT

iamfnd/sleuth-sketch