Simply download .zip file from this link:
Download plugin
Unzip the file and double click the file inside it. After that you will get notified about every new version when you start Sketch.
Note: You need at least v.50 of the Sketch
- Sketch v.50 and higher
- Node and npm
When you want to make some changes on the plugin, clone this repo and follow these steps:
npm install
npm run link
- this will build the plugin and link it to your Sketch installation_
After that you can just:
npm run build
- this will build the pluginnpm run watch
- this will watch for changes and build the plugin on save
Debugging is little cumbersome. You don't have access to Chrome Dev Tools and if you do something bad, Sketch usually crashes.
But you still can log some things out when needed.
You have two ways to do it.
- Download Sketch Developer Tools. It is basically another plugin for sketch. It has console where you can send some logs with
log()
orconsole.log()
- Use default Mac Console App. Filter results like this:
- Write
Sketch
and press return. Then change it's type toprocess
- Write
Sketch
and press return again. Then change this type tolibrary
- Save this filter for later so you don't have to search for it again
The default console app is little messy tho. You can't get all the data you need when you for example log some Sketch object. But for some small logs it's ok.
Tips
When Sketch crashes it goes into safe mode and disables all plugins on next launch. To disable this feature for convenience use this:
defaults write com.bohemiancoding.sketch3 disableAutomaticSafeMode true
Sometimes you might want to execute a function on some Sketch action. To monitor them all to find the right one do this:
defaults write com.bohemiancoding.sketch3 actionWildcardsAllowed -bool YES
- then in manifest.json:
{ ... "handlers": { "actions": { "*": "onActionHandler" } } ... }
It has some toll on performance so disable it after you find the action you need.
Notes on architecture
Once you open the plugin, the main.js
function gets executed.
It opens a webview and waits for other functions that are called in the web-view where main React app is running.
You can therefore think about it like src/..
is your backend and resources/..
is your frontend.
Sketch checks for new version of the plugin each time it starts.
It checks master branch of the url specified in package.json
.
Sketch looks for changes in .appcast.xml
file and if there is a new version it pulls it from url specified there.
It only accepts .zip
file that contains the builded plugin.
So to release new version follow these steps:
- clean git tree
- merge all to dev
- change the version number in
package.json
and in thepublish
script - npm prepare publish
- commit and push changes
- npm run publish
- merge to master