Change Sketch Measurement Color

100%

Change Sketch Measurement Color

✓ Published0🌍 Public

Last edited Feb 1, 2019

Created on Feb 1, 2019

This example shows a Sketch plugin that programmatically reads the current measurement color from the active document and prints its RGBA values to the console. The code uses the `sketch` library to access the selection, then the `eventHandlerManager`, `normalHandler`, and `measurementRenderer` APIs to retrieve the color as an `NSColorSpaceColor` object. The resulting output confirms a solid red fill. No data source is involved; it demonstrates direct inspection of a Sketch interface element's style.

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

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

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

62% match

Loading thumbnail…

A Sketch snippet to copy global colors to the pasteboard

This sketch copies all global color assets from a Sketch document to the clipboard as CSS rules, converting each color to hex and generating class names. It uses the Sketch JavaScript API (`sketch.globalAssets`) to access color assets and `NSPasteboard` to write the formatted string. The code iterates through every saved color, builds a CSS block with a `.colorN` selector or the asset’s name, and trims trailing whitespace before showing a confirmation message.

KKevinGutowski

60% match

Loading thumbnail…

Add a Color layer on top

A Sketch plugin script adds a full-artboard color overlay to visually inspect design contrast. It targets either a selected artboard or a layer within one, then creates a locked `ShapePath` named "Greyscale Layer" with a white fill and `Style.BlendingMode.Color`. The script uses `sketch` APIs like `getSelectedDocument`, `Rectangle`, and `ShapePath` to construct the overlay. If a greyscale layer already exists on the artboard, the script removes it before adding a fresh one.

KKevinGutowski

59% match

Loading thumbnail…

Get pixel data from image layer at coordinates

This example demonstrates how to extract the color of a specific pixel from an image that is part of a Sketch document. It grabs the first selected layer, converts its image data into an `NSBitmapImageRep`, and then calls `colorAtX_y` to read the RGB value at coordinates (1,2). The result is logged as a CSS string using `MSColor.colorWithNSColor`, showing the pixel’s color in a web-friendly format. The code relies on Sketch’s scripting API and the Cocoa/AppKit `NSBitmapImageRep` class for image decoding.

KKevinGutowski

58% match

Loading thumbnail…

Get Insertion Point Color

This example shows how to retrieve the color of the text insertion point caret within Sketch’s text-editing mode. It reads the currently selected text layer and, if the layer is actively being edited, logs the numeric caret color returned by the native `textView.insertionPointColor()` API. The snippet relies on Sketch’s CoreText framework, using `sketch/ui` to display a warning message when no editable text is selected and `sketch/dom` to access the selected layer’s editing delegate. The code is provided as a single JavaScript file, with no external dependencies or data source.

KKevinGutowski

57% match

Loading thumbnail…

Update Figma Color Descriptions to include RGB

This example demonstrates a workflow for automatically updating Figma color style descriptions to include their corresponding RGB values. It uses the Figma API’s `getLocalPaintStyles()` method to iterate over all paint styles in the document. For each style, the script extracts the `paints[0].color` properties and constructs a description string containing the red, green, and blue channels, scaled from 0–1 to 0–255 using the `(color.r*256).toFixed(0)` calculation. The resulting RGB code is then assigned directly to the paint style’s `description` field, providing a quick way to document color values in a design file.

KKevinGutowski

57% match