lukasoppermann / browser-preview

🔍 Open a preview of your Sketch artboard in your browser.

Browser Preview

Quickly preview an artboard in your browser.

This plugin previews the selected artboard in a 2x resolution in the browsers, using the artboards background color as the websites background color. The artboard is centered horizontally in the browser.

Installation

🏃 Sketch Runner

Go to the install tab in runner and search for Browser Preview.

Manual Installation

1. Download the bundle file (first file with the package icon) and extract it.
2. Double click the browser-preview.sketchplugin bundle

Usage

Simply select one or multiple artboards / layers and press cmd + shift + p or select Preview Artboard from the Plugin menu.

You can customize the shortcut using the default mac keyboard settings and assign any shortcut for sketch to Preview Artboard.

If you want your screen to be aligned to the left of the browser window, simply suffix the artboard name with :left. E.g. "Desktop" would be "Desktop:left".

Customize browser

Using the settings you can select which browser to use for previewing the artboard.

browser-preview's Issues

Use system browser

I'm very happy with this plugin, especially on a retina display. But I have a slight problem. I'm using the Yandex Browser but I can't choose it in the Plugin settings. Could you add the option "Use system/user browser" or something similar? Thank you, anyway!

Originally posted by @razer-k in #7 (comment)

Preview parent artboard of selected element

When an element is selected the parent artboard should be previews.

Issues

• what if multiple elements on one artboard are selected?
• what if multiple elements on multiple artboards are selected?

Make Sound Effect Optional

The Plugins works great, thank you for that. Would it be possible to add another setting that makes the sound effect optional? Just a little enhancment

why safari?

Always use this plugin for the preview: https://github.com/gaddafirusli/Preview-in-browser

which is based on another but with many new and interesting features.

I tried to use yours but I don't understand why it opens safari instead of my default browser, and why a message comes out saying that a font was created.
It takes about 3 seconds to open safari and show me my preview, when the previous plugin didn't take a second.

I would love that you could better put it on chrome, and if it is based on the one of gaddafirusli or Julian ceballos, you can put it because you encourage the community.

P.S. Thanks for the alignment, however you must leave as default thanks :)

Add custom keyboard shortcut settings

Allow the user to set up custom keyboard shortcuts via the new settings menu.

Improved Settings Screen

To allow users to assign personal shortcuts #1 a custom webview needs to be shown for settings. This should allow the user to:

• select the browser
• select one or 2 modifier key + a character to assign as the shortcut

The shortcut switched with zoom in short cut on 50.2

Hi Lukas,

After installing the plugin on Sketch 50.2, the shortcut of zoom in is switched with the shortcut for browser preview. Now, I need to use shift command + to zoom in, and command + to preview in browser. I don't know why this happened. Can you look into this?

Artboard name is url encoded which breaks preview when using / in the name.

Hello @lukasoppermann, first off thank you for a great and super useful plugin.
I recently ran into an issue that I never noticed because I didn't use the feature before.

Sketch allows exporting files to a folder directly by using a / in the name.
ie: desktop/my-layout

When using the plugin it'll load the webpage but the link to the image is broken as it's
desktop%2Fmy-layout instead of desktop/my-layout to target the folder created by Sketch.

I suppose it's a quick fix
https://github.com/lukasoppermann/browser-preview/blob/master/src/create-preview.js#L17

By replacing %2F with / in the artboard.name.

Let me know how you would fix this slight issue.

Artboard with Chinese Name would preview in Safari

Any artboard that has Chinese name will not preview in Safari. I need to change the name to English in order to work, or I have to copy the link to Chrome. The screenshot shows the same artboard with the different names. The one with the Chinese name shows some gibberish, English is fine. Feels like it relates to the encoding. Can you please have a look?

Update MacOS catalina, plugin can't work correctly

Preview Artboard will show the "creating tips", but can't open browser when updating macOS system to catalina.

Add error when trying to preview layer without parent artboard