子パラメータ

任意の Figma フレーム、グループ、コンポーネント レイヤには、子が動的であることを示すために、コンテンツ パラメータでアノテーションを付けることができます。これは、コンテナ コンポーネントの設計や、アプリケーション コードでカスタム コンポーネントを挿入できる設計でのスロットの作成に使用できます。

子パラメータをフレームまたはグループに追加するには、Figma でレイヤを選択し、[Parameters] の横にある [+] ボタンをクリックして、メニューから children を選択します。

UI パッケージが Android Studio にインポートされると、生成された @Composable 関数シグネチャに、パラメータが @Composable RelayContainerScope.() -> Unit 型として表示されます（この場合は customGraphic）。

@Composable
fun HelloCardWithCustomChild(
    modifier: Modifier = Modifier,
    customGraphic: @Composable RelayContainerScope.() -> Unit
) {
    TopLevel(modifier = modifier) {
        Image()
        CustomGraphic { customGraphic() }
        Title()
    }
}

@Preview 関数では、Figma ファイルの設計を使用してスロットが埋められます（この場合は customGraphic パラメータが設定されます）。

@Preview(widthDp = 248, heightDp = 265)
@Composable
private fun HelloCardWithCustomChildPreview() {
    MaterialTheme {
        HelloCardWithCustomChild(
            customGraphic = {
                RelayText(
                    content = "Label",
                    fontSize = 16.0.sp,
                    fontFamily = montserrat,
                    color = Color(
                       alpha = 255,
                       red = 0,
                       green = 0,
                       blue = 0
                    ),
                    textAlign = TextAlign.Left,
                    fontWeight = FontWeight(500.0.toInt())
                )
                RelayImage(
                    image = painterResource(
                       R.drawable.hello_card_with_custom_child_custom_graphic_still
                    ),
                    contentScale = ContentScale.Crop,
                    modifier =
                       Modifier.requiredWidth(132.0.dp).requiredHeight(48.0.dp)
                )
            }
        )
    }
}

子パラメータをレイヤに追加すると、レイヤには次のような影響も生じます。

• レイヤに以前追加されていた Relay パラメータは、Relay for Figma プラグインの UI には表示されず、生成されたコードでは使用できません。
• 生成されたコードでは、レイヤのコンテンツがデフォルトでレンダリングされなくなりました。対応するコンポーザブルのコンテンツは、プレビューでのみ表示されます。コンポーザブルにコンテンツを含めるには、子パラメータにコンテンツを渡すコードをデベロッパーが記述する必要があります。