Grouping Layers - Remove Parents for Each Layer

100%

Grouping Layers - Remove Parents for Each Layer

✓ Published0🌍 Public

Last edited May 1, 2019

Created on Apr 27, 2019

This example demonstrates how to detach shape layers from their parent artboard, re-parent them into a new group, and automatically resize the group to fit its contents. The Sketch API creates four shapes—a square, triangle, hexagon, and oval—on an artboard, then calls `layer.remove()` on each to sever their parent relationships. The shapes are subsequently added to a new `Group` via the `layers` property, and `adjustToFit()` recalculates the group’s bounding frame. The code uses `sketch.ShapePath`, `sketch.Artboard`, and `sketch.Group` to manage the layer hierarchy programmatically.

AI-generated description

Similar vizzes

Loading thumbnail…

Grouping Layers - Don't specify the parent when creating each layer

This example demonstrates how to create a group of layered shapes in Sketch without specifying the parent when constructing each individual layer. It builds four ShapePath objects—a square, triangle, hexagon, and outlined oval—then assigns them to a newly created Group with the artboard as its parent. The code uses the Sketch JavaScript API via the `sketch` module, including `sketch.Artboard`, `sketch.Group`, and `sketch.ShapePath` with shape types like Triangle, Polygon, and Oval. After assembling the group, it calls `adjustToFit()` to resize the group to its contents.

KKevinGutowski

87% match

Loading thumbnail…

Grouping Layers - Create the Group Object First

This example demonstrates how to create a group object before populating it with shape layers, allowing them to be collected under a single named group. The script uses the Sketch JavaScript API via the `sketch` module, creating an artboard and then instantiating a `Group` with `parent: myArtboard`. Four shapes are added as children of that group—a square, a triangle, a polygon, and an oval—each using the `ShapePath` class with specific `frame` and `style` properties. After adding the shapes, the group’s `adjustToFit()` method resizes it to encompass all contained shapes. The code shows how to structure layer hierarchy in a Sketch document programmatically.

KKevinGutowski

82% match

Loading thumbnail…

Making cool lines in Sketch

A generative drawing built with the Sketch JavaScript API draws a symmetric, web-like pattern of red lines on a black artboard. The example shows how four nested loops create a series of straight ShapePath segments, each with semi-transparent red borders, that collectively form a repeating geometric motif. It demonstrates programmatic layer creation, setting frame and style properties, and using the `adjustToFit` method to size the group. The code uses `sketch.getSelectedDocument`, `Artboard`, `Group`, and `ShapePath` to generate the composition directly within Sketch's document model.

KKevinGutowski

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

60% match

Loading thumbnail…

Add padding to artboard (WIP)

This plugin demonstrates how to adjust an artboard's dimensions and reposition its contents with a user-defined padding value. It uses the Sketch JavaScript API, including `doc.selectedLayers`, `Rectangle`, and `UI.getInputFromUser`, to prompt for input and modify layer frames. The script shifts the artboard’s frame outward by the padding amount while moving all nested layers inward by the same value, preserving their relative positions. It relies on `selection.frame` and `layer.frame` properties to apply geometric transformations.

KKevinGutowski

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

56% match

Loading thumbnail…

Create layers for each pixel with opacities

This example shows a raster image decomposed into one layer per pixel, with each layer’s position and fill color corresponding to the original bitmap’s coordinates and sampled color values. It uses the Sketch JavaScript API, iterating over the image’s width and height via `NSBitmapImageRep` to retrieve each pixel’s color with `colorAtX_y`. The code creates a `ShapePath` for every pixel, assigning the color via an `MSColor` fill, and groups all resulting rectangles under a new `Group` named “pixel layers.”

KKevinGutowski

55% match

Loading thumbnail…

Fork of Shapes with SVG jls

This example shows nested SVG shapes stacked to demonstrate hierarchical grouping and transform inheritance. The visualization places circles and rectangles inside `<g>` elements, with successive groups translating downward and applying fills, strokes, and explicit overrides for individual shape colors. A separate group containing a line and a path is styled via CSS using the `.lines` class, which sets stroke color and width. The code uses raw SVG markup within an HTML page, leveraging React as the framework and scaling the entire composition with a `scale()` transform.

Jjlspangl

55% match