Reading/writing a sketch file without opening it

100%

Reading/writing a sketch file without opening it

✓ Published0🌍 Public

Last edited Oct 19, 2021

Created on Feb 26, 2021

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Read/Write Sketch objects from the pasteboard

This example demonstrates how to copy and paste Sketch layer objects through the system pasteboard, showing both read and write operations. The read script retrieves layers from the pasteboard using `MSPasteboardManager.readPasteboardLayersFromPasteboard` and wraps them with the Sketch JavaScript API. The write script takes a selected layer from `doc.selectedLayers`, wraps it in an `MSLayerArray`, and writes it using `MSPasteboardLayers.pasteboardLayersWithLayers` and `MSPasteboardManager.writePasteboardLayers_toPasteboard`. The code relies on the `sketch` module and native Objective-C class access, with `context.document` providing the document’s color space.

KKevinGutowski

67% match

Loading thumbnail…

Async network download

This example demonstrates asynchronous network downloading within Sketch, fetching a remote sketch file from a GitHub URL. It shows how a document is downloaded and then opened programmatically, with the resulting native Sketch document logged to the console. The code uses the Sketch JavaScript API, including `sketch/async` to create a fiber for managing the operation, and `NSURLSession` with `downloadTaskWithURL:completionHandler:` to perform the download. Upon completion, a completion block reads the downloaded file into an `MSDocument`, error handling is included, and the fiber is cleaned up after processing.

KKevinGutowski

65% match

Loading thumbnail…

SF Symbols -> Sketch

The example imports SVG files from URLs copied to the macOS pasteboard and places them onto a selected artboard in Sketch. It uses the Sketch JavaScript API with `sketch.ShapePath`, `sketch.getSelectedDocument`, and `MSSVGImporter` to parse and convert each SVG into a native layer. The script reads URLs via `NSPasteboard` and `readObjectsForClasses_options`, then positions each imported layer horizontally with an offset of 50 pixels. The code demonstrates batch SVG ingestion from clipboard data into a design document.

KKevinGutowski

60% match

Loading thumbnail…

Triggering an action in Sketch

This example demonstrates how to trigger built-in actions in Sketch by accessing the document’s actions controller. The code uses the `actionsController()` API to invoke specific actions like `MSShowReplaceColorSheetAction` and `MSInsertSymbolAction`, passing in objects such as an `NSMenuItem` with a represented object when needed. It also includes a commented-out script that logs all available action class names to a file. The snippet illustrates direct programmatic control over Sketch’s UI, relying on Objective-C bridging through JavaScript APIs. It references `MSSymbolMasterReference` to handle symbol insertion and uses `try`/`catch` for error handling.

KKevinGutowski

59% match

Loading thumbnail…

Gist 4da3ecb32517e64ddc52428cdb30eaab

This example demonstrates a Sketch plugin that monitors document changes and provides real-time feedback through popup messages. It shows how the plugin reacts to three types of edits: property modifications, object deletions, and object additions or moves. The code uses the Sketch JavaScript API, including `sketch.UI.message` for notifications and `sketch.fromNative` to wrap native objects for access to parent artboards. It logs the full path of each change and distinguishes between moved objects and genuine additions or deletions, with special handling for deletions that are part of a move operation.

KKevinGutowski

58% match

Loading thumbnail…

Loading a XIB file in a Sketch plugin

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`.

KKevinGutowski

57% match

Loading thumbnail…

Gist b3b904582eaa49475bc90dacbb6d92c9

This example demonstrates how to construct and arrange basic geometric shapes within a Sketch document using the `sketch` JavaScript API. The code programmatically creates an artboard and populates it with a square, a triangle, a hexagon, and a circle, each styled with distinct fill colors or a bordered outline. The `ShapePath` class and its `ShapeType` enumerations are the core components, with coordinates and dimensions set through `frame` objects. The rendering approach is code-driven, defining visual elements directly without external data sources, showcasing the library’s programmatic drawing capabilities.

KKevinGutowski

57% match

Loading thumbnail…

Paste In SVG code

This example demonstrates how to insert raw SVG markup directly into a Sketch document using the Sketch DOM API and the `sketch/createLayerFromData` function with an 'svg' format. The code prompts the user for an SVG string through `UI.getInputFromUser`, then assigns the resulting layer to the selected page. It relies on the `sketch/dom` module to handle document and page selection, and `sketch/ui` for the input dialog, creating a quick bridge between external SVG code and Sketch’s native layer hierarchy.

KKevinGutowski

57% match