A Sketch plugin to properly view your design in browser
Switch branches/tags
Nothing to show
Clone or download
gaddafirusli Merge pull request #9 from amoshydra/patch-1
Fix amputated arm in README
Latest commit e2aa0f5 Sep 11, 2018
Permalink
Failed to load latest commit information.
Preview in browser.sketchplugin/Contents/Sketch Bump version Apr 11, 2018
README.md Fix amputated arm Sep 11, 2018
demo.gif Add demo GIF Jun 16, 2016

README.md

Preview in browser

A Sketch.app plugin to properly view your design in browser.

Demo GIF

What does this plugin do?

  1. View your artboard in browser, with proper scrolling - unlike Sketch Mirror's web preview feature.

  2. Your design will be aligned to the center of the browser. The background color on the empty spaces will be the same as the background color of your artboard

  3. Your artboard will be automatically scaled up to @2x for better preview on retina displays. (Provided that you design in @1x 😬)

How to use this plugin?

  1. Download the plugin
  2. Double-click on the "Preview in Browser.sketchplugin"
  3. Click on the artboard you'd like to view in browser
  4. Use the keyboard shortcut Cmd+Shift+. to open it in the browser (You'll have to do this on every changes as this is not a live preview of your artboard)
  5. ¯\_(ツ)_/¯

Credits

Thanks to Lastroom's Sketch Command for providing the base code for the preview method. All I did was to improve the code, clean up the HTML markup output, and add a method to scale the artboard to @2x - for better preview on retina displays.

Contact

Have any suggestions or feedbacks? Hit me up on Twitter @gaddafirusli