MoreBeerMorePower

Power Platform中心だけど、ノーコード/ローコード系を書いてます。

Figmaを利用したPower Apps キャンバスアプリの作成

2022の Microsoft Build で大々的にアナウンスのあった Power Apps のExpress Design では、Figma でデザインしたアプリを実際の Power Apps 上で再現 (デザインのインポート) することができます。

Express Designのまとめについては 向井さん のブログをご覧ください。

qiita.com

今回は Figma を利用したデザイン作成~インポートまでの流れを順を追って紹介していきます。

※なお、Figmaはデスクトップアプリもありますが、今回はブラウザー上で操作しています。

サンプルデザインのキャンバスアプリ化

※大前提ですが、Figmaのアカウントは作成しておいてください。ググるとたくさん記事がありますので、ここでは割愛します。

Figmaでの操作

さて、Figma を利用したキャンバスアプリ作成では、Microsoft により提供されている Figma 用の UI Kit (スクリーンやコンポーネントの集まり+サンプル) を利用します。以下のリンクを表示して、画面右上に表示されている "Duplicate" ボタンを押してください。

https://www.figma.com/community/file/1110934196623232680

これで自分のFigmaアカウントに Power Apps UI Kitがコピーされます。

サンプルなど含んでいるので、元のファイルは取っておいて、編集用にコピーを作っておきましょう。 画面上側のタイトル右に表示されるドロップダウンで、"Duplicate" をクリックします。

これで好きなように弄って(壊して)大丈夫なサンプルができました。

ファイル一覧に戻って、コピーした方をダブルクリックするとデザインエディターが開きます。

左ペインの"Pages" という一覧 にアプリをデザインしていくためのガイドやサンプルの画面デザインが表示されています。 この中の "Sample app" を選択すると、ちょっとオシャレなアプリっぽい画面が出てきますね。しかも複数画面。

ではこれを早速 Power Apps のアプリにしてみます。

一覧の "Sample app" を右クリックすると各種メニューが表示されるので、この中で"Copy link to page" をクリックして、どこかメモ帳などにリンクを貼り付けておきましょう。

次に FigmaでPersonal Access Tokenを発行します。 再度ファイル一覧に戻って、右上の人アイコンをクリックします。

"Settings" を選ぶと、アカウント設定などが表示されますので、下の方にある "Personal access token" のところで、トークンを発行します。

これもメモ帳などに一時的にコピーしておきましょう。

Power Appsでの操作

Power Apps のキャンバスアプリを作成するところにでっかく "Figma" と書いてあるボックスがありますので、これをクリック。

表示される入力欄に、アプリの名前、Figmaのページのリンク、FigmaのPersonal access token をそれぞれ入力します。

これで完了。少し待つと...

できたー! Figma上でデザインしたのと同じ画面が Power Apps にも追加されたことがわかります。 しかも手書きは1画面だけど、Figmaは複数画面ですからね!!!

ということでこれで終わりです

...ではありません。手書きからアプリを作成した際には Dataverseのテーブルを関連付け/新規作成できましたが、Figmaから生成した場合にはデータを手で設定していく必要があります。

ただデータソースは特に縛りないので、SharePointなりOutlookなりExcelなり、すきなソースを追加してフォームと関連付けすればよいでしょう。

以上でサンプルの追加は終わりです。

自分のデザインをスクラッチで

サンプルを改造してもいいですが、自分で一からデザインしたい場合には新たにページを追加する必要があります。

初見だとここからどうすればいいか詰むんですが、あわてず騒がず、今表示がレイヤー一覧になっているので、"Assets"をクリックして利用できるコントロールを表示します。

すぐさま Phone/Tabletという表示が目に入りますね。そのメニューを展開すると追加可能なスクリーンの雛形が出てきます。ドラッグアンドドロップで真ん中のグレーのエリアに画面を追加しましょう。

追加したら 右クリックで表示されるメニューから "Detach instance" を選びます。(これが何なのかよくわかっていないけど、とにかく必要な操作なので)

あとは適当にラベルやらテキスト入力などのコントロールを追加してレイアウトを作っていきます。

ここで注意!

そのままだとラベルやテキスト入力の中のヒントを編集しようとしてもできないんですね。これでだいぶ悩みました。 (通常であればダブルクリックするとテキストが編集できる)

これは既定で当たっているフォント SegoeUI が Figmaのブラウザー版で利用できないために発生するようです。

Figmaではこのようにフォントが適切に設定されていない場合、右上の "A?"というボタンから一括でフォントの置き換えができます。

ちゃんと当たっていない各種フォントを 適当なものに置き換えましょう。 (Gothic A1とかが綺麗でおすすめ)

これを行うと無事ラベルの文字列を編集できるようになります。

あとはサンプルの場合と同様に、ページのリンクをコピーしてアプリを作れば完了です。

おわりに(感想)

まだプレビューなUI Kitですが、いまのところ一覧表示系のコントロールはサポートされていないようです。なので何かしらの画面とフォームくらいですね。

今後一覧表示がFigmaでデザインできるようになるとずいぶん幅が広がるかなと思います。

あとは、FigmaでデザインするのはいつもPower Appsでアプリ作っている人のやることではないですね。 Figma覚える+使う労力 >> Power Appsでそのまま作る労力 という感じです。

ですのであくまでもPower Appsを触り慣れていないデザイナーさん向けの機能と言えるでしょう。

最近のアップデートはなんでもそうですが、自分で全部カバーする必要はない です。いろんなロールの方が関われるようにする機能追加が主なので、Figmaも必ずしも抑えておかないといけないというわけではないかな。