Sketch plugin

It was easy to create Sketch plugin.

Install npm

$ brew install nodebrew
$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary stable
$ nodebrew ls

$ nodebrew use v14.15.3
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

Install skpm

$ npm install -g skpm

Create plugin

$ skpm create my-plugin

Change my-command.js like this

Install skpm/fs

$ npm install @skpm/fs

Change "/path/to/file/test.josn”

Run script with

$ npm run build

You can file my-command menu in Sketch App.

You can find json file at "/path/to/file/test.json"

This json have information of each items.

$ cat test.json | jq . | head -n 30
{
  "_class": "group",
  "do_objectID": "DB389F30-81F1-4D1B-B9C8-2435BF90C2B3",
  "booleanOperation": 0,
  "isFixedToViewport": false,
  "isFlippedHorizontal": false,
  "isFlippedVertical": false,
  "isLocked": false,
  "isVisible": true,
  "layerListExpandedType": 0,
  "name": "One",
  "nameIsFixed": true,
  "resizingConstraint": 63,
  "resizingType": 0,
  "rotation": 0,
  "shouldBreakMaskChain": false,
  "exportOptions": {
    "_class": "exportOptions",
    "includedLayerIds": [],
    "layerOptions": 0,
    "shouldTrim": false,
    "exportFormats": []
  },
  "frame": {
    "_class": "rect",
    "constrainProportions": false,
    "height": 850,
    "width": 375,
    "x": -1851,
    "y": -424

Of course we can access these information with javascript api.

API Reference

Can we convert Sketch file to UI file of application like Android App.

I think it is difficult now.

When we create an application, we usually use ConstraintLayout, FlexboxLayout, etc. to support various screen sizes.

To make layout file from Sketch App file, we need to extract information of relationship of each items .

But Sketch file have not any information of relationship to parent.
It have not any information of the item next to it.

Anima made a plugin to generate HTML code from Sketch.
It seems that the HTML code include flexbox.

Introducing Auto-Flexbox

However, it seems to be an estimation rather than a perfect conversion.

I still have the impression that it is difficult to incorporate automatic generation of UI components into the workflow.