Figmaプラグイン│インスタンスの入れ替え

Figmaを使っていると、インスタンスの入れ替えに苦労した経験はありませんか？

実はこの機能、UI上でもどこにあるのか分かりづらい上に、Figma APIの使い勝手もわかりにくいです。

swapComponent()は公式で用意されています。
ノードに対応するメインコンポーネントを自動で探してくれる仕組み等は自作する必要があります。

そのため、プラグイン開発者は自分で代替手段を考える必要があります。

そこで他の機能と組み合わせてインスタンスの入れ替えプラグインを作成してみました。

• インスタンスの親子関係から対象を探し出し
• 任意のコンポーネントに差し替える

UIの操作も差し替え先のメインコンポーネントを登録。

差し替えたいインスタンスも登録（複数可）して入れ替えます。

今回は登録式にしていますが、プラグイン化することで、ノードIDで差し替えるなどいろいろ応用が効くと思います。

インスタンスの入れ替えFigmaプラグイン

APIが直接用意されていないので、以下の流れで代替しています。

1. ソースコンポーネントをキャプチャ
   → 差し替え先になるメインコンポーネントを登録
2. ターゲットをキャプチャ
   → 選択ノードから最近傍の INSTANCE を特定し、置換対象リストに保存
3. swapComponent() で入れ替え
   → 公式APIの swapComponent() は存在するため、差し替えはこれで実行
4. 複数対象を一括処理
   → 成功／失敗をカウントして結果を通知

この方法でユーザーにとって分かりやすい一括置換機能を実現できます。

以下プラグインのコードです。

Figmaのほかの操作は、まとめからご覧いただけます。