https://github.com/gaddafirusli/preview-in-browser
A Sketch plugin to properly view your design in browser
https://github.com/gaddafirusli/preview-in-browser
preview sketch-app sketch-plugin
Last synced: about 1 year ago
JSON representation
A Sketch plugin to properly view your design in browser
- Host: GitHub
- URL: https://github.com/gaddafirusli/preview-in-browser
- Owner: gaddafirusli
- Created: 2016-06-16T15:47:50.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T09:14:27.000Z (over 3 years ago)
- Last Synced: 2023-11-07T16:53:01.309Z (over 2 years ago)
- Topics: preview, sketch-app, sketch-plugin
- Language: JavaScript
- Size: 2.41 MB
- Stars: 162
- Watchers: 7
- Forks: 12
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Preview in browser
A Sketch.app plugin to properly view your design in browser.
### 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](https://github.com/gaddafirusli/Preview-in-browser/archive/master.zip)
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](https://github.com/lastroom/sketch-commands) 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](http://www.twitter.com/gaddafirusli)