Awesome

sketch-export-to

Why

Sketch as the source of truth for UI guidelines (for instance in design systems). The idea behind it was to generate either markdown or json from an artboard, fetch this data and push it to a site.

Installation

You can clone this repo or download the plugin

Double-click on sketch-export-to.sketchplugin to install it in your sketch.

Tested on Sketch 52+

The catch

• As a start take a look at the examples > ui.sketch file and use it as a reference
• I'm assuming you know markdown syntax
• I'm assuming you know what is json
• Keep your layers ordered. This will let the plugin understand which markup renders first.
  • You can organize visually your artboard the way you want but the layers should follow a reading order from top to bottom.
• Follow the below naming convention for your layers:
  • heading1 | 2 | 3 | 4 - exports different heading sizes / levels
  • paragraph - exports a single paragraph
  • paragraph-multi - exports multiple paragraphs
  • blockquote - exports a blockquote
  • horizontal-rule - exports a horizontal line
  • image-* - exports the image (1:1) as an asset. If you have multiple symbols that are a composition of an image, group them and rename to image-*. -* should be always -1 | -2 | ... so they're exported with that layer name image-1 | image-2 | ...
  • list-unordered - exports an unordered list
  • list-ordered - exports an ordered list

Left to do

• Create export for json
• Add more markdown / json export possibilities
• Detect font weights on a word or multiple inside of a text layer and parse it to the proper markdown weight.

skpm

This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.