このページは Cloud Translation API によって翻訳されました。

UI パッケージと生成されたコードを理解する

UI パッケージ

UI パッケージは、UI 情報を交換するための新しい柔軟な方法です。デザイナーは、Relay for Figma プラグインを使用して、Figma のコンポーネントから UI パッケージを作成します。これを行うと、デベロッパーが使用できるデザインが宣言されます。その後、デザイナーが Figma デザインファイルの URL をデベロッパーに提供します。

デベロッパーは Android Studio プラグインを使用して、Figma デザインファイルから UI パッケージをインポートします。Android Studio プロジェクトでは、UI パッケージに、インポートされた Figma コンポーネントの宣言型の説明と、フォントファイル、画像、SVG などの関連するアセットが含まれます。

UI パッケージは永続的なアーティファクトであり、ソース管理に commit できます。デベロッパーが Android Studio プロジェクトに Figma パッケージをインポートすると、ファイルは ui-packages フォルダ内のプロジェクトに追加されます。以下に、インポートされた UI パッケージの例を示します。

インポートされた UI パッケージを含むプロジェクトには、次のファイルが含まれます。

[component_name].json - コンポーネントを記述する JSON ファイル（たとえば、story_card.json）。
config.json - 特定の UI パッケージのメタデータを保存します。
fonts/ - コンポーネントで使用されるフォントアセットが保存されているフォルダ（存在する場合）。
*.png - menu.png などコンポーネントで使用される画像アセット（ある場合）。
[component_name]_preview.png - コンポーネントのプレビュー画像（例: story_card_preview.png）。
*.svg - 三角形など、コンポーネントで使用されるベクターグラフィックアセット（ある場合）。
FONTS.txt - 使用されているフォントのリスト（ある場合）。
DEPS.txt - 子コンポーネントの名前。
VERSION.txt - UI パッケージの作成とインポートに使用される Relay のバージョン。

これらは src/main/ui-packages/[package_name] に保存されます。

UI パッケージの削除

プロジェクトから UI パッケージを削除するには、ui-packages/ にあるフォルダを削除します。フォルダの削除後にプロジェクトを再構築すると、生成されたコードも削除されます。

生成されたコードフォルダ構造

プロジェクトがビルドされると、これらの UI パッケージは、デベロッパーが呼び出せる @Composable 関数を含む、生成されたコードに変換されます。これらは build/generated/ に保存されます。Android ビューでは、モジュールディレクトリ（この場合は app ディレクトリ）に java (generated) および res として表示されます。

次のスクリーンショットは、このディレクトリ内のファイルを示しています。

フォントや画像などのリソースは build/generated/res/relay/ にコピーされます。
各 UI パッケージで、生成されたコードが build/generated/source/relay/ に配置されます。各 UI パッケージで生成されたコードフォルダには、インポートされたコンポーネントに対応する 1 つのファイルがあります。また、末尾が Fonts.kt の単一のファイルも含まれます。このファイルには、コンポーネントで使用されるフォントアセットへの参照が含まれています。
ランタイムライブラリ com.google.relay.compose もあり、生成されたコードで使用する機能を提供します。

生成されたコード構造

コンポーザブル

Figma のコンポーネントはレイヤで構成されています。たとえば、このデザインにはフレームレイヤ Hello Card が含まれており、このレイヤには 2 つの子レイヤ、Image（画像レイヤ）とTitle（テキストレイヤ）が含まれます。

このデザインをコードに変換する場合、レイヤごとに個別のコンポーズ可能な関数が作成されます。ここで、Figma レイヤの名前はコンポーズ可能な関数の名前です（Kotlin 構文に合わせて変更されます）。レイヤは次のように変換されます。

Hello Card レイヤ:

@Composable
fun HelloCard(
  modifier: Modifier = Modifier,
  title: String
) {
  TopLevel(modifier = modifier) {
      Image()
      Title(title = title)
  }
]

Image レイヤ:

@Composable
fun Image(modifier: Modifier = Modifier) {
  Image(...)
}

Title レイヤ:

@Composable
fun Title(
  title: String,
  modifier: Modifier = Modifier
) {
  Text(...)
}

変換後の Figma のバリアントとパラメータ

Figma コンポーネントに複数のバリアントがある場合、生成されるコードには、各バリアントプロパティの列挙型が含まれます。各バリアント列挙型の値は、そのバリアントプロパティの値に対応しています。コンポーザブルには、各バリアント列挙型のパラメータが含まれます。

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    onNewsCardTapped: () -> Unit = {},
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onMenuTapped: () -> Unit = {}
) {
       when (view) {
           View.HeroItem -> TopLevelViewHeroItem(...) {
               ContentViewHeroItem { ... }
           }
           View.ArticleItem -> TopLevelViewArticleItem(...) {
               ContentViewArticleItem { ... }
           }
           View.AudioItem -> TopLevelViewAudioItem(...) {
               ContentViewAudioItem { ... }
           }
       }
   }
}

Figma コンポーネントの各コンテンツパラメータとインタラクションハンドラは、コンポーザブルのパラメータに変換されます。以下の NewsCard コンポーザブルには、4 つのコンテンツパラメータ（1 つの画像と 3 つの文字列）と 2 つのインタラクションハンドラ（最後の 2 つのパラメータ）があります。

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onNewsCardTapped: () -> Unit = {},
    onMenuTapped: () -> Unit = {}
) {...}

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
制限事項とトラブルシューティング
Android Studio のワークフロー
コンポーザブルプレビューで UI をプレビューする