A GUI for a plugin

geraldeersteling

Hello,

I've seen several plugins with some sort of GUI. Does anyone have some general tips on how to get started on a GUI? I found https://github.com/romannurik/Sketch-NibUITemplatePlugin, but I'm kinda wary because he said that he uses some sort of hackery to get it done..

sonburn

My tip is to find a plugin that intrigues you from a UI perspective and dive into it's code to figure out how it was done... but in short it can be done much easier than NibUI. Some great places to start would be Symbol Organizer (simple field ordering), Shapr (complex field ordering), Sketch Measure (completely custom UI).

geraldeersteling

sonburn Great tips, thanks! Was kind of doing the same thing, but was wondering if there was a better way of doing things.

Ashung Nice setup, I'll be looking into using a webview as well, thanks!

Ashung

I make HSL Color Picker use a WebView (HTML + CSS + JavaScript) for GUI.

mathieudutour

I created a package to easily create a webview UI: https://github.com/mathieudutour/sketch-module-web-view
Here is a working example: https://github.com/mathieudutour/git-sketch-plugin/blob/master/src/commands/Branches.js

geraldeersteling

mathieudutour Looks cool! I'll try it out in a few days!

APNike

mathieudutour

Hi! I'm trying to use WebUI and am coming across this error:

TypeError: undefined is not a constructor (evaluating `new WebUI`)

I know it has to do with how I'm compiling my code... I just can't figure out what I'm doing wrong. This is the compilation function in my gulp.js file:

gulp.task('rollup', () => {
  return rollup.rollup({
    entry: path.join(path.resolve(), 'src/main.js'),
    plugins: [
      babel(), // Should I be using more than just babel here?
    ]
  }).then((bundle) => {
    return bundle.write({
      dest: path.join(filesPath, 'main.js'),
      format: 'cjs',
    });
  });
});

I'm pretty new to writing Sketch Plugins, so any piece of info would be greatly appreciated.

Thank you!
- Aaron

mathieudutour

APNike yeah you need a lot more than just babel. you can check the config use in skpm (https://github.com/sketch-pm/skpm/blob/master/lib/skpm-build.js#L67-L94) or use skpm directly ?

APNike

mathieudutour Yes, I looked into skpm and it's pretty great! Honestly a lot of your plugins have been a huge reference for me. So thanks!

For now I've decided that, since I'm new to Sketch development (and one of the only ones doing it at Nike), I'd get more benefit from understand the Why's and How's of the compilation process.

Appreciate the help. You will mostly certainly hear more questions from me in the future. ?

- Aaron

mathieudutour

That's the right approach!

Always happy to help ?

mathieudutour

there is an example here: https://github.com/skpm/with-webview/tree/master/template

gndps

It took me quite some time to create even a basic ui with html, js & css. So sharing my snippets to help someone setup theirs quickly.
Make sure you have the skpm webview package installed for this to work (generally comes automatically installed with skpm)

Steps to get the boilerplate running:

Download & put these 2 sample files in the src folder: htmlfile, jsfile
Create a file openSettingsPanel.js in src folder with the following content:
import { openSettingsWindow } from './settingsPanel' export default function() { openSettingsWindow() }
Modify manifest.json by adding the following inside the commands list:
{ "name": "My Settings", "identifier": "pluginname.settings-panel", "script": "./openSettingsPanel.js", "shortcut": "cmd alt a" }
In the same manifest file, add the following to the list menu.item:
"pluginname.settings-panel"
Install the plugin and press shortcut cmd + alt + a to see the settings panel.

I was unable pack to css and images with the plugin for some reason, so I hosted them online (which is not too bad)
You can create the settings panel UI in sketch and export to html using Anima. Although it's paid to export the source code but inspect element worked.

Hope it helps