【Figma Plugins】Figma Pluginsでページ遷移をする #JavaScript

はじめに

FigmaのPluginを開発する際、複数のHTMLファイルを用意して、画面遷移させたいなと思ったことはありますか？
そんな時に使うのが「showUI」という関数です。

この記事では、そんな「showUI」について解説しようとな思います。

showUIとは？

showUI 関数は、Figma側のプラグインに表示されるUIをレンタリングしたり、ブラウザのAPIにアクセスすることができる関数です。

showUI 関数は、以下のように引数のhtmlで指定されたHTMLを<iframe>として生成します。

figma.showUI(html: string, options?: ShowUIOptions)

optionsには、以下の指定することができます。

visible：UIがユーザーに表示されるか
- デフォルト：true
- figma.ui.show()とfigma.ui.hide()を使うと表示を変更することができる
width：UIの幅を決めることができる
- デフォルト：300
- 最小：70
- figma.ui.resize(width, height)を使うと変更することができる
height：UIの高さを決めることができる
- デフォルト：200
- 最小：0
- figma.ui.resize(width, height)を使うと変更することができる
title：UIウィンドウのタイトル
- デフォルト：プラグインの名前
position：UIウィンドウの位置
- デフォルト：iframeの最後の位置またはビューポートの中心
themeColors：CSS変数を使うか
- デフォルト：false
- light theme と dark theme を使うことができる

これらのOptionsを使うと以下のようになります。

figma.showUI(
    __html__,
    {
        width: 400,
        height: 400,
        title: "sample",
        position: { x: 100, y: 100 },
        themeColors: true,
    }
);

特定のHTMLファイルを生成する

puluginを生成していると複数のHTMLを作成して、特定のタイミングで、HTMLファイルを表示したいということがあると思います。
このセクションでは、その方法を紹介します。

① HTMLファイルを生成する

HTMLファイルを生成する場所は、pluginのフォルダー内であれば、指定はありません。

今回は、uiフォルダを新しく作って、uiフォルダ内にHTMLファイルを作ろうと思います。

イメージは以下の通りです。

📁 sample_plugin
　　　　　　┗ 📁 ui
　　　　　　　　　　　　┣ 📄 main.html
　　　　　　　　　　　　┗ 📄 sub.html

② HTMLファイルを呼び出せるようにする

HTMLファイルを生成したら、HTMLファイルを呼び出せるようにします。
HTMLファイルを呼び出せるようにするには、manifest.json を編集します。

{
-  "ui": "ui.html"
+  "ui": {
+    "main": "ui/main.html",
+    "secondary": "ui/secondary.html    
+  }
}

manifest.jsonの "ui"の部分を上記のように
"名前": "呼び出すHTMLファイル・パス" を記述することで、HTMLファイルを呼び出せるようになります。

③ HTMLファイルを表示させる

HTMLファイルを表示させるには、上記で書いたようにshowUI関数を使います。

そして、__uiFiles__ というGlobal Objectsをつかい以下のように指定することで、HTMLファイルを表示させることができます。

code.ts

// main を表示したい時
figma.showUI(__uiFiles__.main);

// secondary を表示したい時
figma.showUI(__uiFiles__.secondary);

上記のように、__uiFiles__.〇〇 とすることで、manifest.jsonの "ui"の部分で記述したファイルを生成することができるようになります。

まとめ

この記事では、「showUI」関数について紹介しました。
「showUI」関数は、FigmaのpluginのHTMLファイルを表示させる関数です。

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。