/My-Sketch-Plugins

Getting Started with Sketch

##Overview

The Sketch App by Bohemian Coding is a professional vector graphics app with a beautiful interface and powerful tools.

As any newborn, it will take some time to get to a maturity level that we all expect it to get as a professional design application.

One of the great advantages of Sketch, like Sublime Text, it has the ability to install open-source plugins written by great people that advocates posting their code on GitHub.

##The goal here is..

  1. To get you started with Sketch by leading you to some quick tutorials,
  2. Most importantly, setup a quick workflow where you will be able to install plugins in Sketch by - simply - clicking on the Clone in Desktop button on Github.

I'm aiming this article on designers that are not so familiar with GitHub's workflow. Hopefully we can find ways to get designers using GitHub in a collaboratively manner.

##Quick Requirements Mac Only - First off. Windows users, at this point, the Sketch App is only available for Mac.

Get a GitHub Account - Other than having the Sketch app installed, you will need to have a github account if you don't already have one.

GitHub App for Mac - Download the GitHub app for Mac and make sure you move it to your Applications folder. We will use it to create the plugin repository in your machine.

##Learning Sketch I have have watched way too many tutorial videos about this app and - by far - here's the most comprehensive walkthrough video about the Sketch app by JawnMercenary - quick and effective.

Other resources to get you using Sketch like a pro:

##Installing Plugins ###The conventional way is:

  1. to find the plugin folder for the Sketch app;
  2. then copy the downloaded plugin folder into it.

This involves downloading a zip file, exploding this file, moving the folder to a hidden Library folder in your Mac - each time you need to install a plugin - which for some folks may be complicated.

###The quickest way:

  1. Click on the "Clone in Desktop" button on GitHub - and voilá!

You will need get a few things setup once and you will be good to go anytime you need to install a new plugin in the future.

###Step 1 - Finding Sketch's Plugins folder

#####Go to Folder... Open Finder, the navigate to Go > Go to Folder...

Got to Folder

#####Populate folder field Enter the following path and hit the Go button

~/Library/Containers/com.bohemiancoding.sketch/Data/Library/Application\ Support/sketch/Plugins

#####Create new folder Create a new folder - inside Plugins - called My Sketch Plugins, as follows:

Create new folder

#####Create a Favorites shortcut Drag this new folder onto the Favorites section of your Sidebar. This will help you creating the repository in the GitHub app:

Creating a shortcut

####From this point on, I'm assuming that:

  1. You have already installed the GitHub app
  2. AND have signed into your GitHub account under Preferences Cmd + ,

###Step 2 - Create a New Repository Hit Cmd + N or go to File > New Repository... to create a New Repository

Create New Repository

The following dialog will popup, add the Name, Description as follows.

Choose path

Important step ahead

For the Local Path you will need to select the path carefully:

  1. Go to your Favorite path "My Sketch Plugins"
  2. Then choose its PARENT FOLDER Plugins.

Choose the parent folder PLUGIN

#####Push to GitHub option Make sure to check the Push to GitHub option, this indicates that you will have a backup on GitHub.

#####Create Repository button Then hit the Create Repository button.

#####Repository already exists? Since we had already created a folder with the same name, GH app will need to confirm that you want to use the same folder. Hit the Add button and go on.

Repository already exists

Repository created

You should see an empty state screen for your new repository on GitHub.

If you go into your GitHub account you will see the new repository under the Repositories tab

New repo on github.com

###Step 3 - Find some cool plugins Since plugins for Sketch are written in JavaScript, you will find plugins anywhere on the web, but most likely, the large majority will be on GitHub. One particular resource on GitHub is bomberstudios. They have compiled a great list of Sketch plugins into the following Gist:

####https://gist.github.com/bomberstudios/7694497

Thanks to the folks at Bomber Studios!

###Step 4 - Cloning a plugin into your repository #####Lorem Ipsum plugin As a simple example, I will install the Lorem Ipsum Plugin for Sketch by brandonbeecroft

#####Clone in Desktop button Once in the plugin's main repository page, simply click on the Clone in Desktop button.

This will launch the GitHub Desktop App, you may be alerted by your browser that the link is trying to launch your desktop application, you may accept it.

Click on the Clone in Desktop button

###Step 5 - Select your Favorite shortcut

The GitHub application will prompt you to select a location to place your cloned folder.

#####Choose the "My Sketch Plugins" folder from your favorite sidebar

as follows then hit the Clone button.

Select Clone location

###Step 6 - Test the Plugin

#####Let's test the installed plugin on Sketch... Go to your Sketch app, select the Text tool set the text frame area on the artboard, then check out the Plugin menu, as illustrated below.

LoremIpsumTest

###Step 7 - Push your changes to GitHub

After all this work, you will appreciate the power of code sharing a bit more. I'd recommend you committing your changes to GitHub for a couple of reasons:

  1. You will have a backup of your plugins;
  2. If by any chance you install the Sketch app in a new machine, you can always download all your plugin collection very quickly;
  3. You collaborate your plugins with your team members;

#####Go to your GitHub Desktop application

Once you go to your repositories, you will see the plugins you have installed on your main list of repositories.

#####Select the My Sketch Plugins repository All of the plugins you have installed is located inside in your My Sketch Plugins repository.

#####Select the Changes tab The Changes tab on the left side will display all the changes that have occurred within this repo.

Select Changes

  1. Enable the Commit & Sync option if it's grey - this should be green.
  2. Enter a Summary and Description
  3. Check the Select All checkbox
  4. then hit the Commit & Sync button to push your changes to the GitHub server;

#####Cheers! Your team members should now be able to see the great plugins you have installed.

#Conclusion I know I could have created a single-level plugins folder, but I simply didn't want to either mess with the application's plugins folder permissions for obvious reasons nor have a repository on my Github called "Plugins"

With this structure, you should be able to keep things organized in a way that you can share your plugin repository with others.

Please drop me a line or do a pull-request if you would like to expand this forward.

-end