[Figma API] ui.html から該当のページを表示する

地味にハマったのでメモ。

結論から言うと、 figma.currentPage に表示したい PageNode を代入するだけでOK。

let targetPage: PageNode | null = null
// targetPage を取得する処理
if (targetPage) {
  figma.currentPage = targetPage
}

Figma API の ui.html 内のリンクをクリックして、特定のノードにジャンプする機能をつくる想定。

手順としては以下のとおり。

Figma -> ui.html にノード情報を渡す (figma.ui.postMessage -> window.addEventListener('message'))
ui.html でノード情報を表示
ui.html でリンクをクリック -> 当該のノード情報を Figma に渡す (parent.postMessage -> figma.ui.onmessage)
Figma 上で当該のノードにフォーカスする (アプリコマンドで言うところの shift + 1 に近い挙動)

（1〜3の挙動については省く）

4について、対象のノードを複数指定してビューポートに収める関数は figma.viewport #scrollAndZoomIntoView というものがあるのでこれでOK。

ただ上記だけだと、ページが複数ある状態で別ページのノードに遷移する場合には、現在のページのままそれっぽい場所にビューポートが収まるような挙動になる。

ただし、PageNode にそれらしいメソッドは見当たらない…。

figma グローバルオブジェクトには currentPage があるが、これは読み取り専用…と思いきや、代入可能だった。おわり。

hyme