0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100
Figma Plugin · Free & Premium

Generate Every Component
Combination in One Click

Select a component and choose properties. Instancer builds a grid of every variant combination for review, testing, and handoff.

All Combinations
Smart Grid Layout
Variant · Boolean · Nested
Install Free on Figma
What Instancer Does

The Complete Variant Matrix

Stop manually placing component variants one by one. Instancer reads your component's properties and generates every combination in a structured grid — automatically.

Combinations Grid
Core Feature

Combinations Grid

Instancer renders every variant, size, and state combination as instances in a spaced, labeled matrix.

Smart Layout
Core Feature

Smart Layout

Auto-optimal, horizontal, or vertical. Golden-ratio algorithm finds the best column and row distribution.

Property Control
Core Feature

Property Control

Toggle properties on or off. Include or exclude Boolean and Nested Instance properties with one switch.

Property Table
Core Feature

Property Table

Optional companion table: every property, type, and accepted values.

Capability

5 Color Themes

Purple, Ocean Blue, Forest Green, Sunset Orange, or a custom brand color for your table.

Capability

Nested Instance Support

Includes exposed nested instances and their variant or boolean options.

Capability

Span Headers

Headers span merged cells when adjacent values match.

Button — All Variants
9 combinations2 properties
sizeSmall
sizeMedium
sizeLarge
stateDefault
stateHover
stateDisabled
Combinations Grid

Every Variant.
Every Combination.

Instancer reads your component's Variant, Boolean, and Nested Instance properties and generates the full Cartesian product. Each combination becomes a live instance in a spaced, labeled grid on your canvas.

Variant PropsBoolean PropsNested InstancesSpanning HeadersSmart PositioningUniform Cell Size
Layout Direction
Component Properties
sizeVARIANT
3 opts
stateVARIANT
3 opts
hasIconBOOLEAN
2 opts
Total combinations9
Smart Layout

Perfect Grid Layout
Every Time

Optimal mode uses a golden-ratio algorithm to find the best column and row distribution. Override with horizontal or vertical layouts, or drag properties between axes.

Auto-OptimalAI-scored aspect ratio
HorizontalAll props as columns
VerticalAll props as rows
Custom DragDrag props between axes
Live PreviewSee layout before gen
Combo CountTotal shown upfront
Table Theme
Purple
Ocean
Forest
Sunset
Custom
Header Style
Themes & Styles

Match Your
Design System

5 built-in color themes or a custom color picker for your brand. Box and Bracket header styles.

Purple ThemeOcean BlueForest GreenSunset OrangeCustom ColorBox HeadersBracket Headers
Property Table — Button
Property
Type
Values
size
VARIANT
Small · Medium · Large
state
VARIANT
Default · Hover · Disabled
hasIcon
BOOLEAN
true · false
label
TEXT
Get Started
Property Table

Component API
at a Glance

Optional companion table alongside the grid. Lists every Variant, Boolean, Text, and Nested Instance property with type and accepted values.

Variant PropsBoolean TogglesText ContentNested InstancesAll Values Listed
How It Works

Four Steps to Every Combination

Step 01
01

Select a Component

Click any component, component set, or instance on your Figma canvas. Instancer reads all properties automatically.

Step 02
02

Choose Properties

Toggle which Variant, Boolean, and Nested Instance properties to include. Enable or disable them individually.

Step 03
03

Configure Layout

Pick Auto-Optimal, Horizontal, or Vertical. Drag properties between columns and rows for custom arrangements.

Step 04
04

Generate & Done

Click Generate. A fully laid-out grid with spanning headers appears next to your component — instantly.

Ready to Generate Every Combination?

Install Instancer on the Figma Community. 10 free generations. No account or login required.

Install Free on Figma
10 Free GenerationsNo Login RequiredFigma Community