하위 매개변수

모든 Figma 프레임, 그룹 또는 구성요소 레이어는 하위 요소가 동적임을 나타내는 콘텐츠 매개변수로 주석을 달 수 있습니다. 이는 컨테이너 구성요소를 설계하거나 맞춤 구성요소가 애플리케이션 코드로 삽입될 수 있는 설계에서 슬롯을 만드는 데 사용할 수 있습니다.

프레임 또는 그룹에 하위 매개변수를 추가하려면 Figma에서 레이어를 선택하고 '매개변수' 옆의 + 버튼을 클릭한 후 메뉴에서 children을 선택합니다.

UI 패키지를 Android 스튜디오로 가져오면 생성된 @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 매개변수는 Figma용 Relay 플러그인 UI에 표시되지 않으며 생성된 코드에서 사용할 수 없습니다.
• 생성된 코드에서는 레이어 콘텐츠가 더 이상 기본적으로 렌더링되지 않습니다. 미리보기에서만 해당하는 컴포저블의 콘텐츠가 됩니다. 컴포저블에 콘텐츠가 있으려면 개발자는 하위 매개변수에 콘텐츠를 전달하는 코드를 작성해야 합니다.