Figma UI キットを使用してアプリを設計する

3 分

キャンバスアプリの作成に使用する Figma アプリデザインを構築するには、Figma UI キットの一部であるコンポーネントを使用する必要があります。このキットには、アプリで必要になる次のような Power Apps コンポーネントのグラフィック表現が多数含まれています。

フォーム、データカード、およびセクション
テキスト入力、ドロップダウンリスト、およびコンボボックス
トグル、チェックボックス、およびラジオボタン
スライダーと評価
日付ピッカーとタイマー
画像と四角形

Figma UI キットを使用する

Figma UI キットを使用してアプリを設計する際に知っておく必要のある重要な概念を以下に示します。

より優れたレンダリング結果を得るには、Segoe UI フォントを使用します。このフォントがまだ手元にない場合は、ダウンロードできます。
キットのサポートされているコンポーネントのページにあるコンポーネントのみを使用します。
コンポーネント名はそのままにしておきます。問題の発生を防ぐため、ページの名前を変更できるのはキャンバスアプリへの変換時のみです。
提供されているコンポーネントのうち、特定のレイヤーを使用して作成されたコンポーネントが変更されないようにします。
サポートされていない次のコンポーネントには、正確にそのまま変換される画像を使用します。
- グラフ
- アイコン
- 図形
画面をアプリの変換に含めない場合は、画面に msft_Ignore という名前を付けます。

Figma UI キットの使用を開始する

Figma UI キットを使用してアプリを設計するには、次の手順に従います。

Figma UI キットの Web ページに移動します。
Figma で開くを選択します。
画面が Figma に移動します。

Figma UI キットを初めて使用する場合や、手順を復習する必要がある場合は、カバー ページでキットの情報と Figma でのキットの使用方法について説明する 4 つのステップを確認してください。

次の手順

以上で、Figma UI キットを使用してアプリデザインを作成するための基本的な手順の説明を終わります。続いて、Figma UI キットを使用して自転車修理店用のアプリを設計する方法について説明します。