Create Variants Automatically

100%

Create Variants Automatically

✓ Published0🌍 Public

Last edited Jun 8, 2021

Created on Jun 8, 2021

This example shows a Figma plugin that automatically converts selected frame children into reusable component variants, organizing them into a vertical layout. The script iterates through each child frame, finds all matching glyphs by name across the page, and clones each into a new component with a renamed hierarchy based on the parent’s name. Using Figma’s `createComponent`, `clone`, and `combineAsVariants` APIs, it builds variant groups and sets their layout mode. The code demonstrates programmatic component creation and variant combination directly from the Figma document model.

AI-generated description

Similar vizzes

Loading thumbnail…

Get structured names of a ComponentSetNode [Figma API]

This example converts a Figma ComponentSetNode into structured variant metadata. The `getVariantMetaData` function parses each child component’s name, splitting on commas and equals signs to extract property names and variant values. It then builds a JavaScript object that lists all detected properties and their unique variants, using arrays to track property order and avoid duplicates. The code relies on native string methods like `split` and array `indexOf` rather than external visualization libraries, focusing on data preprocessing for later charting.

KKevinGutowski

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

62% match

Loading thumbnail…

Fork of Part 6 Compartmentalizing Complexity

This example displays a grid of 18 randomly colored cartoon faces, each generated with React components and rendered as SVG. The code composes faces from separate components like `BackgroundCircle`, `Eyes`, and `Mouth`, using d3’s `arc` API to draw the mouth path. Each face uses randomized properties for eye radius and fill color, generated via `Math.random` and a hex color function, with all faces laid out in a grid using d3’s `range` utility.

FFrictionlessman

55% match

Loading thumbnail…

Fork of Hello HTML

A grid of fifteen smiley-face SVG components, all sharing the same base geometry but with randomized eye radii, demonstrates a React-based approach to generative visual variation. Each face is assembled from dedicated sub-components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—which wrap SVG elements like `<circle>` and a d3 `arc()` path. The rendering uses ReactDOM to mount the component array, and the d3 `range` function generates the 5×3 layout.

Dddrake

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

54% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example uses React to generate a grid of cartoon faces, each with randomized eye and mouth sizes. The faces are drawn using Scalable Vector Graphics (SVG) components, with the `d3.arc` API creating the curved mouth shape within a `path` element. Each face is composed of a yellow background circle, two eyes positioned by offset values, and a mouth whose radius and width vary, all wrapped in a `FaceContainer` that translates the SVG coordinate system. The code modularizes each facial feature into separate React components, making the composition easy to modify and reuse.

HHui Wang

54% match

Loading thumbnail…

Fork of Smiley Face Part VI

The example renders a grid of eighteen smiley faces, each generated as a React component composed from separate ES6 module files. It demonstrates modular component structure, including React Fragments for grouping elements without extra DOM nodes. Faces are drawn as SVG using D3’s `arc` generator for the mouth, with randomly varied eye radii for each face. The layout is produced by iterating over a range of six by three items, translating each face into a centered group within an SVG container.

Ffjvoris

54% match

Loading thumbnail…

Fork of Fork of Hello HTML

A grid of procedurally generated cartoon faces illustrates how React components and D3 shape generator APIs can work together for generative art. Each face combines a yellow background circle, two eyes, and an arc-based mouth, with dimensions and positions randomized per instance via `Math.random()`. The rendering relies on React’s `createElement` and `ReactDOM.render`, while D3’s `arc` and `range` helpers define the mouth path and iteration count. SVG output is structured through custom components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`), demonstrating a modular, declarative approach to building multiple data-driven visual elements.

Bbellarej

54% match