0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100
Documentation

Instancer Docs

Everything you need to know about installing, using, and getting the most out of Instancer.

Quick Start

Getting Started

1

Install the plugin

Open Figma and go to the Community tab. Search for Instancer and click Install.

Direct install link
2

Open the plugin

In your Figma file, go to Main Menu → Plugins → Instancer, or right-click on the canvas and choose it from the context menu. The plugin panel will open at 400 × 600px.

3

Select a component

Click any Component, Component Set, or Instance on the canvas. The plugin reads all available properties and shows them in the panel.

Instancer works with Component Sets, single Components, and Instances. It reads from the main component to get all property definitions.
4

Configure and generate

Toggle which properties to include, choose your layout direction and theme, then click Generate Table. A grid of all combinations appears on the canvas next to your component.

Instancer provides 10 free generations. After that, a one-time upgrade unlocks unlimited generations. Free uses reset per Figma file session.
Combinations Grid

Combinations Grid

Combinations Grid renders every combination of your selected properties as live instances in a labeled table frame.

How the grid is structured

Element
What it shows
Notes
Column Headers
One prop per header row
Span merged cells when adjacent values match.
Row Headers
One prop per header column
Multiple row properties stack horizontally with independent spanning.
Grid Cells
Dashed border cells
Each cell is sized to fit the largest variant plus your spacing value.
Instances
Live component clones
Centred inside each cell. All variant, boolean, and exposed properties applied.
Foundation Layer
Header boxes/brackets
Locked layer underneath — keeps header structure intact during edits.
Instances Layer
All component clones
Editable layer — you can move, swap, or delete individual instances freely.
Text Labels Layer
Property name & value
Locked top layer — keeps labels aligned over the headers.

Frame layers

Every generated table is a single Figma frame with three named child layers:

🔒 Foundation (Locked)

Header boxes or bracket vectors and grid cell outlines. Locked so drags don't break the structure.

✏️ Instances (Editable)

All live component instances. Move, resize, or edit individual instances here.

📝 Text Labels (Top Layer)

Column and row labels (property names and values). Locked on top above the headers.

The table lands to the right of your selection. Off-screen: falls back to left, then below.
Layout

Layout Direction

Control how properties map to columns and rows.

Layout Modes
⊞
Auto-Optimal
Scores every property distribution with a golden-ratio algorithm (1.6:1 target). Penalises layouts over 12 columns or 20 rows.
→
Horizontal
All selected properties go to the column axis. The table will be very wide with a single row — useful when you want to compare variants side by side in one long strip.
↓
Vertical
The first property goes to columns, all remaining properties go to rows. Produces a tall, narrow table — useful for components with many states and few sizes.
⇄
Custom (Drag & Drop)
Drag properties between COLUMNS and ROWS in the Layout Preview. The grid updates as you drag.
Changing the layout direction resets any custom drag arrangement. Make your direction choice first, then fine-tune with drag-and-drop.
Properties

Property Control

Global toggles set defaults. Per-property switches fine-tune inclusion.

Global toggles

B

Boolean Properties

Include or exclude Boolean properties (true / false) in the matrix. Disabling cuts the combination count on components with many toggles.

N

Nested Instances

Include exposed instances (those with "Expose properties to parent" on). Their Variant/Boolean properties join the matrix.

Per-property switches

Every discovered property appears in the Component Properties section with an individual toggle switch. Use these to exclude specific properties without changing the global filter. The Layout Preview and combination count update in real time as you toggle.

Property Type
Badge Color
Notes
VARIANT
Blue
Named options like "Primary", "Secondary", "Ghost". Always included by default.
BOOLEAN
Green
On/off toggles. Expands to true/false values. Controlled by the Boolean toggle.
EXPOSED_INSTANCE
Purple
Nested instances with exposed properties. Shown as "Nested". Controlled by the Nested toggle.
Generating more than 1,000 combinations will trigger a confirmation dialog warning you that generation may take a while. Very large tables (5,000+) can take several minutes as Figma processes each instance.
Property Table

Property Table

Property Documentation Table lists every property, its type, and accepted values. A compact companion to the grid.

Enable it

Toggle Generate Property Table before clicking Generate. Instancer creates both grid and table; the table lands below the grid.

What it shows

Column
Contents
Property
The property name, cleaned of Figma's internal hash suffix (e.g. "variant#123" → "variant").
Type
VARIANT, BOOLEAN, TEXT, or INSTANCE SWAP — displayed as a colored badge.
Values
For VARIANT: all option names. For BOOLEAN: true / false. For TEXT: the current default value. For INSTANCE SWAP: the resolved component name.
The Property Table respects the same theme (color, header style) as the combinations grid — so both frames match visually.
Customisation

Themes & Styling

Match generated tables to your design system.

Color Themes

Choose from 4 built-in palettes — Purple, Ocean Blue, Forest Green, and Sunset Orange — or use the Custom Color picker to enter any hex value. The primary color drives header fill, spanning cell color, grid cell stroke, and text label accent.

Header Style

Box (filled rectangles behind header groups) or Bracket (vector brackets with no fill). Bracket suits minimal docs.

Custom Color Generation

Custom hex colors get a derived theme: secondary, stroke, and accent shades. One pick gives a full table palette.

Theme settings are applied per-generation — they don't persist between plugin sessions. Set your theme each time you open the plugin.
Advanced

Nested Instances

Exposed Instances are nested instances with "Expose properties to parent component" enabled. Instancer includes their Variant/Boolean properties in the matrix.

How nested instances are discovered

1

Tree traversal

Instancer scans the component tree for Instance nodes with <span className="mono text-[11px] bg-secondary/50 px-1 rounded">isExposedInstance === true</span>. Component Sets: first child only to avoid duplicates.

2

Path-based naming

Each exposed instance property is named with its full path: <span className="mono text-[11px] bg-secondary/50 px-1 rounded">InstanceName/propertyName</span>. This avoids collisions when multiple nested instances have properties with the same name.

3

Property application

When generating, Instancer traverses each instance clone again and applies the correct property to the matching nested instance using its path, calling <span className="mono text-[11px] bg-secondary/50 px-1 rounded">setProperties()</span> on the correct node.

Deeply nested exposed instances (instances inside instances) may not be discoverable. Keep them at the first level inside your component.
Tips

Tips & Tricks

1

Select the Component Set

The purple "Component Set" frame exposes all variant options. A single variant or instance limits what Instancer can discover.

2

Auto-Optimal first

Leave layout on Auto-Optimal for new components. Switch to Custom drag-and-drop if the aspect ratio doesn't fit your canvas.

3

Disable Booleans to cut combinations

3 variants × 3 states × 2 booleans = 18 combinations. A second boolean doubles it to 36. Turn off the Boolean toggle to keep tables manageable.

4

Large tables (500+ combinations)

Figma processes instances in batches of 50. Progress updates in the UI. Don't close the plugin panel.

5

Dedicated Variants page

Move grids to a separate page. Keeps design pages clean.

6

Instances layer is editable

Unlock it to swap, resize, or delete individual instances. Foundation and Text Labels stay locked.

Feedback

Figma Community plugin page.

Open on Figma