html-sketchapp

HTML to Sketch export solution customized by Servicetitan's team. Converts each HTML element (node) into one ore more Sketch layers. Stores these layers in asketch.json files (almost-sketch format).

Changes list

Added custom attributes for HTML elements to provide control over internal features of Sketch:

1. data-sketch-constraints="31" to set resizing constrants, more info here
2. data-sketch-rotation="18" to control layer's rotation, similar to CSS's instruction transform: 'rotate(18deg) (https://github.com/DWilliames/paddy-sketch-plugin))
3. data-sketch-textlabel="Placeholder" to add a label on closest text layer
4. data-sketch-locked to lock layer
5. data-sketch-ungroup to ungroup layers produced out of such element
6. data-sketch-padding="10 16" to add padding around layer (utilizing Paddy plugin)
7. data-sketch-spacing="10 20" to add some spacing between same level layers (utilizing Paddy plugin)

Added some other crucial changes:

1. Ability to set constraint on text layers
2. Support of SVG rendering
3. Support of dashed borders
4. Support of updatable shared text styles
5. Support for shared colors with names in Sketch (aka color presets)

Fixes

• Fix of shadow miscalculation (shadowObj.spread)
• Fix unexpected line wrapping of texts in Sketch for on half of a pixel rounding
• Ability to manually set _objectID with setObjectID() on any object
• Added console.log() message with imported objects count on importing asketch.json in Sketch (asketch2sketch plugin)
• Added warning for unsupported Sketch styles (different borders, outlines, rotations)

Install html-sketchapp

You can get Servicetitan's version of html-sketchapp from NPM.

npm i @servicetian/html-sketchapp