Testing Sketch Import Tool

100%

Testing Sketch Import Tool

✓ Published0🌍 Public

Last edited Jun 12, 2020

Created on Jun 12, 2020

This example tests a Sketch import tool by rendering a Storybook page hierarchy as nested SVG groups. The code reads an `asketch.json` file containing grouped layers and rectangles, then reconstructs the layout using Sketch’s object model. It applies fills and borders from the JSON’s style properties, preserving the original visual structure. The SVG output mirrors the document’s nested `div` and `shapeGroup` layers, demonstrating how the tool converts Sketch’s internal representation into a web-renderable format.

AI-generated description

Similar vizzes

Loading thumbnail…

SF Symbols -> Sketch

The example imports SVG files from URLs copied to the macOS pasteboard and places them onto a selected artboard in Sketch. It uses the Sketch JavaScript API with `sketch.ShapePath`, `sketch.getSelectedDocument`, and `MSSVGImporter` to parse and convert each SVG into a native layer. The script reads URLs via `NSPasteboard` and `readObjectsForClasses_options`, then positions each imported layer horizontally with an offset of 50 pixels. The code demonstrates batch SVG ingestion from clipboard data into a design document.

KKevinGutowski

66% match

Loading thumbnail…

Tests

This example demonstrates basic SVG shapes rendered on an HTML page using CSS and JavaScript. It shows a circle, a rectangle with a red fill and black stroke, and a group containing a line and a path, all displayed within an SVG element of 960 by 500 pixels. The code uses plain SVG APIs for drawing and CSS for styling, with the `.lines` class applying stroke properties to the line and path. The page loads from `index.html` with linked `styles.css`, providing a minimal setup for testing SVG rendering without any external libraries.

XXavier Bost

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

63% match

Loading thumbnail…

SVG

This example demonstrates basic SVG shape drawing and grouping within an HTML page, using raw SVG elements such as `circle`, `rect`, `line`, and `path`. The code shows how attributes like `fill`, `stroke`, `stroke-width`, and transforms (`translate` and `scale`) affect appearance, while CSS classes style the line group and its path. Static coordinates and colors define the composition, with no data binding or interactive behavior. The page also loads a bundled script that sets text content, though the target element is not present in the HTML.

ZZhipeng Xu

63% match

Loading thumbnail…

SVG TEST

This example displays a static collection of SVG primitives, including circles, rectangles, lines, and paths, arranged in groups with transforms. The composition showcases basic shapes with hard-coded fills, strokes, and coordinate positions within a 960 by 500 pixel canvas. The rendering relies on raw SVG elements defined directly in the HTML, with CSS classes like `.lines` applying stroke properties and line joins. The code uses plain SVG APIs (`<circle>`, `<rect>`, `<line>`, `<path>`, and `<g>`) alongside CSS styling, without any JavaScript libraries for layout or interaction.

JJames Song

63% match

Loading thumbnail…

The Coloring Book

An interactive coloring page displays a detailed SVG illustration split into outlined regions in a `Color` group, which users fill by clicking individual paths. The application lets visitors choose from a fixed palette of 24 colors, apply a random color to every region, clear all fills to white, or download the resulting SVG. Built with React for structure, it uses the Canvas library to load the SVG, GSAP TweenMax for smooth fill transitions and rollover scaling, and react-color's SketchPicker for color selection. The page loads a remote SVG coloring book asset and renders it within a stylized holder.

Sslawson48

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

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

62% match