Sketch Design Doc
This plugin exports a simple website using a bunch of conventions and a Sketch document as the structure. We named the plugin "design doc" because initially, we used it to export a design guideline, but we have been using it for many other things.
How to Install
- Download and open
How it works
The plugin scans the document and builds a page following these rules:
The order of the pages in the panel is the order of the menu. The plugin generates a
index.html page that redirects to the first element of the menu.
- The plugin ignores the
- If the name of the page starts with an underscore
_, the plugin ignores the page.
_Settingsis a special case.
👉 Web Page Structure
The order of the artboards in the panel defines the order of the content on the web page.
- If the name of the artboard starts with an underscore
_, the plugin doesn't generate a title for the section nor an entry on the menu.
- If the name of the artboard starts with a slash
/, the plugin indents one level the content on the menu and generates a lighter header for the content.
Each artboard can have a text description associated. Create a text layer and name it
[name-of-the-artboard].md. Use Markdown to format the output. The plugin will ignore the style applied to the layer.
Creating a text layer named
_Preface.md in a page, will render as an introduction at web page level. This text layer supports Markdown too.
Customize the logo of the output, the color of the menu and the color of the links in the page
_Settings if needed. This page is not mandatory.
- Customize the logo adding an artboard with the name
_logo. If the artboard is not present, the output will not have a logo.
- Customize the color of the menu using a vector layer with the name
- Customize the color of the links using a vector layer with the name
TODOs and Known Issues
- The output is not mobile friendly (yet)