Skip to content
Specs

Instance Examples

An InstanceExample is a pre-configured usage of a whole component — a documented configuration for human readers and tooling, not a live data flow. Scalar props are set directly; slot props are filled with a SlotContentRef. They live on Component.instanceExamples and are emitted only with a Pro license.

type InstanceExample = {
  title?: string;
  propConfigurations?: Record<string, string | number | boolean | SlotContentRef>;
};


type InstanceExamples = Record<string, InstanceExample>;

Properties

PropertyTypeRequiredDescription
titlestringNoHuman-readable label for this example
propConfigurationsRecord<string, string | number | boolean | SlotContentRef>NoProp values — scalars for scalar props, a SlotContentRef for slot props

A PropBinding is not permitted in propConfigurations — an instance example is a static configuration, not a binding.

Slot fills encountered inside an example instance are contributed to the shared slotContentExamples registry (de-duplicated against existing entries), so an InstanceExample holds no slot content of its own — only a SlotContentRef into that registry.

Registry shape

InstanceExamples (Record<string, InstanceExample>) is the shape of Component.instanceExamples. Keys are plain identifier strings matching ^[a-zA-Z0-9_-]+$.

Detection

How example instances are harvested from a Figma file is controlled by processing.instanceExamples.

Further Reading