Make Variants — Extract Components & Generate Variant ComponentSets in Figma

Extract a target component from a Figma page, analyze variant dimensions, and generate a

production-ready ComponentSet. Prioritize reusing existing page content over redrawing.

Invocation Examples

/make-variants 按钮
/make-variants 输入框 fileKey=abc123 nodeId=12:34
/make-variants 标签 页面有三种尺寸：small/medium/large，两种类型：填充/描边
/make-variants 全局提示 根据 oneid-design-system.md 设计系统规范延展变体状态

Execution Flow

Step 0 — Parse Arguments

Extract from $ARGUMENTS:

Step 1 — Observe Page & Identify Reusable Content

> This is the most critical step. Execute all sub-steps in parallel.

1a. Screenshot observation (get_screenshot)

Capture the target node or current page. While reviewing, identify:

• Complete component structure (background, icons, text, border-radius, spacing)
• Whether multiple state versions already exist on the page (default/hover/selected etc.)
• All icons present — memorize their visual form (match by appearance, not name)
• Whether the component is already a COMPONENT type or a plain FRAME

1b. Scan page structure (use_figma)

Run scripts/scan_page.js (replace __TARGET_NODE_ID__ and __COMPONENT_NAME__ with actual values).

This returns:

• target — matched node info with children details
• icons — up to 30 reusable icon candidates on the page
• textIcons — suspected text characters masquerading as icons (⚠️ must be replaced)

1c. Search design system (search_design_system)

Search for the component name and any icon names referenced.

Step 2 — Determine Reuse Path

If the page contains an existing built version of the target component (COMPONENT or FRAME):

> Clone the entire node. Do not redraw any elements. Preserve the cloned node's color token

> references, and apply the same design system's color tokens when generating variants.

// ✅ Clone existing, modify only variant-specific properties
const source = figma.getNodeById('SOURCE_NODE_ID');
const cloned = source.clone();
// Modify only: background, text color, icon color, opacity for state differences
// Prefer design system token values for all colors

Applicable when:

• The page already contains one or more state versions of the component
• The component structure is clear and children are directly reusable

Step 3 — Resolve Icon Resources

If textIcons were detected in Step 1b, replace them before proceeding.

Consult references/icon-resolution-strategy.md for the full priority-based resolution process:

1. Same-page INSTANCE search — run scripts/find_real_icon.js
2. Component library import — importComponentByKeyAsync
3. SVG generation — createNodeFromSvg (must match observed visual style)

Absolute prohibitions: No Unicode characters, emoji, color blocks, or invented icon styles as substitutes.

Step 4 — Analyze Variant Dimensions

Determine variant dimensions from screenshot observations and argument descriptions.

Consult references/design-tokens.md for:

• Design system priority order
• Token values (OneID, Ant Design, Material Design)
• Standard dimension definitions and naming conventions

Naming rule: DimensionA=Value, DimensionB=Value — comma-separated, PascalCase, all dimensions present in every variant name.

Minimum variant set: Prioritize commonly used state combinations; typically 8–16 variants.

Step 5 — Generate ComponentSet

Use scripts/generate_component_set.js as the template. Customize variantDefs array and source node ID before execution.

Critical constraints:

• Use createComponent() + combineAsVariants() — never createFrame()
• Append each component to the page immediately after creation
• Wrap in async function main() with try/catch, end with return main()
• Apply variant-specific modifications (color, text, opacity) after cloning

For common errors, consult references/troubleshooting.md.

Step 6 — Post-Processing

After generating the ComponentSet:

1. Normalize variant names — combineAsVariants may add unexpected prefixes; correct by index
2. Style the ComponentSet frame — light gray fill (r:0.898, g:0.910, b:0.937), cornerRadius: 8
3. Screenshot confirmation — figma.viewport.scrollAndZoomIntoView([compSet]), then take a screenshot to compare with the original

Step 7 — Quality Checklist

Before presenting the output, verify:

• [ ] All variants are COMPONENT type, parent is COMPONENT_SET
• [ ] Variant names follow the unified format, covering all dimension combinations
• [ ] Clone path used when existing content was available
• [ ] Icons sourced from page reuse or component library — no invented icons
• [ ] No text characters or emoji substituting for icons
• [ ] Colors, sizes, and fonts match the original component screenshot
• [ ] Disabled state has correct grayed-out colors
• [ ] ComponentSet is properly named (not default "Component 1")
• [ ] Final screenshot taken and presented to the user

Bundled Resources

Scripts (scripts/)

References (references/)