Component Grid Builder

About this plugin

Create comprehensive visual matrices of all component variants. Visualize property combinations in organized grids with flexible axis configuration. An essential tool for design system documentation, component testing, and stakeholder presentations.

What the plugin does

Component organization

Structure your component sets for easy navigation through properties and their combinations.

Variant testing

Generate matrices to test all possible property combinations of a component.

Override control

Verify how overrides and swaps are preserved within components during editing.

Structure validation

Assess the correctness of your component properties and architecture.

Key features

Flexible axis configuration

Choose which properties to place on the X-axis and which on the Y-axis.

Sequence management

Configure the iteration order of properties within each coordinate axis.

Settings memory

The plugin remembers the last settings for each component you've worked with.

How to use the plugin

Step 1: Select object

Launch the plugin and select a component, component set, or instance with any overrides.

Step 2: Configure matrix

Set up axes and property sequences in the plugin table.

Step 3 option 1: Organize component set

Click "Organize component set" to arrange variants in a grid with labels.

1. Available only when a component set is selected
2. Doesn't account for checkboxes and doesn't create instances with modified boolean properties
3. Automatically removes the old matrix when run again

Step 3 option 2: Create variants matrix

Click "Create variants matrix" to create a separate matrix with component instances.

1. Considers only selected properties (marked with checkboxes)
2. Uses the current state of your selected instance
3. Preserves all your settings: boolean properties, texts, swaps, and overrides of nested instances