figma-arrange-component-set

figma-arrange-component-set — ラベル付きバリアントグリッド

COMPONENT_SET 内のバリアントを整然としたマトリックスに再配置します。各バリアントのプロパティ（Size=md, State=hover）を解析し、1 つのプロパティを列に、残りを行に使います。各バリアントをグリッドセルの中央に配置し、タイトル、左端の行ラベル、上部の列見出しを備えた白いコンテナフレームですべてを囲みます。デザインシステムのドキュメントで見せるような、バリアントシートが完成します。

スキルの範囲

• use_figma のルール — まず公式の figma-use スキルを読み込んでください。Figma Plugin API の完全なリファレンスです。これらのスクリプトが依存する基本事項：トップレベルの await と return を使ったプレーンな JS（IIFE は使用せず、figma.closePlugin() も呼び出しません。console.log の内容は返されません）、各スクリプトの先頭で入力を const としてインライン化、色は 0～1 の範囲、テキスト操作の前にフォントを読み込み、await figma.getNodeByIdAsync(...) を使用し、エラー発生時はアトミックに処理（スクリプトが失敗すると変更は一切適用されません。エラーを読み、修正して再試行してください）。
• バリアントの意味を理解すること（ステートマシン、CSS）には、figma-analyze-component-set を使用します。
• これはキャンバスに新しいレイアウトを書き込みます。デザインシステムのオーサリング機能であり、ネイティブ MCP の読み取り専用機能 get_design_context / get_metadata では対応できません。

ワークフロー

1. セットを特定します。 選択、検索、または貼り付けた ID から COMPONENT_SET_ID を取得します。（定数を空欄のままにして、キャンバス上でセットを選択することもできます。スクリプトは現在の選択範囲にフォールバックします。）
2. 列の軸を選びます（任意）。 デフォルトでは、バリアントプロパティの最後のものが列になります（通常は State）。それ以外はすべて行になります。const COLUMN_PROPERTY で上書きできます。
3. scripts/arrange-component-set.js を use_figma 経由で実行します（skillNames: "figma-arrange-component-set"）。必要に応じて GAP / CELL_PADDING 定数を調整してください。
4. 見た目を確認します。 スクリーンショットを撮ります。スクリプトは containerId、（再作成された）componentSetId、グリッドの形状（行／列、ラベル）を返します。各セルではバリアントが中央に配置されます。

仕組み

• figma.combineAsVariants() でセットを再作成し、Figma ネイティブの紫色の破線フレーム（#9747FF、破線 [10,5]、内側のストローク）にします。前回実行時の古いラベルやコンテナは先に削除されるため、再実行しても結果は変わりません。
• グリッドの計算：セルサイズ = 最大バリアントサイズ + パディング。セットのサイズは 列数 × (セル + 間隔) に合わせて変更されます。解析したプロパティ値と行／列のインデックスを照合して、バリアントを配置します。
• ラベルはオートレイアウトフレームで、コンポーネントセットの外側に作成されます（コンポーネントセットはオートレイアウト内でうまくネストできないため）。各行の垂直方向の中心／各列の水平方向の中心に揃えられます。

注意事項

• フォント：スクリプトはラベル用に Inter Regular と Inter Semi Bold を読み込みます。ファイルで Inter を利用できない場合は、loadFontAsync の呼び出しでフォントファミリーを変更してください。
• 破壊的な操作に近い処理：元のセットを削除し、クローンを使って再構築します。バリアントとそのプロパティは保持されますが、セットのノード ID は変わります（componentSetId として返されます）。
• プロパティが 1 つの場合は列が 1 つ：セットにプロパティの軸が 1 つしかない場合、すべてのバリアントが 1 行に配置されます。複数の軸があるセットでは、列に使わないプロパティの組み合わせごとに行が生成されます（直積）。