#170 Figma Pluginでガイドロックを再現する方法を検討してみる

はじめに

Figmaで作業していると、ガイドをうっかり動かしてしまうことがよくあります。特にオブジェクトを選択・移動する際に、ガイドまで一緒にずれてしまうと、小さなストレスになります。Figma本体にはガイドロック機能が存在しないため、Figma Pluginなどでガイドをロックできないかと思っていました。結論としては現時点のFigma APIでは定規やガイドは取得・操作が不可能なようです。
そこで今回は、ガイドロックの代替案を検討したいと思います。まずその前段階としてFigma Pluginの基本とFigmaのガイドの特徴を整理し、２つの代替案を考えてみました。

Figma Pluginについて

Figma APIには3種類あり、それぞれ以下のような特徴があります。

• REST API
  他のシステムから、Figmaを開いていないときでもFigmaファイルの内容を読み取ることができます。コメントやファイルメタデータ、バージョン履歴も扱うことが可能です。Plugin APIやWidget APIを使いながらREST API を呼び出して、ほかのファイルの内容にアクセスすることもできます。FigmaのREST APIはコメント、変数、開発リソースを除きほぼ読み取り専用になっています。
  　

• Plugin API
  Nodeプロパティを取得して作業中のファイルの読み込みや書き込みを行い、デザインをリアルタイム操作や編集することができます。
  ユーザが開いている現在のファイルに対してのみ動作します。

• Widget API
  キャンバス上でウィジェットを直接作成できます。ユーザが開いている現在のファイルに対してのみ動作します。

デザイン上のものに直接アクセスできるのはPlugin APIのみです。
Plugin APIを使用したFigmaのプラグインは基本的にJS・HTML・CSSで実装できます。公式はTS推奨です。Figmaデスクトップアプリからテンプレートを入手して作成することができます。入手、準備方法はこちらの記事を参考させていただきました。

Figmaのガイドについて

Figma内のガイド線には以下のような特徴があります。

・ガイドはレイヤーパネルに含まれない
・ガイドはエクスポートに含まれない
・ガイドはロックできない
・ガイドは表示非表示できる
　→非表示中は動かせなくなる
・スナップ(要素吸着)機能がある
　→吸着精度が高い(GPU最適化と内部座標補正が効いているといわれる)
・Rulerからドラッグで追加される/ドラッグでRulerに戻すことで削除できる
　→メニューやショートカットでの追加削除はできない
・Node（オブジェクト）ではないためFigmaAPIでの取得や制御ができない
　→Rulerに紐づいたUI要素であり構造は非公開
　→FigmaPluginでは、ガイド自体に変更を加えることができない

illustratorのガイドとの比較

IllustratorのガイドはFigmaと比べ、より柔軟な制御が可能です。まず第一にロック機能があります。レイヤーパネルにも表示されます。Figmaではガイド自体の取得はできませんでしたが、Illustratorではガイド自体がオブジェクトとして扱われるため、プラグインなどから取得・編集することもできます。色や角度のカスタマイズも可能で、表示・非表示の切り替え中でも選択や削除ができるなど、操作性に幅があります。
ただし、Illustratorのスナップ精度は設定に依存するため、Figmaほどの補正は効いていない場合もあります。Figmaは制約が多い分、スナップの精度や動作の軽さに特化しているようです。

Figma APIの制限

Figma Pluginは、Figma APIを利用してFigmaのドキュメント構造にアクセスし、Nodeやスタイル、ページ、選択状態などを取得・操作できます。
ただし、すべてのUI要素にアクセスできるわけではなく、内部的なUI要素には制限があり、ガイドや定規などはこの内部的なUI要素に当たります。

• 取得できる情報の例

  • ページ内のNode（Frame, Group, Vector, Textなど）
  • Nodeの位置・サイズ・スタイル・制約情報（constraints）
  • ページ構造（currentPage, selection, viewportなど）
  • ペイントスタイル、テキストスタイル、エフェクトスタイル
  • Plugin起動時のコンテキスト（ユーザー選択、ファイル情報など）

• 取得できない情報の例

  • ガイド
    →figma.currentPage.guides で座標は取得可能
    →個別のガイドオブジェクトは存在しないため、ガイドの追加・削除・ロックといった操作イベントはできない
  • 定規そのものの表示状態や操作
  • コメントの位置や内容
  • UI上の補助要素（スナップライン、ツールチップなど）

ガイドを操作するのに足りないもの

ガイドはNodeではなく、定規に紐づいたUI要素として扱われているため、Pluginからは直接アクセスできません。そのため、以下のようなことは現時点ではできません。

• ガイドの追加・削除
• ガイドのロック・選択・移動
• ガイドの表示／非表示の切り替え
• ガイドに対するイベント検出（変更されたかどうか）

Figmaの設計思想として、ガイドは「軽量な補助線」であり、構造的に他のオブジェクトとは分離されているため、Plugin APIの対象外になっていると考えられます。
ガイドロックを再現するには、Nodeで仮想的なガイド線を作成して代替するか、ガイドの座標を監視して補正するしかないようです。

代替案①仮想ガイド

まず1つ目の代替案は、ガイドっぽい線をNodeとして描画して、整列補助の役割を持たせるというものです。

方法の例

この代替案では、Figma Pluginで作成できる線オブジェクト（Vector）を使って、水平・垂直の線を仮想ガイドとして配置します。線の座標を計算し、近くにあるオブジェクトとの位置関係を判定することで、整列しているかどうかを判断します。

仮想ガイドで使用する線オブジェクト（Vector）はPlugin APIから取得できるNodeなので、ユーザーが誤って動かさないようにロックしておくことや色の変更も可能になります。また、表示・非表示の切り替えもPlugin内で制御できます。

懸念点

仮想ガイドはFigmaの本物のガイドとは異なり、オブジェクトのスナップ対象にはなりません。また、表示の切り替えやconstraints, bounding boxなどを用いた整列判定のロジックなどをすべて自前で実装する必要があります。ガイドの数が増えると操作性が低下する可能性もあるため、使い方に工夫が求められます。

代替案②ガイド補正

もう1つの代替案は、Figmaの本物のガイドを使いつつ、ユーザーが動かしてしまった場合に元の位置に戻すというものです。

方法の例

まずPlugin起動時に読み取り専用のfigma.currentPage.guidesで現在の本物のガイドの座標情報を記録しておきます。その後、ユーザーの操作（選択変更など）をトリガーに、ガイドの位置が変わっていないかを確認しにいきます。もし移動されていたら記録しておいた座標に復元することで、ロックされているような挙動を実現しようという方法です。

こちらの場合、Figmaのガイド機能をそのまま使えるので、スナップなどの基本機能をそのまま活かすことができます。

懸念点

ガイドの変更をどのくらい正確に検出できるのかや、ユーザーが意図的に動かした場合でも強制的に元に戻してしまう可能性があります。また、Pluginが起動していない間の操作には対応できない制約もあります。

おわりに

Figmaのガイドは軽量で高速なUI補助として優れていますが、柔軟な制御やロック機能がないため、Pluginによる代替手段がほしくなる場面もあります。今回紹介した２つの代替案にもそれぞれ利点と制約がありますが、どちらがより自然で快適な操作感につながるか、今後試しながら検証していきたいと思います。
最後までお読みいただきありがとうございました。

参考

https://tech.enigmo.co.jp/entry/2020/12/15/152519
https://www.figma.com/plugin-docs/
https://www.figma.com/developers/api