Figma ファイルから Power Apps キャンバス アプリを作成

Power Apps でキャンバス アプリを作成する方法は、空のアプリから作成するだけではなくデータから作成する方法やページデザインから作成する方法、テンプレートから作成する方法とどんどん多様化されています。最近では Copilot による作成もできるようになりました。それぞれいろいろ特徴があるため、うまく使い分けを行うことが理想的ですが、今回は Figma ファイルからアプリを作成する方法をご紹介します。

Figma はデザインツールの 1 つで、無料プランもあることからプロのデザイナーだけでなく初心者から利用しやすいツールです。Power Apps 用に Figma UI キットが提供されています。

Figma UI キットの表示と Figma ファイルの作成

1. 以下のサイトより [Figma で開く] をクリックし、UI キットの画面を開きます。
   Microsoft Power Apps – Create Apps from Figma UI Kit (Preview)
   ※ Figma アカウントでログインが必要です。
   
   
2. Figma アプリ内に UI キットが表示されます。英語ですが、使い方は丁寧に書いてありました。
   

   記載されている手順等を活用し作成したアプリがコチラ。今回は、スタートページになる画面と問合せ入力画面になりそうなものを作成してみました。
   

   タブレットサイズとして記載されていた 1366 × 768 のフレームを作成し、その中にアセットから各種コントロールを配置していくという手順で作成してみました。フォームについては、公式ドキュメントに [インスタンスの切り離し] をするように記載があったのでその手順は注意が必要です。

Power Apps へのデザインの取り込み

デザインが作成できたら、早速 Power Apps へとりこんでみます。

1. 作成したアプリの画面ページを右クリックし [ページのリンクをコピー] をクリックします。メモ帳等に控えておきましょう。
   
2. 続いて、Figma の個人用アクセストークンを取得するため [アカウントの設定] をクリックします。
   
3. 表示されたダイアログ内にある個人用アクセストークンセクションより [新規トークンを作成] をクリックし任意の名前をつけてトークンを生成します。こちらも作成したトークン文字列は後で利用するためコピーして控えておきましょう。
   
4. Power Apps を開き、左のナビゲーションより [作成] をクリックします。
5. 画面内にある Figma をクリックしましょう。
   
6. 任意のアプリ名を入力し、先ほど控えておいたページへのリンクや Figma 個人用アクセストークンを入力し [作成] をクリックします。
   
7. “準備をしています…” が終わるまでしばらく待ちます。
   
   そのまま待機してみると・・・・。
   ちゃんと 2 つのスクリーンが出来ていました♪
   
   

   背景のつもりでセットした画像がはみ出して見えているのが気になりみてみたところ、スクリーンの背景として入っているのではなくスクリーンの中に画像が入っているからはみ出して見えているようです。アプリをプレビューしてみたところ、Figma で指定していたイメージ通りにうごきました♪
   
   作成されたアプリを確認したところデザイン面においても修正が必要な部分が多少ありましたが、思っていたより綺麗にできていました。ボタンやテキスト入力、ドロップダウン、ラベルなど Figma でコントロールを挿入する形で作成しているため、コントロールの間違いなどは発生しないというのが大きいのかもしれません。

   Figma UI キットから作成するのはアプリのデザイン部分のみのため、アプリとして利用していける状態にするめには、この後各ボタンに動作をつけたり、フォームをデータソースと紐付けたりする作業を行うなど各種機能の実装が必要となります。

   なお、現在 Figma UI キットはプレビュー版であり正式版ではないため利用については自己責任となりますが、こういったアプローチでアプリ作成をすることにより、見た目がよく使いやすい UI を持つアプリ作成を行うきっかけになれば素敵ですね♪正式版リリースも楽しみですね。