Compila una app completa con Relay y Jetpack Compose

1. Antes de comenzar

Relay es un kit de herramientas que permite a los equipos diseñar componentes de IU en Figma y usarlos directamente en proyectos de Jetpack Compose. Elimina la necesidad de especificaciones de diseño tediosas y ciclos de QA, lo que ayuda a los equipos a crear IUs excelentes de Android.

En este codelab, aprenderás a integrar paquetes de IU de Relay en el proceso de desarrollo de Compose. Se centra en las técnicas de integración, no en el flujo de trabajo de extremo a extremo. Para obtener más información sobre el flujo de trabajo general de Relay, consulta el instructivo básico.

Requisitos previos

• Tener experiencia básica con Compose. Si aún no lo hiciste, completa el codelab sobre aspectos básicos de Jetpack Compose.
• Experiencia con la sintaxis de Kotlin.

Qué aprenderás

• Cómo importar paquetes de IU
• Cómo integrar los paquetes de IU con la arquitectura de navegación y datos
• Cómo unir paquetes de IU con la lógica del controlador
• Cómo asignar estilos de Figma a tu tema de Compose
• Cómo reemplazar paquetes de IU con funciones de componibilidad existentes en el código generado

Qué compilarás

• Un diseño de app realista basado en paquetes de Relay proporcionados por un diseñador. La app se llama Reflect y es una app de seguimiento diario que fomenta el mindfulness y los buenos hábitos. Contiene una colección de segmentos de distintos tipos y la IU para agregarlos y administrarlos. La app se verá como en la siguiente imagen:

Requisitos

• La versión más reciente de Android Studio
• Una cuenta de Figma gratuita y un token de acceso personal

2. Prepárate

Obtén el código

Para obtener el código necesario para este codelab, sigue uno de estos pasos:

• Clona el repositorio de relay-codelabs desde GitHub:

$ git clone https://github.com/googlecodelabs/relay-codelabs

• Navega al repositorio de relay-codelabs en GitHub, selecciona la rama que desees, haz clic en Code > Download zip y descomprime el archivo ZIP descargado.

En cualquier caso, la rama main incluye el código de partida y la rama end incluye el código de la solución.

Instala el complemento Relay for Android Studio

Si aún no tienes el complemento Relay for Android Studio, sigue estos pasos:

1. En Android Studio, haz clic en Settings > Plugins.
2. En el cuadro de texto, escribe Relay for Android Studio.
3. En la extensión que aparece en los resultados de la búsqueda, haz clic en Install.

4. Si ves un diálogo con el mensaje Third-party plugins privacy note, haz clic en Accept.
5. Haz clic en OK > Restart.
6. Si ves un diálogo con el mensaje Confirm exit, haz clic en Exit.

Conecta Android Studio con Figma

Relay recupera paquetes de IU con la API de Figma. Se requieren una cuenta de Figma gratuita y un token de acceso personal para utilizarla (por eso es que se incluyen ambos elementos en la sección Requisitos).

Si aún no conectaste Android Studio con Figma, sigue estos pasos:

1. En tu cuenta de Figma, haz clic en tu ícono de perfil en la parte superior derecha de la página y selecciona Settings.
2. En la sección Personal access tokens, ingresa una descripción del token en el cuadro de texto y presiona Enter (o return en macOS). Se generará un token.
3. Haz clic en Copy this token.

4. En Android Studio, selecciona Tools > Relay Settings. Aparecerá el diálogo Relay settings.
5. En el cuadro de texto Figma Access Token, pega el token de acceso y haz clic en OK. Acabas de configurar el entorno.

Nota: Si quieres obtener más información para configurar el entorno de desarrollo de Relay, consulta Cómo instalar Relay.

3. Revisa el diseño de la app

Para crear la app de Reflect, trabajamos con un diseñador que nos ayudó a definir el color, la tipografía, el diseño y el comportamiento de la app. Creamos estos diseños de acuerdo con las convenciones de Material Design 3 para que la app funcionara de manera fluida con los temas y los componentes de Material.

Revisa la pantalla principal

La pantalla principal muestra una lista de segmentos definidos por el usuario. También brinda indicaciones visuales para cambiar el día activo y crear otros segmentos.

