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.

Testing variations

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

Override control

Verify how overrides and swaps within instances are preserved during parent component 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

Plugin settings ⚙

You can control some parameters when creating the matrix:

✅ Add brackets at the level closest to the matrix

If you enable this option, the connecting brackets will always be displayed at the level closest to the matrix.

✅ Always include property names in row and column labels

If you enable this option, all labels will display the property names and their values; by default, only the values ​​are displayed for all non-binary properties

✅ Do not skip empty rows or columns

If you enable this option, the matrix will contain empty columns and rows, even if there is no such combination of properties for the entire row or column in the component.