Component Grid Builder

About this plugin

Create comprehensive visual matrices of component variants.

Visualize property combinations in structured grids with flexible axis configuration and clear labels. An essential tool for design system documentation, component testing, and stakeholder presentations.

Component Grid Builder helps you inspect, organize, and maintain complex components by making all variant combinations visible and comparable. It’s especially useful when evolving design systems and introducing changes without breaking existing behavior.

⸻

How the plugin helps

Component organization

Structure component sets into readable grids based on variant properties, making complex systems easier to navigate and reason about.

Control changes in components

Visual matrices make it easier to review how changes in component properties affect existing variants and instances. You can validate updates before rollout and ensure that new changes don’t break previous behavior or visual appearance.

Testing variations

Generate matrices to explore and test property combinations across axes, helping catch edge cases early.

Override verification

Check how overrides, swaps, and text values are preserved when editing parent components or updating matrices.

Structure validation

Assess the correctness of your component properties, naming, and overall architecture at a glance.

⸻

Key features

Two workflows

Organize existing component sets or create standalone instance matrices, depending on your task.

Flexible axis configuration

Choose which properties go on the X or Y axis and control their order.

Updatable matrices

Previously created matrices can be updated when components evolve — no need to rebuild everything from scratch.

⸻

How to use the plugin

Step 1 — Select an object

Select a component, component set, or an instance (with or without overrides).

Step 2 — Choose your workflow

Option 1: Organize component set

Organize variants inside a component set into a structured grid with labels.

1. Available only when a component set is selected
2. Uses variant properties only, arranges components based on the axis and sequence selected for the properties
3. Replaces the previous organization when run again

Option 2: Create variants matrix

Create a standalone matrix of component instances.

1. Uses only selected properties (via checkboxes), arranges components based on the axis and sequence selected for the properties
2. Builds the matrix from the current instance state: preserves boolean values, text overrides, swaps, and nested overrides
3. Can be updated later as your component evolves

⸻

Plugin settings ⚙

You can fine-tune how matrices are created and displayed:

1. Add brackets at the level closest to the matrix
2. Always include property names in row and column labels
3. Do not skip empty rows or columns
4. Configure the position of row and column labels relative to the matrix

All settings are remembered and reused in subsequent plugin runs.