Power Apps

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

  • 2024.03.18

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 を持つアプリ作成を行うきっかけになれば素敵ですね♪正式版リリースも楽しみですね。

関連コース

  • CI613-H Power Apps による Microsoft 365 活用
    Microsoft 365 に含まれるライセンスで利用可能な機能を活用し、Power Apps を使用したローコードアプリ作成の手法を実践的に学ぶコースです。キャンバス アプリのしくみや挙動を詳細に理解し、実務で役立つテクニックを習得できます。「受付管理」 「問合せ管理」、「申請・承認プロセス」 などの具体的な業務シナリオを題材に、実際に 2 つの業務アプリを作成!
  • CI619-H Power Apps Premium によるアプリ作成
    Power Apps Premium (有償プラン) の利用を前提とし、Dataverse の利用方法や Dataverse をデータソースとしたキャンバスアプリ、モデル駆動型アプリの作成方法、Power Platform のその他サービスとの連携まで実践的な実習とともに解説します。
  • CI651-H Power Apps & Power Automate 実践ラボ - 業務管理編
    「業務管理」をテーマに、実務でよくある課題を毎回ピックアップ。設計のポイントや設定手順、つまずきやすいポイントへの対処法、実践的なテクニックや Tips などを確認しながら、実際にアプリやフローを一緒に作成していく、上級者向けの実践型コースです。
  • CI652-H Power Apps & Power Automate 実践ラボ - 承認プロセス設計編
    「承認プロセス設計」をテーマに、実務でよくある課題を毎回ピックアップ。設計のポイントや設定手順、つまずきやすいポイントへの対処法、実践的なテクニックや Tipsなどを確認しながら、実際にアプリやフローを一緒に作成していく、上級者向けの実践型コースです。

お問い合わせ

イルミネート・ジャパンが提供するトレーニングやサービスに関するご相談など、
お気軽にご連絡ください。

担当者に相談する