Información sobre el paquete de IU y el código generado

Paquete de IU

Los paquetes de IU son una nueva forma flexible de intercambiar información de la IU. Los diseñadores usan el complemento Relay for Figma para crear paquetes de IU a partir de componentes de Figma. De esta manera, se declara que el diseño está listo para que lo usen los desarrolladores. Luego, los diseñadores proporcionan a los desarrolladores la URL de su archivo de diseño de Figma.

Los desarrolladores usan el complemento de Android Studio para importar paquetes de IU desde el archivo de diseño de Figma. En un proyecto de Android Studio, un paquete de IU contiene descripciones declarativas de los componentes de Figma importados junto con los elementos asociados, incluidos los archivos de fuentes, las imágenes y los SVG.

Los paquetes de IU son artefactos persistentes y se pueden confirmar en el control del código fuente. Cuando un desarrollador importa un paquete de Figma en un proyecto de Android Studio, los archivos se agregan al proyecto dentro de la carpeta ui-packages. Este es un ejemplo de paquete de IU importado:

Nota: Si no ves la carpeta ui-packages en la vista de Android, ve a Project y, en tu módulo, ve a src/main/ui-packages. También puede ser útil haz clic con el botón derecho en la carpeta de nivel superior y elige “Volver a cargar desde el disco”.

Un proyecto con un paquete de IU importado contiene los siguientes archivos:

• [component_name].json: Es un archivo JSON que describe el componente (por ejemplo, story_card.json).
• config.json: Almacena metadatos para el paquete de IU específico.
• fonts/: Carpeta en la que se almacenan los recursos de fuente que usa el componente, si corresponde.
• *.png: Recursos de imagen que se usan en el componente (por ejemplo, menu.png), si corresponde.
• [component_name]_preview.png: Es la imagen de vista previa del componente (para por ejemplo, story_card_preview.png).
• *.svg: Recursos gráficos vectoriales que se usan en el componente (por ejemplo, un triángulo), si corresponde.
• FONTS.txt: Es una lista de fuentes utilizadas, si corresponde.
• DEPS.txt: Son los nombres de cualquier componente secundario.
• VERSION.txt: Es la versión de Relay que se usó para crear e importar la IU. Paquete.

Estos se almacenan en src/main/ui-packages/[package_name].

Cómo quitar paquetes de IU

Para quitar un paquete de IU del proyecto, puedes borrar la carpeta en ui-packages/. Volver a compilar el proyecto después de quitar la carpeta también quita su código generado.

Advertencia: En Android Studio, la acción de deshacer una carpeta de IU de paquete borrada puede fallar.

Si deshaces la eliminación, de una carpeta de paquete de IU, cualquier archivo dentro de esa carpeta que no se haya abierto antes de la eliminación puede no restablecerse correctamente.

Si tienes este problema, vuelve a importar la versión del archivo de Figma que necesitas medianteFile > New > Import UI Packages…. También puedes hacer clic en cada archivo dentro de la carpeta del paquete de IU en el momento de importarlo para asegurarte de que se restablezcan correctamente.

Estructura de carpetas de código generada

Cuando se compila el proyecto, estos paquetes de IU se convierten en código generado que contiene funciones @Composable que el desarrollador puede invocar. Estos se almacenan en build/generated/. En la vista de Android, se muestran como java (generated) y res en el directorio del módulo (en este caso, el directorio app).

Nota: Según la versión del complemento de Android para Gradle, en la vista de Android, el código generado puede estar en el directorio java, en lugar de java (generated).

En las siguientes capturas de pantalla, se explican los archivos de este directorio:

• Los recursos, como las fuentes y las imágenes, se copian en build/generated/res/relay/.

  

• Cada paquete de IU tiene su código generado colocado en build/generated/source/relay/. Cada carpeta de código generada del paquete de IU tiene un único archivo correspondiente al componente que se importó. También contiene un solo archivo que termina en Fonts.kt y que contiene referencias a los recursos de fuente utilizados por el componente.

  

• También hay una biblioteca de entorno de ejecución, com.google.relay.compose, que proporciona la funcionalidad que usa el código generado.

  

Nota: Si no ves el código generado en las vistas Project o Android, haz clic con el botón derecho en la carpeta de nivel superior y elige “Volver a cargar desde el disco”.

Estructura de código generada

Elementos componibles

Los componentes de Figma se componen de capas. Por ejemplo, este diseño contiene una capa de marcos tarjeta Hello World, que contiene dos capas secundarias, Image (una capa de imagen) y su Title (una capa de texto):

Cuando este diseño se traduce en código, creamos funciones de componibilidad independientes para cada capa, en las que el nombre de la capa de Figma es el nombre de la función de componibilidad (modificado para cumplir con la sintaxis de Kotlin). Las capas se traducen de la siguiente manera:

1. Capa Hello Card:

   @Composable
   fun HelloCard(
     modifier: Modifier = Modifier,
     title: String
   ) {
     TopLevel(modifier = modifier) {
         Image()
         Title(title = title)
     }
   ]
   

2. Capa Image:

   @Composable
   fun Image(modifier: Modifier = Modifier) {
     Image(...)
   }
   

3. Capa Title:

   @Composable
   fun Title(
     title: String,
     modifier: Modifier = Modifier
   ) {
     Text(...)
   }
   

Variantes y parámetros traducidos de Figma

Si un componente de Figma tiene múltiples variantes, el código generado incluye una enum para cada propiedad de variante. Los valores en cada enum de variante corresponden al valor de esa propiedad de variante. El elemento componible incluye un parámetro para cada enum de variante.

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    onNewsCardTapped: () -> Unit = {},
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onMenuTapped: () -> Unit = {}
) {
       when (view) {
           View.HeroItem -> TopLevelViewHeroItem(...) {
               ContentViewHeroItem { ... }
           }
           View.ArticleItem -> TopLevelViewArticleItem(...) {
               ContentViewArticleItem { ... }
           }
           View.AudioItem -> TopLevelViewAudioItem(...) {
               ContentViewAudioItem { ... }
           }
       }
   }
}

Cada parámetro de contenido y controlador de interacción de un componente de Figma se traduce en un parámetro del elemento componible. El elemento componible NewsCard tiene cuatro parámetros de contenido (una imagen y tres strings) y dos controladores de interacción (los dos últimos).

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onNewsCardTapped: () -> Unit = {},
    onMenuTapped: () -> Unit = {}
) {...}