Skip to main content
SimilarExport ZIP
100%

Highlight a layer

✓ Published0🌍 Public
KKevinGutowski
Last edited Mar 8, 2020
Created on Mar 8, 2020

This example demonstrates how to visually isolate a single layer within a Sketch document by highlighting it. The code uses the Sketch JavaScript API, specifically `sketch.getSelectedDocument()` and `document.selectedPage.layers[0].layers[0]`, to access a target layer. It then triggers the highlight by calling `normalEventHandler.setHighlightedItem(layer.sketchObject)` on the document’s event handler manager. The visualization relies on Sketch’s built-in interface to render the highlighted state, with no external data source or custom rendering logic involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Highlighting Attempt

This example highlights the first four characters of selected text layers in a Sketch document with a yellow background. The script uses the Sketch JavaScript API through the `sketch` library to access the current document and its selected layers. It filters layers for those of type "Text" and then applies the highlighting by calling `addAttribute_value_forRange` with the `NSBackgroundColorAttributeName`, the color yellow, and a range covering positions zero through four. The operation directly manipulates the native Sketch layer objects via their `sketchObject` property.

KKevinGutowski
74% match
Loading thumbnail…

Get layer from ID

This example demonstrates how to retrieve a specific layer from a Sketch document by its ID using the `document.getLayerWithID(layerID)` method. It also shows an alternative approach with the Sketch API’s `sketch.find(`#${layerID}`)[0]` function, which queries the document tree for elements matching a CSS-style selector. The code highlights two concise techniques for locating layers programmatically, enabling direct access to layer objects for further manipulation or inspection. The gist focuses on the retrieval pattern itself, without additional rendering or data processing.

KKevinGutowski
70% match
Loading thumbnail…

Attempting to Highlight First Letter

This Sketch plugin example demonstrates how to highlight the first letter of a selected text layer. The script calculates the bounding box of the first glyph using Sketch’s text layout APIs, including `NSTextContainer`, `NSLayoutManager`, and `boundingRectForGlyphRange`, then draws a red rectangle behind that letter. The gist creates a reusable highlight shape and removes any previous version, making it easy to re-run the code. The plugin relies on the Sketch.js library to access and manipulate the document’s layers and shapes.

KKevinGutowski
67% match
Loading thumbnail…

Add a dashed underline to a text layer

This example demonstrates how to apply a dashed underline to text layers in a Sketch document using the `sketch` JavaScript library. It first retrieves the selected document and filters the selected layers to only include those of type "Text". For each text layer, the script uses the `addAttribute_value` method to set the underline style to a combination of single and dot pattern, referencing the `NSUnderlineStyleSingle` and `NSUnderlineStylePatternDot` constants. The code comments list alternative underline styles and patterns available for modification.

KKevinGutowski
62% 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
61% match
Loading thumbnail…

See if a layers style is out of sync

This example demonstrates how to check whether a selected layer’s style has diverged from its associated shared style, indicating a potential sync issue. The script uses the `sketch` JavaScript API to retrieve the active document, access the first selected layer, and then inspect its `style` object. It calls `style.isOutOfSyncWithSharedStyle(selectedLayer.sharedStyle)`, which returns a boolean value that is printed to the console. The code relies on the selected layer’s `sharedStyle` property as the reference point for comparison, without modifying any document state.

KKevinGutowski
61% 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
60% match
Loading thumbnail…

Add a URL to a text layer

This example shows how to add hyperlinks to text layers in Sketch by assigning URLs directly to selected text or its active text range. When a user selects one or more text layers and runs the script, it prompts for a URL, then applies that link either to the entire layer or to the specific highlighted portion when text is being edited. The code uses the Sketch JavaScript API, specifically `sketch.getSelectedDocument()`, `layer.sketchObject.addAttribute_value()`, and `UI.getInputFromUser()`, along with `NSLinkAttributeName` and the `textStorage.addAttribute_value_range()` method for formatting range selection. After updating, it reloads the inspector to reflect the changes.

KKevinGutowski
59% match