arrange-component-set-figma

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

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）には、analyze-component-set-figma を使用してください。
• これはキャンバスに新しいレイアウトを書き込みます。ネイティブ 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: "arrange-component-set-figma"）。必要に応じて GAP / CELL_PADDING 定数を調整してください。
4. 目視で確認します。 スクリーンショットを撮ります。スクリプトは containerId、（再作成された）componentSetId、グリッドの形状（行／列、ラベル）を返します。バリアントは各セルの中央に配置されます。

仕組み

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

注意事項

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