Scribe

A tool to generate code from Sketch designs

Installation

1. npm install
2. In the project directory, copy config.js.template to config.js and set the projectRoot.
3. npm run watch

For more, read Using skpm

How to use

1. Open a Sketch file.
2. In Sketch, go to Plugin -> Scribe -> Generate Component.
3. All component files will be generated in the project directory's public/components folder. To preview the components, run npm run serve in a separate terminal window and browse to localhost:3000.

Sketch Rules

Scribe uses the following naming conventions to process specific Sketch layers:

• SCBackground: Specifies that a rectangle is the background of the component
• .svg: If a single shape or a layer group has an extension of .svg (e.g. SomeShapeGroup.svg), the tool will generate the image
• SCList: Use to denote a list. A name can be given to a list by wrapping the list inside of a group. Items inside SCList should only be groups named with a prefix of SCRow. Anything else will be ignored.
• SCRow: Used to denote a row inside a list. You can give the row a name by appending it like SCRow_myRow. The position of the row inside the list determines the index of the row.

Shapes that don’t follow the rules above will be ignored.

In addition, anything that’s prefixed with a double underscore (e.g. __ignoreBg) will be ignored.

Development

During development, you'll want to communicate with Sketch APIs. Since Sketch is an Objective-c app, we can retrieve header files for all of their classes. Use this as reference to find the APIs that you need. Sketch class-dump.

Any class that as a MS prefix is a Sketch object ex. MSArtboard. Any object that's prefixed as NS and CG are Apple objects. Ex. NSDocument and CGRect. Google Apple classes to find relevant documentation for them.

To view output for debugging, open the system console by going to Applications -> Utilities -> Console and observe the logs generated by Sketch.