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_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 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.

Workflow

Installs
41
GitHub Stars
51
First Seen
Jun 1, 2026
figma-arrange-component-set — southleft/figma-console-mcp-skills