UI パッケージには、他の UI パッケージのインスタンスを含める(またはネストする)ことができ、各レベルでの動的コンテンツとインタラクティビティをサポートします。すべて Relay for Android Studio プラグインを使用して自動的にインポートされます。
ネストされたインスタンスの追加とネストされたパラメータの公開
パッケージ インスタンスは、通常の Figma のコンポーネント インスタンスの追加と同じように追加できます。
ネストされたパッケージ インスタンスをパッケージに追加すると、他のレイヤのプロパティと同様に、ネストされたインスタンス パラメータに基づいてコンテンツとインタラクション パラメータを追加できます。
- パッケージ化されたインスタンス レイヤを選択します。
- [Relay for Figma UI] で [+] 追加パラメータをクリックします。
- ネストされたパッケージ パラメータのいずれかを選択します。
選択したパラメータまたは操作が親コンポーネントによって公開され、ネストされたパッケージ パラメータと親コンポーネントに追加された新しいパラメータの間の接続を形成します。生成されたコードで、親に値を指定できます。この値は、ネストされたパッケージのコード コンポーネントのインスタンスに渡されます。
ネストされたインスタンスが親コンポーネントの複数の Figma バリアントに存在する場合、UI はバリアント インスタンスをグループ化して、個々の構成を有効にします。
デフォルトでは、ネストされたパッケージ インスタンス パラメータは親コンポーネントによって公開されません。代わりに、生成されるコードは、通常のパラメータのオーバーライドと同様に、Figma で指定した値を使用します。
次の例をご覧ください。
- Chip パッケージには、テキスト パラメータ
chip-text
が 1 つあります。 - Description Card パッケージには、チップ パッケージが含まれます。パラメータは次のとおりです。
title
subchip-text
。チップ インスタンスのchip-text
パラメータを公開します。sub-icon
details
Reservation Card パッケージには、Description Card パッケージが含まれています。パラメータは次のとおりです。
hero-image
headline
。Description Card インスタンスのtitle
パラメータを公開します。reservation-text
。Description Card インスタンスのchip-text
パラメータを公開します。summary
。Description Card インスタンスのdetails
パラメータを公開します。
Description Card の唯一のパラメータである sub-icon
は、Reservation Card により公開されません。そのため、Reservation Card のすべてのインスタンスが、Description Card がデフォルトで提供するアイコンを使用します。
ネストされたコンポーネント インスタンスのパラメータを公開するには:
- パラメータを持つ UI パッケージのネストされたインスタンスを選択します。インスタンスは、キャンバスで直接選択するか、Relay for Figma プラグインの [Relay instances] で選択できます。
[Parameters] の横にある [+] をクリックします。選択したインスタンスのパラメータがメニューに表示されます。パラメータを選択します。
これにより、ネストされたインスタンスからパラメータが公開されます。この例では、Description Card インスタンスを選択し、details パラメータを公開しています。
Relay for Figma プラグインの右側にあるペインで、別のパラメータを選択するか、パラメータの名前を変更して、生成されたコードでの呼び出し方法を変更できます。この例では、パラメータの名前が summary に変更され、引き続きネストされたインスタンスの details パラメータを参照します。
親コンポーネント(この場合は Reservation Card)を Android Studio にインポートすると、ネストされたすべてのパッケージ(この場合は Description Card と Chip)も自動的にインポートされます。コードが生成されると、各パッケージは独自のコンポーズ可能な関数を生成します。
この例で生成されるコードは次のようになります。
ReservationCard.kt
..
import com.example.hellofigma.descriptioncard.DescriptionCard
...
@Composable
fun ReservationCard(
modifier: Modifier = Modifier,
heroImage: Painter,
headline: String,
summary: String,
reservationText: String
) {
...
DescriptionCard(
title = headline,
details = summary,
subchipText = reservationText,
subIcon = painterResource(R.drawable.reservation_card_bookmark_icon),
modifier = modifier
)
...
}
DescriptionCard.kt
...
import com.example.hellofigma.chip.Chip
...
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
title: String,
details: String,
subchipText: String,
subIcon: Painter
) {
...
Chip(chipText = subchipText)
...
}
ネストされたパッケージ インスタンスのプロパティのオーバーライド
Figma でネストされたインスタンス プロパティの値をオーバーライドすると、ネストされたコンポーネントがそのプロパティのパラメータを追加した場合にのみ、Compose コードで新しい値が変換されます。それ以外の場合、新しい値は破棄され、ネストされたコンポーネントの元の値がコードで使用されます。
次の例で考えてみましょう。Description Card コンポーネントには、Chip コンポーネント インスタンスがあります。テキストを「Chip Text」から「Reservation Required」に変更することで、Chip インスタンスにオーバーライドを追加しました。
チップにテキストのパラメータがない場合、生成されたコードの説明カードチップには「Reservation Required」ではなく「Chip Text」と引き続き表示されます。
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
) {
...
Chip(
modifier = modifier
// No parameter available to override the chip's text
)
...
}
@Composable
fun Chip(
modifier: Modifier = Modifier,
) {...}
Chip がそのテキストのパラメータ(たとえば chip-text)を持っている場合、生成されたコード内で DescriptionCard
は chipText
パラメータの値として「Reservation Required」を指定して Chip
を呼び出します。
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
) {
...
Chip(
modifier = modifier,
chipText = "Reservation Required"
)
...
}
@Composable
fun Chip(
modifier: Modifier = Modifier,
chipText: String
) {...}
Description Card が Chip'stip-text パラメータを subchip-text として公開している場合、生成されたコード内で DescriptionCard
は subchipText
パラメータを持ち、chipText
パラメータの値として subchipText
を指定して Chip
を呼び出します。
@Composable
fun DescriptionCard(
modifier: Modifier = Modifier,
subchipText: String
) {
...
Chip(
modifier = modifier,
chipText = subchipText
)
...
}
@Composable
fun Chip(
modifier: Modifier = Modifier,
chipText: String
) {...}
さらに、「Reservation Required」がパラメータの値になったため、DescriptionCard のプレビューでのみ、生成されたコードに表示されます。
@Preview
@Composable
private fun DescriptionCardPreview() {
MaterialTheme {
RelayContainer {
DescriptionCard(
subchipText = "Reservation Required",
modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)
)
}
}
}
制限事項
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- 既存のコードへのコンポーネントのマッピング
- コンテンツ パラメータ
- Compose レイアウトの基本