opencode/packages/plugins/figma/skills/figma-generate-design/references/componentization.md

Componentize repeated and reusable elements

Componentization is part of the default workflow, not an optional follow-up. Produce a componentized structure on the first pass — do not emit a flat tree of one-off frames and wait for a second "now make it componentized" prompt.

• Design-system instances are already componentized. Where Step 2 found a published component, instancing it satisfies this and is the preferred path.
• For anything the design system does not cover, create a local component when the element repeats or maps to a reusable source component. If the source defines a reusable component (<ListRow>, <StatCard>, <NavItem>) or the same element appears more than once, build it once with figma.createComponent(), then place instances with .createInstance() and override per-instance content — instead of hand-building N near-identical frames.
• Mirror the source's component boundaries. One source component maps to one Figma main component. This keeps the output editable and matches what designers expect to receive.

// Build the reusable element ONCE as a main component...
const row = figma.createComponent();
row.name = "List Row";
row.layoutMode = "HORIZONTAL";
// ...load fonts, then add its auto-layout, children, and text here...

// ...then place instances and override per-item content instead of rebuilding frames.
for (const item of items) {
  const inst = row.createInstance();
  // override text/props on inst (see setProperties / characters patterns above)
  listContainer.appendChild(inst);
}

Keep the main component off to the side of the wrapper (or in a dedicated components area) and place only instances inside the view, exactly as you do with design-system components.