New in Sketch 55

Released 21 May, 2019 – read release notes

Changes

URL Scheme to launch a plugin to a specific command

GitHub pull request

You can use the new URL scheme to target a particular command of your plugin:

sketch://plugin/my.plugin.identifier/my.command.identifier

You can also pass in params. Note that this is the second URL scheme. The first was to open a particular document with sketch://path/to/file.sketch.

The action HandleURL will be triggerend when it is opened with the URL scheme above, including an action context containing three keys:

url

The NSURL that triggered this action.

path

A string containing everything after sketch://plugin, e.g. /my.plugin.identifier/my.command.identifier.

query

An object containing the query of the URL, e.g. for sketch://plugin/my.plugin.identifier/my.command.identifier?foo=bar&baz=qux, query will be:

{
  foo: 'bar',
  baz: 'qux'
}

Usage

You’ll need to have manifest file setup properly to be able to trigger a function on the HandleURL Action:

{
  "identifier": "com.sketchapp.examples.log-message",
  "compatibleVersion": 3,
  "bundleVersion": 1,
  "icon": "icon.png",
  "commands": [
    {
      "name": "Log Message",
      "identifier": "log-message",
      "script": "./log-message.js",
      "handlers": {
        "actions": {
          "HandleURL": "handleURL"
        }
      }
    }
  ]
}

In JavaScript, implement the action handler as follows so that when the user navigates to the url sketch://plugin/com.sketchapp.examples.log-message/log-message?foo=Hello%20World a message will appear in the app with the text Hello World.

const sketch = require('sketch')

function handleURL(context) {
  let query = context.actionContext.query
  sketch.UI.message(query.foo)
}

Note that the user in this case will need to have the plugin installed and a document already open. You can also make a new document for the user like this:

const sketch = require('sketch')
const Document = sketch.Document
const currentDocument = sketch.getSelectedDocument()

function handleURL(context) {
  let query = context.actionContext.query
  if (currentDocument) {
    sketch.UI.message(query.foo)
  } else {
    let document = new Document()
    sketch.UI.message(query.foo)
  }
}

The full plugin example can be found here.

Add isSelected method on a CurvePoint

GitHub pull request

In case the user is currently editing a path, you can check if a curve point is selected using the curvePoint.isSelected() method.

Usage

If the user is selecting a point of a shape you can check it with:

shape.points[0].isSelected()

Here is an example for how you might use it in practice. Create and select a rectangle in your Sketch document.

let sketch = require('sketch')
let document = sketch.getSelectedDocument()
let selection = document.selectedLayers.layers[0]

let isAnyPointSelected = false
let pointSelectionArray = []

selection.points.forEach(point => {
  if (point.isSelected()) {
    isAnyPointSelected = true
    pointSelectionArray.push(true)
  } else {
    pointSelectionArray.push(false)
  }
})

console.log(isAnyPointSelected)
// true

console.log(pointSelectionArray)
// [true, true, false, false]

getSelectedDocument() previously threw an error without an open document, now returns undefined instead

GitHub pull request

Babel would tranform [nativeDocument] = NSApplication.sharedApplication().orderedDocuments() assuming that it’s a proper array but it’s not, it’s an NSArray so it would throw an error.

This is a great addition with the URL example from earlier. We can confidently check if there is a current document open or not.

Usage

let sketch = require('sketch')
let document = sketch.getSelectedDocument()

if (document) {
  // has open document
}

Improve consistency by deprecating Fill.fill in favor of Fill.fillType

GitHub pull request

This was done to match Border.fileType and other types.

Usage

Setting a fill is more consistent to setting a border.

Old
const style = new Style({
  fills: [{ color: '#1234', fill: Style.FillType.Color }],
})
New
const style = new Style({
  fills: [{ color: '#123456', fillType: Style.FillType.Color }],
})

Some better logging of the prototype of wrapped objects

GitHub pull request

There was a bug in the util.inspect algorithm (which console uses) that makes it think the prototype of a wrapped object is a wrapped object and uses the code path for wrapped object. This has been fixed for better logging output.

See something wrong or incomplete? Improve this page.