Git Product home page Git Product logo

sleuth-sketch's Introduction

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

  1. Nodejs - This tool is built on Node.
  2. Sketch - You need Sketch installed to process the files
  3. 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

  1. Download this repo and extract it. (or fork it if you know what you're doing)
  2. In Finder, locate where you extracted this repo
  3. Right click on the folder
  4. 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

  1. Open EXAMPLE.env in a code editor (we like VSCode)
  2. Log into abstract.com from a web browser
  3. Select the org you want from the dropdown
  4. Copy the id from your address bar... app.abstract.com/organizations/ [THIS IS YOUR ORG ID] /projects
  5. Paste it into EXAMPLE.env
  6. Get an Abstract API token
  7. Paste it into EXAMPLE.env ** DO NOT PUBLISH YOUR API TOKEN TO A PUBLIC REPO**
  8. 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

Copyright (c) 2019-present, Keap

sleuth-sketch's People

Contributors

seanriceaz avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.