En Figma, el equipo de diseño dividió esta pantalla en varios componentes, definió sus APIs y los empaquetó con el complemento Relay for Figma. Luego de que se empaqueten estos componentes, podrás importarlos a tu proyecto de Android Studio.

Nota: La definición de parámetros de componentes funciona mejor como una colaboración entre diseñadores y desarrolladores. De esta manera, se garantiza que ambos equipos tengan una vista unificada del componente y sus opciones disponibles.

Revisa la pantalla add/edit

En la pantalla add/edit, los usuarios pueden agregar o editar segmentos. El formulario que aparece varía levemente según el tipo de segmento.

De manera similar, esta pantalla está dividida en varios componentes empaquetados.

Revisa el tema

Los colores y la tipografía de este diseño se implementan como estilos de Figma en función de los nombres de tokens de Material Design 3. Esto proporciona una mejor interoperabilidad con los temas de Compose y los componentes de Material.

4. Importa paquetes de IU

Obtén el vínculo a la fuente de Figma

Antes de poder importar paquetes de IU a tu proyecto, debes subir la fuente de diseño a Figma.

Para obtener el vínculo a la fuente de Figma, sigue estos pasos:

1. En Figma, haz clic en Import file y selecciona el archivo ReflectDesign.fig, que se encuentra en la carpeta de proyecto del codelab.
2. Haz clic con el botón derecho en el archivo y selecciona Copy link. Lo necesitarás en la siguiente sección.

Nota: No necesitas importar archivos fuente de Figma en otros contextos aparte de este codelab. El equipo de diseño proporciona una URL.

Importa los paquetes de IU al proyecto

1. En Android Studio, abre el proyecto ./CompleteAppCodelab.
2. Haz clic en File > New > Import UI Packages. Aparecerá el diálogo Import UI Packages.
3. En el cuadro de texto Figma source URL, pega la URL que copiaste en la sección anterior.

4. En el cuadro de texto App theme, ingresa com.google.relay.example.reflect.ui.theme.ReflectTheme. Esto garantiza que las vistas previas que se generaron usen el tema personalizado.
5. Haz clic en Next. Aparecerá una vista previa de los paquetes de IU del archivo.
6. Haz clic en Create. Se importarán los paquetes a tu proyecto.
7. Navega a la pestaña Project y haz clic en la flecha de expansión que se encuentra junto a la carpeta ui-packages.

8. Haz clic en la flecha de expansión que se encuentra junto a una de las carpetas de paquetes. Observa que contiene un archivo fuente JSON y dependencias de recursos.
9. Abre el archivo fuente JSON. El módulo de Relay muestra una vista previa del paquete y su API.

Compila y genera código

1. En la parte superior de Android Studio, haz clic en Make project. El código que se genera para cada paquete se agrega al archivo java/com.google.relay.example.reflect. Las funciones de componibilidad generadas contienen toda la información de diseño y estilo del diseño de Figma.
2. Si es necesario, haz clic en Split para ver el código y obtener una vista previa de los paneles uno junto al otro.
3. Abre el archivo range/Range.kt y observa que las vistas previas de Compose se crean para cada variante de componente.

5. Integra los componentes

En esta sección, examinarás con más detalle el código generado para el segmento de Switch.

1. En Android Studio, abre el archivo com/google/relay/example/reflect/switch/Switch.kt.

Switch.kt (generado)

/**
 * This composable was generated from the switch UI Package.
 * Generated code; don't edit directly.
 */
@Composable
fun Switch(
    modifier: Modifier = Modifier,
    isChecked: Boolean = false,
    isPressed: Boolean = false,
    emoji: String = "",
    title: String = ""
) {
    TopLevel(modifier = modifier) {
        if (isChecked) {
            ActiveOverlay(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)) {}
        }
        if (isPressed) {
            State(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)) {}
        }
        TopLevelSynth {
            Label(modifier = Modifier.rowWeight(1.0f)) {
                Emoji(emoji = emoji)
                Title(
                    title = title,
                    modifier = Modifier.rowWeight(1.0f)
                )
            }
            if (isChecked) {
                Checkmark {
                    Vector(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f))
                }
            }
        }
    }
}

2. Observa lo siguiente:

• Se genera todo el diseño y el estilo del diseño de Figma.
• Los subcomponentes se dividen en funciones de componibilidad independientes.
• Las vistas previas componibles se generan para todas las variantes de diseño.
• Los estilos de color y tipografía están codificados. Corregirás esto más adelante.

