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.
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+
- 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 / levelsparagraph- exports a single paragraphparagraph-multi- exports multiple paragraphsblockquote- exports a blockquotehorizontal-rule- exports a horizontal lineimage-*- exports the image (1:1) as an asset. If you have multiple symbols that are a composition of an image, group them and rename toimage-*.-*should be always-1 | -2 | ...so they're exported with that layer nameimage-1 | image-2 | ...list-unordered- exports an unordered listlist-ordered- exports an ordered list
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.
This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.