Sketch Prefs

100%

✓ Published0🌍 Public

Last edited Jul 23, 2020

Created on Jul 23, 2020

This gallery piece visualizes a user’s Sketch preferences by reading the application’s default settings from the operating system. The data, sourced from the user’s `NSUserDefaults`, is extracted using a JavaScript script that logs the dictionary representation of these preferences. The visualization renders this preference data as a structured layout, built with the Processing library, mapping each key-value pair to a graphical element. The example demonstrates a direct pipeline from system configuration to visual form, relying on the `defaults.dictionaryRepresentation()` API to provide the underlying dataset for display.

AI-generated description

Similar vizzes

Loading thumbnail…

Reading Sketch preferences for colors

This visualization captures a software designer’s preferred color settings for Sketch by reading them directly from the application’s saved user defaults. The code uses the `NSUserDefaults.standardUserDefaults()` API to retrieve the stored `colorForMeasurements`, `colorForFlows`, and `colorForSnapsAndGuides` preferences, then decodes the binary data with `NSKeyedUnarchiver`. The resulting color values are likely rendered as a palette or swatches, revealing the user’s chosen hues for interface measurement overlays, flow arrows, and snapping guides, all without manual input.

KKevinGutowski

81% match

Loading thumbnail…

SketchPreset NSData

An interactive Node.js visualization uses d3.forceSimulation to position a network of SVG circles, each colored by a sketch preset. The sketch data is loaded from a JSON archive and rendered as a force-directed graph. The example demonstrates force layout with drag behavior and visual encoding of categorical data through node fill colors.

KKevinGutowski

68% match

Loading thumbnail…

Preference Pane Identifiers

This example logs the identifiers of every preference pane in Sketch’s settings window, printing an array of seven string values such as "general," "canvas," and "plugins." It works by calling `MSPreferencesController.sharedController()` and then invoking `toolbarItemIdentifiers()` on that shared controller instance. The output appears as an `__NSFrozenArray` in the console, revealing the fixed order of panes as defined by the application. The code relies on Sketch’s internal Objective-C API exposed through its JavaScript runtime, with no external libraries or rendering involved.

KKevinGutowski

63% match

Loading thumbnail…

Sketch Logs/Crash Files

This example visualizes a chronological log of Sketch application crash files from a Mac’s DiagnosticReports directory. It shows each crash report as a data point with its file path and formatted creation date. The code uses the Foundation framework’s `NSFileManager` and `NSDateFormatter` to list and timestamp files, filtering for names starting with “Sketch” via JavaScript’s `startsWith`. Output is a plain array of objects, with no graphical rendering library applied.

KKevinGutowski

61% match

Loading thumbnail…

Sketch Global colors to Layers

This example demonstrates how to extract the global color palette from Sketch’s asset library and render each color as a square swatch on the selected page. It iterates through the document’s color assets, converts each color from its native color space to a hexadecimal string, and creates a new `ShapePath` for every swatch, positioning them in a horizontal row. The script uses the Sketch JavaScript API, specifically `MSPersistentAssetCollection`, `ShapePath`, and `Rectangle`, with custom helper functions for RGB-to-hex conversion.

KKevinGutowski

60% 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

59% 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

58% match

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

56% match