@servicetitan/html-sketchapp

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:

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

Added some other crucial changes:

• Ability to set constraint on text layers
• Support of SVG rendering
• Support of dashed borders
• Support of updatable shared text styles
• 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