set
sketch-export-to
npm i sketch-export-to
set

sketch-export-to

Export Artboards in sketch to markdown or json

by Marco Cardoso

2.0.0 (see all)TypeScript:Not Found
npm i sketch-export-to
Readme

sketch export to

sketch-export-to

preview

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.

Downloads/wk

9

GitHub Stars

30

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

1

OPEN PRs

10
VersionTagPublished
2.0.0
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial