Skribbble

A collection of Sketch plugins to retrieve Dribbble shots and info. It's using a port of Jribbble that works with JSTalk and JSCocoa Jribbble Cocoa to make requests to the Dribbble API.

What Does It Do?

There are currently two plugins both that create a grid of Dribbble shots in Sketch. "Player Shots Grid" creates a grid of shots from a given user. "Shots Grid" creates a grid of shots from one of the available lists; Debuts, Everyone, or Popular.

Each has options for:

• The shot size; Teaser or Full Size*
• The number of columns and rows
• The margin between each shot image

*Even though Dribbble allows uploads up to 800x600px the plugin restricts shots to 400x300px to make sure a proper grid can be created.

Installation

There are two different ways to install Skribbble. Official Sketch Plugin installation documentation can be found in the plugin docs.

Git clone (best way to go)

• Using a command line app (Terminal, iTerm, etc) navigate to the Sketch Plugins directory. This is different depending on your set up. If you're unsure, open Sketch and go to the Plugins menu > Reveal Plugins Folder
• Once you're in the Plugins directory git clone git@github.com:tylergaw/skribbble.git or your fork.
• You can find the plugins in the Plugins Menu > skribbble

Zip download

• If you're reading this on GitHub, there should be a Download Zip button to the right of this text. Download the zip file.
• Open your Sketch Plugins folder by going to the Plugins menu > Reveal Plugins Folder
• Unzip the Skribbble zip file. Place the entire folder in the Sketch plugins folder
• You can change the name of that folder to anything you want.
• You can find the plugins in the Plugins Menu > skribbble (or the name you gave it)

Usage

• Open a new or existing Sketch document
• Plugins > Menu > Skribbble > Player Shots Grid or Shots Grid
• If Player Shots, be sure to enter a Player username or id
• Update the options to your liking, hit OK
• The grid should be created on the canvas

If you want the grid created on a specific artboard or within a group select the artboard or group before running the plugin.

Sketch Requirements

You'll need the latest release of Sketch 3, version 3.0.2. It's in the App Store. This version is needed because I'm making use of features that are available now that they've switched from JSTalk to CocoaScript. Mainly the COSAlertWindow class.

Writing Your Own Plugins?

I used this as a way to learn more about writing Sketch Plugins. If you're doing the same thing, cool! Best way to learn is by looking at other peoples' stuff, that's what I did.

Most of the goods are located in skribbble-utils.js I tried to add comments to sections of the code that I thought may not be immediately clear.