Figma を利用したアプリ作成の概要

  • [アーティクル]

[この記事はプレリリース ドキュメントであり、変更されることがあります。]

Figma のデザイン ファイルから直接アプリを作成できることが、アプリの UI 開発プロセスを加速させ、デザインと開発の間のギャップを埋めるのに役立ちます。 これにより、開発者とデザイナーの効果的かつ効率的な共同作業が可能になり、コストと労力をおさえて、優れたエンド ユーザー エクスペリエンスを提供できます。

デザイナーは、Power Apps でサポートされているコンポーネントを提供し、キットの使用方法の詳細な手順が含まれている Figma UI キットからアプリを作成する を使用して、Figma でデザインを作成できます。 デザインが作成されたら、Figma デザイン ファイルへのリンクを提供するだけで、Power Apps はそれらのデザインに基づいて新しいキャンバス アプリを生成します。 デザイン フレームは自動的に Power Apps の画面に変換されます。 アプリの UI の準備ができたら、データに接続、アプリ ロジックの追加、さらに画面とコントロールを追加して、このアプリを拡張できます。

開始する。

アプリを設計する。

アプリに変換する。

次のステップ。

ステップ 1 - 設計を開始する前に、Figma UI キット からアプリを作成するから、サポートされているものといないものについての説明をお読みください。

ステップ 2 - Figma では、サポートされているコンポーネントの操作方法に関する手順とガイダンスが記載されている、このページでアプリを設計します。

ステップ 3 - Power Apps でアプリを変換します。 Figma リンクとトークンを提供することによって行います。

ステップ 4 - 変換後、アプリをさらにインタラクティブで便利なものにするために次の手順を実行します。

Figma でアプリを設計する

Figma UI キットからアプリを作成するを使用して、Figma でアプリを デザイン します。 アプリを設計する際には、キットでサポートされている Power Apps コンポーネントを使用してください。

Figma UI Kit を利用してアプリを作成する

デザインからアプリを作成する

アプリのデザインを完成させたら、手軽で簡単な手順に従って　Figma デザインからキャンバス アプリを作成します。

アプリの作成を続ける

Power Apps Studio でさらに画面とコントロールを追加してアプリの作成を続行します。 また、データに接続してアプリを拡張したり、アプリ ロジックの追加によってさらにカスタマイズすることも可能です。

次の手順: UI キットを使用してアプリを設計する

参照