Android Studio のワークフロー

UI パッケージをインポートする

Figma で UI パッケージを作成したら、Android Studio プロジェクトにインポートできます。プロジェクトがビルドされると、Relay により Jetpack Compose コードが生成されます。

UI パッケージを Android Studio プロジェクトにインポートする手順は次のとおりです。

  1. [File] > [New] > [Import UI Packages…] を選択します。

    [File] メニューの [Import UI Packages…] オプション

  2. UI パッケージを含む Figma ファイルの URL を入力します。

    [Import UI Packages] ダイアログ

  3. [Next] をクリックします。

  4. インポートする UI パッケージを選択します。表示されるコンポーネントは、コンポーネント、ページ、ファイルリンクのどれを貼り付けたかによって決まります。UI パッケージがすでにインポートされている場合は 「UPDATED」とラベル付けされ、インポートされていない場合は [NEW] と表示されます。

    コンポーネントのプレビュー

  5. [Finish] をクリックすると、選択したパッケージとその依存関係が ui-packages フォルダにインポートされます。

UI パッケージのインポート画面

インポート画面には次の情報が含まれています。

UI パッケージのインポート画面
  • コンポーネントとそのバリアントのプレビュー画像。
  • タイトルと説明。
  • バリアントとそのプロパティのリスト。
  • コンテンツ パラメータとそのタイプのリスト。
  • インタラクション ハンドラとそのタイプのリスト。

UI パッケージ ツール ウィンドウ

UI パッケージ サイドバー

Android Studio プラグインにより、[UI Package] ツール ウィンドウが追加されます。このウィンドウは、[UI Package] フォルダ内のファイル（例: app/src/main/ui-packages/mycomponent/）を選択すると常に開きます。ツール ウィンドウには、UI パッケージとその内容のサマリーが表示されます。

Android プロジェクトをビルドする

UI パッケージを含む Android Studio プロジェクトをビルドすると、Relay Gradle プラグインにより UI パッケージからコードが生成されてコンパイルされます。また、フォント アセットがダウンロードされ、プロジェクトにコピーされます。

プロジェクト全体ではなく、インポートした UI パッケージのみをビルドしたい場合は、次の特別な Gradle タスクを実行します。

  • generateDebugRelayCode または generateReleaseRelayCode は、UI パッケージから導出されたコードのデバッグ バージョンまたはリリース バージョンを生成します。
  • generateRelayRuntimeCode は、生成されたコードによって使用されるランタイム ライブラリを作成します。

ビルドプロセス中に次の処理が行われます。

  1. コードが UI パッケージから生成され、個別のフォルダに保存されます。
  2. 画像とフォントが、生成された共通のリソース フォルダにコピーされます。

フォルダの場所については、UI パッケージと生成されたコードについてをご覧ください。

UI パッケージを更新する

新しいバージョンのデザインの準備ができたら、デザイナーは Figma ファイルの新しい名前付きバージョンを作成する必要があります。

Android Studio で [Project] ツール ウィンドウが [Android] ビューになっていることを確認します。

  1. モジュールの ui-packages フォルダで、更新する UI パッケージのフォルダを右クリックし、[Update UI Package(s)] を選択します。次の例では、更新する UI パッケージを 5 つ選択しています。

    コンテキスト メニューの [Update 5 UI Packages] オプション

  2. ui-packages フォルダを右クリックして、すべての UI パッケージを更新することもできます。

    コンテキスト メニューの [Update All UI Packages] オプション