lukasoppermann/browser-preview

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

Hi there 👋

I'm Lukas,

I am a staff design system designer working on GitHub's design system primer. My focus is on design tokens and color but I also work on other design system aspects like components and tooling. I also maintain our Figma libraries.

🔭 I constantly refresh my portfolio try out new react stuff and work on my Figma plugins: design tokens & elevation scale

🌱 I am learning

• how to use screen readers
• productivly using an ANSI keyboard (I switched from a german layout)

🤔 I’m looking for help with my open source projects

• Figma design tokens export plugin
• Figma elevation system plugin
• HTML5 Sortable (drag & drop) package

💬 Ask me about

• design systems
• design tokens
• espresso based drinks

📫 Reach me on twitter: https://twitter.com/lukasoppermann

📚 Read my thoughts on medium.com/@lukasoppermann

🧪 Check out my work: https://lukasoppermann.com

😄 Pronouns: he/him

browser-preview's Issues

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 custom keyboard shortcut settings

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

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?

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?

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 error when trying to preview layer without parent artboard

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

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?

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

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.

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)