LinkNavi — 画面ナビ一覧を生成する
Figmaで選択したフレームから、画面移動用のナビゲーション一覧を生成するプラグイン。セクション単位でまとめ、一覧から目的のフレームへ素早く移動できます。
大きなファイルの中を、迷わず動く。
画面数が増えたデザインファイルは、目的のフレームを探すだけでも時間がかかります。LinkNavi は、選択したフレームからナビゲーション一覧をつくり、一覧の項目をクリックするだけで対象のフレームへジャンプできるようにします。
セクションを選べば、その配下のフレームもまとめて対象化。セクションごとにアコーディオンで整理され、どこにも属さない単独のフレームは最後にまとめて表示されます。基本はプラグインUI上で完結し、必要なときだけ同じ一覧をキャンバス上にも書き出せます。
迷わせないための、整理。
ファイルを、汚さない。
目的は"移動"なので、まずはプラグインUI内で一覧して飛べれば足りると考えました。キャンバスへの書き出しは必要なときだけの任意機能に。既存ファイルを不用意に変えない判断です。
大きな一覧を、見通せる形に。
画面数が多いほど一覧は長くなります。セクション単位で束ね、折りたためるアコーディオンにして、規模が増えても見通しを保てるようにしました。
例外を、隠さず置く。
どのセクションにも属さないフレームは、無視せず最後にまとめて表示。構造の例外を可視化しつつ、主要な流れは乱さない配置にしました。
できること。
フレームから一覧生成
選択したフレームから、画面移動用のナビゲーション一覧を生成します。
セクション対応
セクションを選ぶと、その配下のフレームもまとめて対象になります。
アコーディオン表示
セクションごとに折りたためて、長い一覧も見やすく整理されます。
ワンクリック移動
一覧の項目から、対象のフレームへ即座にジャンプできます。
単独フレームを整理
セクションに属さないフレームは、最後にまとめて表示します。
キャンバスにも出力
必要な場合のみ、画面リンク一覧を現在のページに作成できます。
つくり方。
「大きなファイルでの移動」というデザイナー自身の困りごとを起点に、UI上での一覧生成を主機能に据えました。実装はTypeScriptで型を保ちながら、AIを活用して Figma Plugin API 側のロジックとUIを一つずつ組み立てています。
探す時間を、なくす。
大きなファイルで「目的の画面を探す」時間を、一覧と移動の設計で減らせないかを試した制作です。使う人の迷いを起点に、必要な機能だけを選び取る判断を重ねました。