See if a layers style is out of sync

100%

See if a layers style is out of sync

✓ Published0🌍 Public

Last edited Mar 7, 2020

Created on Mar 7, 2020

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Highlight a layer

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.

KKevinGutowski

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

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

57% match

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

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

54% match

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

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

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

51% match