Figma plugin

Sort your variants

Organize component sets by their properties.

Open on Figma Community

Sort your variants: project interface, view 1

For whom

Teams maintaining component libraries

Scope

Plugin · Component Sets · Visual organization

Tools

Component Sets / Variants / Canvas organization

The idea

Make component sets readable at a glance.

A library can have well-defined variants and still be hard to navigate on the canvas. I built Sort your variants to assign properties to rows, columns, or groups, adjust labels, and save the configuration with each component set.

Before and after

Organize variants for comparison.

I built a labeled grid layout that makes component properties readable and variants easy to compare.

Panel

Save settings per component.

I brought properties, spacing, and labels together in the panel. Settings are stored on each component set for later reuse.

Labels

Customize labels to match your library.

I added control over padding, borders, radius, font, size, and color. Column labels rotate when they need more space.

Groups

Break up large sets.

I added row and column groupings by property, with a heading for each group.

Implementation

How I built it.

Control canvas layout

I disabled Auto Layout on the component set to position variants precisely. I stored settings and labels on the set while keeping the content of each variant intact.

Variant arrangement

Sort your variants

Component sets organized by their properties.

Component Sets: Any set with one or more properties.
Roles: Column, row, column group, and row group.
Labels: Custom styling saved with each set.
Rotating labels: Column labels rotate when space is limited.
Auto Layout: Disabled to position variants precisely.

Figma plugin

The plugin changes the component set's layout and disables its Auto Layout. Review the configuration before applying it to your library.

View on Figma Community View source on GitHub

Next projectExport Component Metadata