agentsclimarketplace

Arrange component set figma

Skill southleft/skills-for-figma/skills/arrange-component-set-figma

Open-source agent skills for the native Figma MCP server — design tokens, components, accessibility, Slides, and FigJam.

Install
npx -y skills add southleft/skills-for-figma --skill arrange-component-set-figma

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 11 stars11 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Organize a Figma COMPONENT_SET's variants into a clean, labeled grid — rows and columns derived from the variant properties, with row labels on the left, column headers on top, and a titled white container. Use when a variant set is a messy pile and you want a presentable, documentation-ready layout — triggers: 'arrange my variants in a grid', 'organize this component set', 'lay out the variants with labels', 'make a variant matrix', 'clean up my component set layout', 'add row/column headers to my variants'. Picks the last property (usually State) as columns and the rest as rows by default. NOT something the native MCP's read-only tools do — this writes a new organized layout to the canvas.

SKILL.md

4.0 KB, as published. Nobody here has run it

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.

How it works

  • Re-creates the set with figma.combineAsVariants() so it gets Figma's native purple dashed frame (#9747FF, dashed [10,5], inside stroke). Old labels/containers from a previous run are removed first, so re-running is idempotent.
  • Grid math: cell size = max variant size + padding; the set is resized to fit cols × (cell+gap). Variants are positioned by matching their parsed property values to the row/column index.
  • Labels are auto-layout frames built outside the component set (component sets don't nest well in auto-layout) and aligned to each row's vertical center / each column's horizontal center.

Notes

  • Fonts: the script loads Inter Regular + Inter Semi Bold for labels — if Inter isn't available in the file, swap the family in the loadFontAsync calls.
  • Destructive-ish: it deletes the original set and rebuilds it via clones. The variants and their properties are preserved, but the node id of the set changes (returned as componentSetId).
  • One property → columns: if your set has a single property axis, all variants land in one row. Multi-axis sets generate every row combination (cartesian product of the non-column properties).

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.