Loading a XIB file in a Sketch plugin

100%

Loading a XIB file in a Sketch plugin

✓ Published0🌍 Public

Last edited Aug 17, 2019

Created on Aug 17, 2019

This example demonstrates how a Sketch plugin loads a XIB file to create a native interface panel. The JavaScript entry point, `script.js`, uses the `sketch` module and attempts to run the plugin, catching errors to dynamically load the `HelloSketch` framework via Mocha’s `loadFrameworkWithName:inDirectory:` method. The Objective-C class `HSMain` then loads the `HSPanel` nib using `NSBundle loadNibNamed:owner:topLevelObjects:` and exposes a `helloText` method that logs and returns a greeting string, which is displayed through `sketch.UI.message`.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist af897f78753e7f850cce144cb3a1ce26

This example demonstrates a Sketch plugin interface with synchronized slider, input field, and stepper controls that all adjust the same numeric value. The code uses Objective-C with Apple's Cocoa and JavaScriptCore APIs, including `MOJavaScriptObject` for bridging JavaScript callbacks. It loads a user interface from a NIB file via `loadNibFile` and `NSBundle`, and shows how `sliderChange`, `inputChange`, and `stepperChange` actions keep the three widgets in sync. The `clickHello` method invokes a JavaScript function through `callFunctionWithArguments`, connecting the native UI to scripted behavior.

KKevinGutowski

70% match

Loading thumbnail…

Basic Window Loading a URL

This example demonstrates a Sketch plugin that opens a floating panel and loads a remote SVG image from the Sketch website into a web view. The plugin uses AppKit’s `NSPanel` to create a borderless, floating window with hidden minimize and zoom buttons. It initializes a `WKWebView` from the WebKit framework, configures it with developer extras enabled, and loads the specified URL via `NSURLRequest`. The panel is centered and kept on top using `NSFloatingWindowLevel`.

KKevinGutowski

67% match

Loading thumbnail…

Gist 03ea367d00ac593217cf6770ee1cc539

This example demonstrates a Sketch plugin that launches a floating panel window with a table view interface. The code uses Sketch’s JavaScript API, `NSThread`, `NSPanel`, and `NSMakeRect` to construct a 312×210 pixel textured window, position it at the screen center, and set it to float above other windows. It manages a thread dictionary key to prevent duplicate panels, toggling the window open or closed on repeated plugin runs. The plugin calls `document.showMessage()` for user feedback and hides the miniaturize and zoom buttons via `standardWindowButton`, with the table view setup currently stubbed out.

KKevinGutowski

66% match

Loading thumbnail…

Creating a Sketch NSPanel

This example demonstrates how to create a custom, frameless floating panel with a vibrant, translucent background using the Sketch JavaScript API. The script creates an `NSPanel` with a titled, closable, and resizable window, and applies a `NSVisualEffectView` with a vibrant light appearance to achieve a frosted-glass effect. It uses `NSLayoutConstraint` objects to anchor the visual effect to the panel’s content view. The panel’s close button is handled via `setCOSJSTargetFunction`, which cleans up the panel reference and stops the script’s keep-alive loop.

KKevinGutowski

62% match

Loading thumbnail…

TableView start

This Sketch plugin example demonstrates a floating panel containing a table view with a custom data source. The panel is built using native Sketch APIs like `NSPanel`, `NSScrollView`, and `NSTableView`, and it populates the table through a dynamic delegate created with `MochaJSDelegate`, which intercepts selector-based callbacks to supply row and column values. The code sets up a single-column grid with alternating row colors, red grid lines, and a fixed height, and logs data requests to the console.

KKevinGutowski

58% match

Loading thumbnail…

Toggling Sketch menu items

This example demonstrates how to toggle menu items in a Sketch plugin by manipulating the application’s main menu. The code uses the Sketch JavaScript API, specifically `NSApplication.sharedApplication().mainMenu()` and `itemWithTitle` to locate the Plugins submenu, then targets the "BaseAlign" item. It disables the item with `setEnabled(false)` and sets its state to checked with `setState(true)`. The menu is accessed directly through Cocoa’s AppKit framework, showing how plugin authors can programmatically control UI elements.

KKevinGutowski

57% match

Loading thumbnail…

Reading/writing a sketch file without opening it

This example demonstrates direct, scripted access to Sketch design files without opening the Sketch application, showing both how to read an existing `.sketch` document and how to write a new one. In the reading script, the code uses Sketch’s `Document` API alongside native macOS `MSDocument` methods, specifically `readDocumentFromURL_ofType_error`, to load a file from a hardcoded file path and log its JavaScript representation. The writing script similarly uses `MSDocument`’s `writeToURL_ofType_options_error` to save a new file to a given URL. Both scripts rely on the `sketch` module and coercive bridging from native objects via `Document.fromNative`. The data source is a local file path (`/Users/kgutowski/Downloads/Test.sketch`), and the concrete interaction is entirely file-based, with no visual output rendered.

KKevinGutowski

57% match

Loading thumbnail…

Create a notification within a sketch plugin

This example shows how a Sketch plugin can display a native macOS notification to the user. The code creates a new `NSUserNotification`, assigns it a unique identifier, and sets its title, subtitle, and informative text. It then retrieves the default notification center and delivers the notification. The data is hard-coded strings, and the implementation relies on the Sketch plugin API’s `NSUserNotificationCenter` and `NSUserNotification` classes.

KKevinGutowski

57% match