Inserta el segmento

1. En Android Studio, abre el archivo java/com/google/relay/example/reflect/ui/components/TrackerControl.kt. Este archivo proporciona los datos y la lógica de interacción a los segmentos de hábitos. Por el momento, este componente muestra datos sin procesar del modelo de segmentos.

2. Importa el paquete com.google.relay.example.reflect.switch.Switch al archivo.
3. Crea un bloque when que se base en el campo trackerData.tracker.type.
4. En el cuerpo del bloque when, llama a la función Switch() Composable cuando el tipo es TrackerType.BOOLEAN.

Tu código debería verse de la siguiente manera:

TrackerControl.kt

when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        Switch(
          title = trackerData.tracker.name,
          emoji = trackerData.tracker.emoji
        )
    else ->
        Text(trackerData.tracker.toString())
}

5. Vuelve a compilar el proyecto. Ahora, la página principal renderiza correctamente el segmento de Switch como se diseñó con datos en vivo.

6. Agrega el estado y la interacción

Los paquetes de IU no tienen estado. Lo que se renderiza es un resultado simple de los parámetros que se pasan. Pero las apps reales necesitan la interacción y el estado. Los controladores de interacción se pueden pasar a funciones de componibilidad generadas como cualquier otro parámetro, pero ¿dónde guardas el estado que manipulan esos controladores? ¿Cómo puedes evitar pasar el mismo controlador a todas las instancias? ¿Cómo puedes abstraer composiciones de paquetes en funciones de componibilidad reutilizables? En estos casos, recomendamos que unas los paquetes generados en una función Composable personalizada.

Une paquetes de IU en una función Composable de controlador

La unión de paquetes de IU en una función Composable de controlador te permite personalizar la lógica empresarial o de presentación y, de ser necesario, administrar el estado local. De todos modos, los diseñadores tienen la libertad de actualizar el paquete de IU original en Figma sin que debas actualizar el código del wrapper.

Si quieres crear un controlador para el segmento de Switch, sigue estos pasos:

1. En Android Studio, abre el archivo java/com/google/relay/example/reflect/ui/components/SwitchControl.kt.
2. En la función SwitchControl() Composable, pasa los siguientes parámetros:

• trackerData: Un objeto TrackerData
• modifier: Un objeto decorador
• onLongClick: Una devolución de llamada de interacción para habilitar la acción de mantener presionados los segmentos para editarlos o borrarlos

modifier

Nota: La recepción de datos de modelo como un objeto separa tu API de controlador del esquema de datos de Range.

3. Pasa un modificador combinedClickable a la función Switch() para controlar las acciones de clic y mantener presionado.
4. Pasa valores del objeto TrackerData a la función Switch(), incluido el método isToggled().

La función SwitchControl() completa es similar a este fragmento de código:

SwitchControl.kt

package com.google.relay.example.reflect.ui.components

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.google.relay.example.reflect.model.Tracker
import com.google.relay.example.reflect.model.TrackerData
import com.google.relay.example.reflect.model.TrackerType
import com.google.relay.example.reflect.switch.Switch

/*
 * A component for controlling switch-type trackers.
 *
 * SwitchControl is responsible for providing interaction and state management to the stateless
 * composable [Switch] generated by Relay. [onLongClick] provides a way for callers to supplement
 * the control's intrinsic interactions with, for example, a context menu.
 */
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SwitchControl(
    trackerData: TrackerData,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
) {
    Switch(
        modifier
            .height(64.dp)
            .clip(shape = RoundedCornerShape(size = 32.dp))
            .combinedClickable(onLongClick = onLongClick) {
                trackerData.toggle()
            },
        emoji = trackerData.tracker.emoji,
        title = trackerData.tracker.name,
        isChecked = trackerData.isToggled(),
    )
}

@Preview
@Composable
fun SwitchControllerPreview() {
    val data = TrackerData(
        Tracker(
            emoji = "🍕",
            name = "Ate Pizza",
            type = TrackerType.BOOLEAN
        )
    )
    SwitchControl(data)
}

5. En el archivo TrackerControl.kt, quita la importación de Switch y reemplaza la función Switch() con una llamada a la función SwitchControl().
6. Agrega casos para las constantes de enumerador TrackerType.RANGE y TrackerType.COUNT.

