Split Rectangle into equal segments with padding

100%

Split Rectangle into equal segments with padding

✓ Published0🌍 Public

Last edited Feb 10, 2020

Created on Feb 8, 2020

This example demonstrates a Sketch plugin script that splits a selected rectangle into five equal segments with consistent padding between each segment. It shows how to programmatically resize the original shape and duplicate it to create evenly spaced copies. The code uses the Sketch JavaScript API, specifically `sketch.getSelectedDocument()`, `ShapePath`, and the `selection.duplicate()` method, along with frame properties like `frame.width` and `frame.x`. The calculation accounts for the fixed padding of 4 pixels when determining the new width of each segment and the offset for each duplicated copy.

AI-generated description

Similar vizzes

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

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

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

Resize widths of progress bars - Figma

This example shows a Figma plugin script that resizes the segments of a selected progress bar to reflect a set of time intervals. The script uses the Figma API to access the current page selection, reads its padding and item spacing, and calculates new segment widths based on the proportional differences between sequential times in a hardcoded array. It clones the first child element, resizes each clone to the computed width, and appends the new parts to the selection, removing the original extra children first.

KKevinGutowski

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

59% match

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

56% match

Loading thumbnail…

16:9 - Figma

This example demonstrates a Figma plugin that resizes a selected design element to fit a 16:9 aspect ratio. It calculates a multiplier based on the current width, then uses the `resize` method to set the dimensions to 16 times that multiplier and 9 times it, while also enabling `constrainProportions` to maintain the correct ratio. The code reads the selected frame's properties directly from the Figma API and modifies its dimensions accordingly.

KKevinGutowski

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

54% match