GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → gaddafirusli → Preview In Browser

gaddafirusli / Preview In Browser

A Sketch plugin to properly view your design in browser

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

sketch-pluginpreviewsketch-app

Projects that are alternatives of or similar to Preview In Browser

Bootstrapgrid
Sketch plugin inserts correct bootstrap grid in nested blocks.
Stars: ✭ 64 (-58.17%)
Mutual labels:  sketch-app, sketch-plugin
Cleanup Useless Groups
A Sketch plugin that cleans up your layer list by removing empty groups and flattening deeply nested groups.
Stars: ✭ 100 (-34.64%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Guides
Add Guides to edges and midpoints at once.
Stars: ✭ 83 (-45.75%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Name Organizer
🖌 Rename and sort artboards based on their x and y position; Rename layers based on their Style and Symbol.
Stars: ✭ 50 (-67.32%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Batch Create Symbols
A plugin for Sketch to convert selected layers to individual symbols.
Stars: ✭ 134 (-12.42%)
Mutual labels:  sketch-app, sketch-plugin
Svgo Compressor
A Plugin that compresses SVG assets using SVGO, right when you export them.
Stars: ✭ 1,068 (+598.04%)
Mutual labels:  sketch-app, sketch-plugin
Ishadow
Creating a beautiful iOS style shadow [Sketch Plugin]
Stars: ✭ 89 (-41.83%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Commands
A collection of script commands for Sketch.app
Stars: ✭ 826 (+439.87%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Logo Fetcher
Sketch.app plugin to search and insert logos from either the Logos API (SVG) or Clearbit API (PNG)
Stars: ✭ 144 (-5.88%)
Mutual labels:  sketch-app, sketch-plugin
Overrideit Sketchplugin
Overrideit is sketch plugin that allow designers to search in overridelist and overrides dropdowns, and with many other features.
Stars: ✭ 113 (-26.14%)
Mutual labels:  sketch-app, sketch-plugin
Exporter
A Sketch plugin that exports Sketch artboards into clickable HTML file.
Stars: ✭ 131 (-14.38%)
Mutual labels:  sketch-app, sketch-plugin
Sync To Slides
Sync your Sketch artboards to Google Slides with ease
Stars: ✭ 133 (-13.07%)
Mutual labels:  sketch-app, sketch-plugin
Import Colors Sketch
Import colors from macOS CLR, Photoshop ACO/ACT, Illustrator ASE, GIMP GPL, Sketch, Text file to Sketch color variables.
Stars: ✭ 32 (-79.08%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Emmet
A Sketch plugin that gets Emmet abbreviations to be expanded as HTML
Stars: ✭ 58 (-62.09%)
Mutual labels:  sketch-app, sketch-plugin
Renamer
Sketch Plugin to rename multiple selected layers or groups or artboards at once
Stars: ✭ 16 (-89.54%)
Mutual labels:  sketch-app, sketch-plugin
Notes
A sketch plugin for taking notes
Stars: ✭ 87 (-43.14%)
Mutual labels:  sketch-app, sketch-plugin
Artboard Manager
Because moving Artboards manually is *so* 2016
Stars: ✭ 672 (+339.22%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Find And Replace
Sketch plugin to do a find and replace on text within layers
Stars: ✭ 693 (+352.94%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Css Sprite Mixin
Generate a code of CSS Sprite Mixin to Clipboard in Sketch.
Stars: ✭ 105 (-31.37%)
Mutual labels:  sketch-app, sketch-plugin
Sketch Select
🖱 Make it much more convenient to select layers with similar attributes.
Stars: ✭ 114 (-25.49%)
Mutual labels:  sketch-app, sketch-plugin
View All Similar Projects ➔

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].