Skip to content
Sketch plugin that exports artboards and generates an HTML file linking to each one
JavaScript HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets fixing some stuff Sep 15, 2019
sketch-assets first Sep 14, 2019
src remove default path so previous selection is preserved Sep 22, 2019
.appcast.xml Update .appcast with new tag Sep 22, 2019
.gitignore add file protocol for Safari Sep 15, 2019
README.md Readme edits Sep 22, 2019
demo.gif adding demo gif Sep 15, 2019
package-lock.json Publish 0.2.2 release 🚀 Sep 22, 2019
package.json Publish 0.2.2 release 🚀 Sep 22, 2019

README.md

Sketch Share

This plugin exports all of the artboards on the current page and generates a local HTML index file that links to each one.

Demo

Why

For UI design the best way to view a static mockup is to view a full-sized PNG in the browser. This gives the closest approximation to the real experience and is critical for determining the correct sizing of elements.

To ensure clients view mockups in the browser I always upload PNGs to s3 and send links. For projects with many screens, corralling the various images is awkward so I create an HTML index file with links to each mockup, often with some accompanying notes.

This is a manual process and making sure the filenames match the hrefs is tedious. This plugin automates it all with a single click. (You still have to upload the folder to a server but I'm planning to address that in the next iteration.)

How to install

Usage

  • Export your artboards with the shortcut CTRL+Shift+E or by selecting the Sketch Share command in the plugin menu
  • This will export all artboards on the current page as PNGs and create an HTML file linking to each one
  • When exporting is finished the index file will open in a browser. The path to the index file will also be copied to the clipboard.
  • The name of the Sketch Page will be used for the title of the HTML page
  • The artboard names will be used as the link names on the HTML page

Bonus features

  • You can exclude artboards from export by adding an underscore to the beginning of the artboard name
  • You can include description text on the HTML page by adding a hidden text layer to each artboard. The name of the layer must be *description
  • You can include intro text on the page by adding a text layer to the Page (not on an artboard, although that may work). The name of the layer must be *intro

Tips

  • Make sure each artboard has a unique name
  • The export will respect whatever export settings you have selected for each artboard
  • If you run the plugin again and export to the same location it will overwrite the previous files
  • You can change the shortcut to something else by editing the manifest.json file within the plugin

Future features

  • Auto s3 uploading on export

Questions/Feedback

@robflaherty

You can’t perform that action at this time.