figma-arrange-component-set
Installation
SKILL.md
figma-arrange-component-set — 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_figmarules — load the officialfigma-useskill first; it is the full Figma Plugin API reference. Essentials these scripts rely on: plain JS with top-levelawait+return(no IIFE, nofigma.closePlugin();console.logis not returned), inputs inlined asconstat 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
figma-analyze-component-set. - 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.