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 helpsComponent organizationStructure component sets into readable grids based on variant properties, making complex systems easier to navigate and reason about.Control changes in componentsVisual 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 variationsGenerate matrices to explore and test property combinations across axes, helping catch edge cases early.Override verificationCheck how overrides, swaps, and text values are preserved when editing parent components or updating matrices.Structure validationAssess the correctness of your component properties, naming, and overall architecture at a glance.⸻Key featuresTwo workflowsOrganize existing component sets or create standalone instance matrices, depending on your task.Flexible axis configurationChoose which properties go on the X or Y axis and control their order.Updatable matricesPreviously created matrices can be updated when components evolve — no need to rebuild everything from scratch.⸻How to use the pluginStep 1 — Select an objectSelect a component, component set, or an instance (with or without overrides).Step 2 — Choose your workflowOption 1: Organize component setOrganize variants inside a component set into a structured grid with labels.Available only when a component set is selectedUses variant properties only, arranges components based on the axis and sequence selected for the propertiesReplaces the previous organization when run againOption 2: Create variants matrixCreate a standalone matrix of component instances.Uses only selected properties (via checkboxes), arranges components based on the axis and sequence selected for the propertiesBuilds the matrix from the current instance state: preserves boolean values, text overrides, swaps, and nested overridesCan be updated later as your component evolves⸻Plugin settings ⚙You can fine-tune how matrices are created and displayed:Add brackets at the level closest to the matrixAlways include property names in row and column labelsDo not skip empty rows or columnsConfigure the position of row and column labels relative to the matrixAll settings are remembered and reused in subsequent plugin runs.