How to Generate All Component Variants in Figma

A variant is one component inside a component set, defined by values like Type=Primary, Size=Small, State=Hover. You draw each variant. Component properties are the other controls on an instance: a boolean that shows or hides a layer, a text property for the label, and an instance swap for the icon. Nested instances can also expose their own properties to the parent.

This split is why the component set isn't a full picture. A button with 3 types, 3 sizes and 4 states has 36 variants, and all 36 are drawn in the set. Add two booleans, say hasIcon and hasBadge, and there are 144 possible instances. Nobody draws the other 108, but users will still hit them.

• Broken combinations show up. An icon and badge in the small size might overflow, even when each works alone.
• Token mistakes stand out. When 12 hover states sit in one column, the one bound to the wrong color is obvious.
• Modes are easy to check. Set a different variable mode on the grid's frame to see every combination in dark mode or another brand at once.
• Developers get a reference. A labeled matrix maps directly to the prop combinations they need to test in code or a Storybook.

1. Create a frame on a separate page and give it auto layout with wrap, or a grid of fixed-size cells.
2. Drag in an instance of the component from the Assets panel.
3. Duplicate it once per combination. With 144 combinations, plan your rows and columns first.
4. Select each instance and set its variant, boolean and nested properties in the right sidebar. Selecting a whole row or column at once and changing one property speeds this up.
5. Add text labels for column and row headers.

This is fine for a component with one or two properties. Past that, the time goes into setting dropdowns and fixing mislabeled cells, and the grid goes stale the moment someone adds a property. You also have no count to confirm you didn't miss a combination.

Instancer is our plugin for this job. Select a component, component set or instance and it reads the Variant, Boolean and Nested Instance properties, then generates every combination (the Cartesian product) as live instances in a labeled table.

• Property control: global toggles include or exclude booleans and nested instances, and each property has its own switch. The combination count updates as you toggle.
• Layout: Auto-Optimal aims for a roughly 1.6:1 table and avoids more than 12 columns or 20 rows. You can switch to Horizontal or Vertical, or drag properties between the Columns and Rows zones in the Layout Preview.
• Spanning headers: adjacent cells with the same value merge into one header, like a spreadsheet, in box or bracket style.
• Nested instances: exposed nested properties are included with path-based names such as Icon/variant, so they don't collide with the parent's properties.
• Property table: an optional companion frame lists every property, its type and accepted values.

The output is one frame with three layers: a locked Foundation layer for headers and cell outlines, an editable Instances layer, and a locked Text Labels layer on top. Cells are sized from the largest variant, so instances line up. Above 1,000 combinations Instancer asks you to confirm, since Figma takes a while to create that many instances.

Instancer includes 10 free generations, then a one-time upgrade for unlimited use. The Instancer docs explain each layout mode. If you're new to plugins, start with how to install Figma plugins.

Keep the matrix to a useful size

Every boolean doubles the grid. If you only care about how states and sizes interact, switch off booleans and nested instances for the first pass, then run a second, smaller grid for the icon combinations. Deeply nested instances (instances inside instances) may not be discovered, so keep exposed instances at the first level of the component.

Propstar and Regressor also generate combinations of variant and boolean properties, and are worth comparing if you want a different table style. For documenting each property on its own, with anatomy and spacing, a spec is the better format; see how to make Figma design specs. To explain why a particular combination behaves the way it does, add Figma annotations to that cell of the grid.