Sketch Share
For UI design the best way to view a static mockup is to load a PNG or JPG directly in the browser, at 100% scale. This gives the closest approximation to the real experience and is the only way to evaluate sizing of elements.
All other formats, including PDFs, Mac’s Preview, and Sketch’s built-in cloud preview, offer a scaled, zoomed-out view of the mockup. These formats scale the mockup isometrically–object proportions stay the same as the mockup scales–which is not how web rendering works.
When sharing designs with stakeholders, what’s the best way to ensure a mockup is viewed in the browser? Host the image and send a link to the image URL.
This works well for sharing a few links but gets unwieldy when you have many mockups or when you have to keep track of versions and revisions. So for most projects I usually end up creating an HTML index file that links to each mockup, usually with some accompanying notes. This keeps everything organized and gives a single destination for everything the stakeholder needs to review.
Automating a manual process
Creating the index file is a manual process and parts of it, like making sure the hrefs exactly match the filenames, can be tedious. So I wrote a Sketch plugin that automates most of the work—everything but uploading to s3.
Sketch Share generated HTML index page
Using the plugin
Pressing CTRL+Shift+E or selecting the Sketch Share command in the plugin menu exports all artboards on the current page as PNGs and generates a local HTML file with links to each one. The path to the HTML will be copied to the clipboard and the file will automatically open in a browser. You can exclude artboards from export by adding an underscore to the beginning of the artboard name.
All of the text on the HTML page is extracted from the Sketch document. The page name populates the page title and the artboard names are used for the link text.
An optional description for each mockup can be added by including a hidden text layer in each artboard with the name *description. Optional intro text can be added by adding a text layer on the canvas with the name *intro.
Uploading to a server
The plugin just generates local files; it doesn’t push anything up to the cloud. So you have to copy the folder to a server yourself.
One trick is to use an app that mounts an s3 bucket as a local disk. Then you can export from Sketch to that directory and the files will upload automatically. I’ve tested this with Mountain Duck. Expandrive should work, too.