Arrange component set figma

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

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.From its SKILL.md

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

12 stars12 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.

SKILL.md

4.0 KB, 811 tokens by cl100k_base, 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

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.)
Pick the column axis (optional). By default the last variant property becomes columns (usually State); everything else becomes rows. Override with const COLUMN_PROPERTY.
Run scripts/arrange-component-set.js via use_figma (skillNames: "arrange-component-set-figma"). Adjust GAP / CELL_PADDING constants if needed.
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).

What ships with it: 1 file

12.6 KB alongside SKILL.md, 1 of them executable

scripts/

arrange-component-set.jsruns12.6 KB

Gives 0 of the 12 instructions most images graphics skills give in 811 tokens

Counted across 341 of the 354 authors here whose files we hold, read 2026-09-06

Generate images via gemini_generate_imagein 14 of 341, across 10 files
Set the aspect ratio via set_aspect_ratioin 14 of 341, across 10 files
Verify MCP image tools are available before generatingin 13 of 341, across 9 files
Show estimated cost before generatingin 13 of 341, across 9 files
Run the post-generation SEO checklistin 13 of 341, across 9 files
Structure prompts as subject, setting, style, lighting, compositionin 10 of 341, across 5 files
Infer the brand strategy before generatingin 9 of 341, across 5 files
Use at most two logo concept methodsin 9 of 341, across 5 files
Use one dominant palette with repeating accentsin 9 of 341, across 5 files
Extract fileKey and nodeId from the Figma URLin 9 of 341
Read product marketing context before asking questionsin 8 of 341, across 3 files
Keep the logo simple, symbolic, and ownablein 8 of 341, across 4 files

Said here and by no other author read

Inline script inputs as constants at the top
Keep colors in the 0-1 range
Identify the component set id from selection, search, or paste
Use the last variant property as columns by default
Run the arrange script via use_figma
Adjust GAP and CELL_PADDING constants if needed

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.