Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From skills-for-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.
npx claudepluginhub southleft/skills-for-figma --plugin skills-for-figmaHow this skill is triggered — by the user, by Claude, or both
Slash command
/skills-for-figma:arrange-component-set-figmaThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Reorganize the variants inside a `COMPONENT_SET` into a tidy matrix: it parses each variant's
Measures whether skills, rules, and agent definitions are actually followed by auto-generating test scenarios at 3 strictness levels and reporting compliance rates with full tool call timelines.
Share bugs, ideas, or general feedback.
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.
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).analyze-component-set-figma.get_design_context / get_metadata (read-only) do not cover.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.)State); everything else becomes rows. Override with const COLUMN_PROPERTY.scripts/arrange-component-set.js via use_figma
(skillNames: "arrange-component-set-figma"). Adjust GAP / CELL_PADDING constants if needed.containerId, the (re-created)
componentSetId, and the grid shape (rows/columns, labels). Variants are centered per cell.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.cols × (cell+gap). Variants are positioned by matching their parsed property values to the
row/column index.Inter Regular + Inter Semi Bold for labels — if Inter isn't
available in the file, swap the family in the loadFontAsync calls.componentSetId).