Help us improve
Share bugs, ideas, or general feedback.
Arranges a Figma component set's variants into a labeled matrix grid with row/column headers and a titled container. Useful for turning messy variant piles into documentation-ready layout.
npx claudepluginhub southleft/figma-console-mcp-skills --plugin figma-console-mcp-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/figma-console-mcp-skills:figma-arrange-component-setThe 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
Builds or updates full-page screens, modals, dialogs, drawers, sidebars, and panels in Figma by reusing published design system components, variables, and styles instead of drawing primitives with hardcoded values.
Author Figma component property APIs (TEXT, BOOLEAN, INSTANCE_SWAP, VARIANT) and instantiate components with property overrides.
Enforces library-first component lookup, correct Auto Layout structure, and semantic node naming when building UI elements in Figma.
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).figma-analyze-component-set.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: "figma-arrange-component-set"). 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).