design-coverage v1.0.0
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.
... Or you can use Figma, but you still need Node.
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
Using Figma
Generate report from Figma
npm run report -- figma
This will download all sketch files from all active projects to a temporary directory and scan them to build reports.
Setting up Figma
- Open
EXAMPLE.env
in a code editor (we like VSCode) - Log into figma from a web browser
- Select the team you want to track (you can track multiple, but start with one)
- Copy the team id from your address bar...
.../team/ [THIS IS YOUR TEAM ID] /team-name
- Paste it into
EXAMPLE.env
- Repeat the process with each team you want to track, inserting a comma (,) between each ID - No spaces!
- Get a Figma Personal Token from your user profile
- 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
Copyright (c) 2019-present, Keap
4 years ago