arrange-component-set-figma

arrange-component-set-figma — labeled variant grid

Reorganize the variants inside a COMPONENT_SET into a tidy matrix: it parses each variant's properties (Size=md, State=hover), uses one property for columns and the rest for rows, centers each variant in a grid cell, and wraps everything in a white container frame with a title, left-edge row labels, and top column headers. The result is the kind of variant sheet you'd show in design-system docs.

Skill boundaries

• use_figma rules — load the official figma-use skill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-level await + return (no IIFE, no figma.closePlugin(); console.log is not returned), inputs inlined as const at the top of each script, colors in 0–1 range, load fonts before any text op, await figma.getNodeByIdAsync(...), and atomic errors (a failed script applies nothing — read the error, fix, retry).
• Understanding what the variants mean (state machine, CSS) → use analyze-component-set-figma.
• This writes a new layout to the canvas — it is a design-system authoring capability the native MCP's get_design_context / get_metadata (read-only) do not cover.

Workflow

1. Identify the set. Get the COMPONENT_SET_ID from selection, search, or a pasted id. (You can also leave the constant blank and select the set on the canvas — the script falls back to the current selection.)
2. Pick the column axis (optional). By default the last variant property becomes columns (usually State); everything else becomes rows. Override with const COLUMN_PROPERTY.
3. Run scripts/arrange-component-set.js via use_figma (skillNames: "arrange-component-set-figma"). Adjust GAP / CELL_PADDING constants if needed.
4. Verify visually. Take a screenshot. The script returns containerId, the (re-created) componentSetId, and the grid shape (rows/columns, labels). Variants are centered per cell.