Nota: Las funciones RangeControl() y ValueControl() Composable ya están implementadas en el código de partida.

El bloque when completo es similar a este fragmento de código:

SwitchControl.kt

when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        SwitchControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.RANGE ->
        RangeControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.COUNT ->
        ValueControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
}

7. Vuelve a compilar el proyecto. Ahora puedes mostrar segmentos, además de interactuar con ellos. La pantalla principal está completa.

7. Asigna componentes existentes

Relay permite que los desarrolladores personalicen el código generado a través del reemplazo de paquetes de IU con funciones de componibilidad existentes. Esta es una excelente manera de generar componentes listos para usar o incluso sistemas de diseño personalizados en tu código.

Asigna un campo de texto

La siguiente imagen es el diseño de Switch Tracker Editor en el diálogo Add/edit tracker:

Nuestro equipo de diseño usó un ReflectTextField en el diseño, para el que ya tenemos una implementación en el código compilado sobre los campos de texto de Material Design 3. Figma no admite campos de texto de forma nativa, por lo que el código predeterminado que genera Relay solo se ve como el diseño; no es un control funcional.

Para reemplazar la implementación real de este elemento, necesitas dos cosas: un paquete de IU de campo de texto y un archivo de asignación. Afortunadamente, el equipo de diseño ya empaquetó nuestros componentes de sistema de diseño en Figma y usó un componente de botón en su diseño de Tracker Editor. De forma predeterminada, este paquete anidado se genera como una dependencia del paquete de barra de configuración, pero utilizas la asignación de componentes para cambiarlo.

Crea un archivo de asignación

El complemento Relay for Android Studio proporciona un atajo para crear archivos de asignación de componentes.

Para crear un archivo de asignación, sigue estos pasos:

1. En Android Studio, haz clic con el botón derecho en el paquete de IU text_field y selecciona Generate mapping file.

2. En el archivo, ingresa el siguiente código:

text_field.json

{
  "target": "ReflectTextField",
  "package": "com.google.relay.example.reflect.ui.components",
  "generatePreviews": false
}

Los archivos de asignación de componentes identifican un objetivo de clase y un paquete de Compose, y una colección opcional de objetos fieldMapping. Estas asignaciones de campos te permiten transformar los parámetros de paquetes en los parámetros esperados de Compose. En este caso, las APIs son idénticas, por lo que solo necesitas especificar la clase objetivo.

3. Vuelve a compilar el proyecto.
4. En el archivo trackersettings/ TrackerSettings.kt, busca la función de componibilidad TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() generada y observa que incluye un componente ReflectTextField generado.

TrackerSettings.kt (generado)

@Composable
fun TitleFieldStyleFilledStateEnabledTextConfigurationsInputText(
    onTitleChanged: (String) -> Unit,
    title: String,
    modifier: Modifier = Modifier
) {
    ReflectTextField(
        onChange = onTitleChanged,
        labelText = "Title",
        leadingIcon = "search",
        trailingIcon = "cancel",
        supportingText = "Supporting text",
        inputText = title,
        state = State.Enabled,
        textConfigurations = TextConfigurations.InputText,
        modifier = modifier.requiredHeight(56.0.dp)
    )
}

Nota: Para obtener más información sobre la asignación de componentes de Relay, consulta Cómo asignar componentes al código existente.

8. Realiza la asignación a temas de Compose

De forma predeterminada, Relay genera valores literales de colores y tipografía. Así, se garantiza la precisión de la traslación, pero se impide que los componentes usen el sistema de temas de Compose. Esto es evidente cuando ves tu app en modo oscuro:

El componente de navegación por días es casi invisible, y los colores no son los correctos. Para corregir este problema, utiliza la función de asignación de estilo en Relay y vincula los estilos de Figma con los tokens de tema de Compose en el código generado. Esta acción aumenta la consistencia visual entre los componentes de Relay y Material Design 3, y habilita la compatibilidad con el modo oscuro.

Crea un archivo de asignación de estilo

1. En Android Studio, navega a la carpeta src/main/ui-package-resources/style-mappings y crea un archivo figma_styles.json que contenga el siguiente código:

figma_styles.json

