UI キットを使用してアプリを設計する
[この記事はプレリリース ドキュメントであり、変更されることがあります。]
Figma デザインからアプリを作成するには、Figma UI キットからアプリを作成する から始める必要があります。 UI キットは、コンポーネント、サンプル アプリ、および次のようないくつかの追加リソースで構成されています。
- サポートされているものとサポートされていないものに関する情報。
- Power Apps で変換できるように、Figma でアプリを設計する方法の詳細な手順。
- 基本レベルの画面から、ボタン、ドロップ ダウン、テキスト入力などの個々のコンポーネントまでサポートされているコンポーネントのリスト—。
- コンポーネントの使用方法に関する重要なガイダンス。
UI キットを入手する
- Figma UI キットからアプリを作成する ページに移動します。
- 必要に応じて、Figma の資格情報を使用してログインします。
- 複製 を選択し、次にメンバーである Figma チームを選択します。 Figma でのプロジェクトの複製の詳細については、Figma: ファイルまたはプロジェクトの複製 を参照してください。
- 必要に応じて、ファイル名の横にある下向き矢印を選択し、ファイルを下書きから移動します。
指示を読む
UI キット内の最初にお読みくださいとステップ 1: はじめにページからの指示を読みます。 これらのページの説明は、このキットの使用に関する一般的なガイドラインを理解するのに役立ちます。 また、フォント スタイル、コンポーネント ガイドライン、サポートされているコンポーネントなど、キットで使用されるリソースについても詳しく説明します。
アプリを設計する
UI キット内のステップ 2: アプリを設計するページの指示に従って、キットを使用して独自のアプリ デザインを作成する方法を開始します。
設計する際の注意事項
キットには、コンポーネントの使用方法に関する詳細なガイダンスが含まれています。 ただし、アプリを設計する際に留意すべき重要な注意事項のいくつかを次に示します。
- 設計プロセスと変換プロセスがスムーズに進むように、各ページを注意深くお読みください。
- このキットでサポートされているコンポーネントのみを使用して設計してください。
- キットに一覧表示されているサポートされているフォントのみを使用してください。
- このコンポーネント名を変更できません。
- このコンポーネント レイヤーを変更できません。
詳細情報
キットは、以下に要約する詳細情報の追加ページも提供します。
- ステップ 3: アプリに変換する - アプリのデザインをアプリに変換する視覚的表現。 詳細な手順に従うには、Figma からキャンバス アプリを作成する を参照してください。
- ステップ 4: 次のステップ - ビジネス シナリオに合わせてアプリをさらに準備するために実行できる次のステップについて説明します。 これらの手順には、データへの接続、アプリ ロジックの追加、さらに画面 とコントロール が含まれます。
- サポートされているコンポーネント - サポートされているコンポーネントに関する情報を一覧表示します。 詳細については、UI キットでサポートされるコンポーネント を参照してください。