Figmaファイルの目次作成を楽にするToC Helperの使い方
Figmaプラグイン『ToC Helper』作りました
ToC HelperはFigmaファイルの目次（Table of Contents）をつくるのを少し楽にするためのFigmaプラグインです。
モチベーション
Figmaのデータ管理のTipsとして、Page内のFrameなどへのリンクを取得し、ページ内リンクのようにFigma上でリンクをやるという方法があります。
FigmaはPageを俯瞰して見られるので、多くの場合は目次まで用意しなくとも困ることは少ないとは思いますが、ある程度まとまったオンボーディング資料などでは目次があるにはこしたことはありません。
ただFigmaに自動で生成するような機能はないので、やるなら手動で一つずつリンクを拾っていかないといけないわけですが、それは少し煩わしいと感じ、少しでも楽になりそうなプラグインはできないかと考えました。
プラグインの使い方
1. プラグインのインストール
まずはToC Helperをインストールします。
プラグインはFigmaのPluginメニュー等から利用します。
2. リンク先のFrameの名前を変更する
ToC HelperはHTMLのアンカーリンクのように、名前の頭に # がついたFrameを自動的に回収する仕組みになっています。
目次の飛び先にしたいFrameの名前の頭に # をつけてください。
3. プラグインを実行する
起動した時点で、# がついたFrameのリストを表示します。
※この時点で順番の変更は（いまのところ）出来ませんが、生成後に並び替えできるのでこの時点では気にしないでください
4. File Keyをセットする
後に生成する目次を作成するために、File Keyというものが必要になります。
ここでは難しいことを考えず、FigmaファイルのURL、またはファイル内の適当なFrameなどのリンクをコピーしてフィールドに入力すると、自動でFile Keyを保存するようにしています。
入力後にフォーカスが外れると、File Keyだけが残ります。
5. Create ToCで生成
生成された目次はFrame名とそのリンク先のURLが並んだものになります。
このFrameはAuto Layoutになっているので、この段階で任意の順番に変更ができます。
6. 名前にリンクを設定する
ここまでお気づきの方がいるかと思いますが、このプラグインでは「リンクの設定」までを自動でおこなうことはできません。
これはプラグインの機能不足ではなく、FigmaプラグインのAPIでは対応していないためです。
ドキュメントから詳細は確認できないですが、これが可能になってしまうと不正なURLに仕込むことなどもできてしまうので、おそらくはセキュリティ上の理由などで出来ないのではないかと思われます。
とにかくここだけはどうしようもないので、リンクを設定するのは手動でおこないます。
まとめ
プラグインがToC Helper であり、少し楽にするためと冒頭に書いた通り、完全自動で生成するプラグインではないものの、無いよりはおそらく便利なのではないかと思われます。
よろしければご活用ください。
Discussion