Par�metros secundarios

Cualquier capa de marco, grupo o componente de Figma se puede anotar con un par�metro de contenido a fin de indicar que sus elementos secundarios son din�micos. Esto se puede usar para dise�ar componentes de contenedor o crear ranuras en el dise�o en las que el c�digo de la aplicaci�n pueda insertar componentes personalizados.

Si deseas agregar un par�metro secundario a un marco o grupo, selecciona la capa en Figma y haz clic en el bot�n + junto a "Parameters" y, luego, selecciona children en el men�.

Par�metro secundario en Figma

Una vez que se importa el paquete de IU a Android Studio, el par�metro aparece en la firma de la funci�n @Composable generada, con el tipo @Composable RelayContainerScope.() -> Unit (en este caso, se llama customGraphic).

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

En la funci�n @Preview, el dise�o del archivo de Figma se usa para rellenar la ranura (en este caso, se establece el par�metro customGraphic).

El elemento secundario de Figma retenido en la vista previa
@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)
                )
            }
        )
    }
}

Cuando se agrega un par�metro secundario a una capa, tambi�n afecta a la capa de las siguientes maneras:

  • Los par�metros de Relay que se hayan agregado con anterioridad a la capa no estar�n visibles en la IU del complemento Relay for Figma y no estar�n disponibles en el c�digo generado.
  • En el c�digo generado, el contenido de la capa ya no se renderiza de forma predeterminada. Se convierte en el contenido del elemento correspondiente que admite composici�n solo en la vista previa. Para que ese elemento tenga contenido, el desarrollador debe escribir c�digo a fin de pasar contenido al par�metro secundario.