{
  "figma": {
    "colors": {
      "Reflect Light/background": "md.sys.color.background",
      "Reflect Dark/background": "md.sys.color.background",
      "Reflect Light/on-background": "md.sys.color.on-background",
      "Reflect Dark/on-background": "md.sys.color.on-background",
      "Reflect Light/surface": "md.sys.color.surface",
      "Reflect Dark/surface": "md.sys.color.surface",
      "Reflect Light/on-surface": "md.sys.color.on-surface",
      "Reflect Dark/on-surface": "md.sys.color.on-surface",
      "Reflect Light/surface-variant": "md.sys.color.surface-variant",
      "Reflect Dark/surface-variant": "md.sys.color.surface-variant",
      "Reflect Light/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Dark/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Light/primary": "md.sys.color.primary",
      "Reflect Dark/primary": "md.sys.color.primary",
      "Reflect Light/on-primary": "md.sys.color.on-primary",
      "Reflect Dark/on-primary": "md.sys.color.on-primary",
      "Reflect Light/primary-container": "md.sys.color.primary-container",
      "Reflect Dark/primary-container": "md.sys.color.primary-container",
      "Reflect Light/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Dark/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Light/secondary-container": "md.sys.color.secondary-container",
      "Reflect Dark/secondary-container": "md.sys.color.secondary-container",
      "Reflect Light/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Dark/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Light/outline": "md.sys.color.outline",
      "Reflect Dark/outline": "md.sys.color.outline",
      "Reflect Light/error": "md.sys.color.error",
      "Reflect Dark/error": "md.sys.color.error"
    },
    "typography": {
      "symbols": {
        "Reflect/headline/large": "md.sys.typescale.headline-large",
        "Reflect/headline/medium": "md.sys.typescale.headline-medium",
        "Reflect/headline/small": "md.sys.typescale.headline-small",
        "Reflect/title/large": "md.sys.typescale.title-large",
        "Reflect/title/medium": "md.sys.typescale.title-medium",
        "Reflect/title/small": "md.sys.typescale.title-small",
        "Reflect/body/large": "md.sys.typescale.body-large",
        "Reflect/body/medium": "md.sys.typescale.body-medium",
        "Reflect/body/small": "md.sys.typescale.body-small",
        "Reflect/label/large": "md.sys.typescale.label-large",
        "Reflect/label/medium": "md.sys.typescale.label-medium",
        "Reflect/label/small": "md.sys.typescale.label-small"
      },
      "subproperties": {
        "fontFamily": "font",
        "fontWeight": "weight",
        "fontSize": "size",
        "letterSpacing": "tracking",
        "lineHeightPx": "line-height"
      }
    }
  },
  "compose": {
    "colors": {
      "md.sys.color.background": "MaterialTheme.colorScheme.background",
      "md.sys.color.error": "MaterialTheme.colorScheme.error",
      "md.sys.color.error-container": "MaterialTheme.colorScheme.errorContainer",
      "md.sys.color.inverse-on-surface": "MaterialTheme.colorScheme.inverseOnSurface",
      "md.sys.color.inverse-surface": "MaterialTheme.colorScheme.inverseSurface",
      "md.sys.color.on-background": "MaterialTheme.colorScheme.onBackground",
      "md.sys.color.on-error": "MaterialTheme.colorScheme.onError",
      "md.sys.color.on-error-container": "MaterialTheme.colorScheme.onErrorContainer",
      "md.sys.color.on-primary": "MaterialTheme.colorScheme.onPrimary",
      "md.sys.color.on-primary-container": "MaterialTheme.colorScheme.onPrimaryContainer",
      "md.sys.color.on-secondary": "MaterialTheme.colorScheme.onSecondary",
      "md.sys.color.on-secondary-container": "MaterialTheme.colorScheme.onSecondaryContainer",
      "md.sys.color.on-surface": "MaterialTheme.colorScheme.onSurface",
      "md.sys.color.on-surface-variant": "MaterialTheme.colorScheme.onSurfaceVariant",
      "md.sys.color.on-tertiary": "MaterialTheme.colorScheme.onTertiary",
      "md.sys.color.on-tertiary-container": "MaterialTheme.colorScheme.onTertiaryContainer",
      "md.sys.color.outline": "MaterialTheme.colorScheme.outline",
      "md.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "md.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "md.sys.color.secondary": "MaterialTheme.colorScheme.secondary",
      "md.sys.color.secondary-container": "MaterialTheme.colorScheme.secondaryContainer",
      "md.sys.color.surface": "MaterialTheme.colorScheme.surface",
      "md.sys.color.surface-variant": "MaterialTheme.colorScheme.surfaceVariant",
      "md.sys.color.tertiary": "MaterialTheme.colorScheme.tertiary",
      "md.sys.color.tertiary-container": "MaterialTheme.colorScheme.tertiaryContainer"
    },
    "typography": {
      "symbols": {
        "md.sys.typescale.display-large": "MaterialTheme.typography.displayLarge",
        "md.sys.typescale.display-medium": "MaterialTheme.typography.displayMedium",
        "md.sys.typescale.display-small": "MaterialTheme.typography.displaySmall",
        "md.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
        "md.sys.typescale.headline-medium": "MaterialTheme.typography.headlineMedium",
        "md.sys.typescale.headline-small": "MaterialTheme.typography.headlineSmall",
        "md.sys.typescale.title-large": "MaterialTheme.typography.titleLarge",
        "md.sys.typescale.title-medium": "MaterialTheme.typography.titleMedium",
        "md.sys.typescale.title-small": "MaterialTheme.typography.titleSmall",
        "md.sys.typescale.body-large": "MaterialTheme.typography.bodyLarge",
        "md.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium",
        "md.sys.typescale.body-small": "MaterialTheme.typography.bodySmall",
        "md.sys.typescale.label-large": "MaterialTheme.typography.labelLarge",
        "md.sys.typescale.label-medium": "MaterialTheme.typography.labelMedium",
        "md.sys.typescale.label-small": "MaterialTheme.typography.labelSmall"
      },
      "subproperties": {
        "font": "fontFamily",
        "weight": "fontWeight",
        "size": "fontSize",
        "tracking": "letterSpacing",
        "line-height": "lineHeight"
      }
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

Los archivos de asignación de temas se estructuran con dos objetos de nivel superior: figma y compose. Dentro de estos objetos, las definiciones de color y tipo se vinculan entre ambos entornos mediante tokens intermedios. Esto permite que se asignen varios estilos de Figma a una sola entrada de tema de Compose, lo que resulta útil cuando brindas compatibilidad con temas claros y oscuros.

2. Revisa el archivo de asignación, en especial la forma en que reasigna las propiedades de tipografía de Figma a lo que espera Compose.

Nota: Para obtener más información sobre la asignación de estilo de Relay, consulta Cómo asignar estilos al tema de Compose.

Vuelve a importar paquetes de IU

Después de crear un archivo de asignación, deberás volver a importar todos los paquetes de IU a tu proyecto, ya que todos los valores de estilo de Figma se descartaron en la importación inicial porque no se proporcionó un archivo de asignación.

Para volver a importar paquetes de IU, sigue estos pasos:

1. En Android Studio, haz clic en File > New > Import UI Packages. Aparecerá el diálogo Import UI Packages.
2. En el cuadro de texto Figma source URL, ingresa la URL del archivo fuente de Figma.
3. Marca la casilla de verificación junto a Translate Figma styles to Compose theme.
4. Haz clic en Next. Aparecerá una vista previa de los paquetes de IU del archivo.
5. Haz clic en Create. Se importarán los paquetes a tu proyecto.

6. Vuelve a compilar tu proyecto y abre el archivo switch/Switch.kt para ver el código generado.

Switch.kt (generado)

@Composable
fun ActiveOverlay(
    modifier: Modifier = Modifier,
    content: @Composable RelayContainerScope.() -> Unit
) {
    RelayContainer(
        backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
        isStructured = false,
        radius = 32.0,
        content = content,
        modifier = modifier.fillMaxWidth(1.0f).fillMaxHeight(1.0f)
    )
}

7. Observa cómo el parámetro backgroundColor se establece en el campo MaterialTheme.colorScheme.surfaceVariant en el objeto de tema de Compose.
8. En el panel de vista previa, cambia al modo oscuro en la app. Se aplica correctamente el tema y se corrigen los errores visuales.

9. Felicitaciones

¡Felicitaciones! Aprendiste a integrar Relay en tus apps de Compose.

Más información

• Descripción general, configuración y documentación de Relay
• Instructivo básico de Relay
• Instructivo avanzado de Relay
• Regístrate para recibir el boletín informativo de Relay