Flujo de trabajo de Android Studio

Cómo importar un paquete de IU

Una vez que creas un paquete de IU en Figma, puedes importarlo a tu proyecto de Android Studio. Cuando se compila el proyecto, Relay genera código de Jetpack Compose.

Para importar un paquete de IU a un proyecto de Android Studio, haz lo siguiente:

1. Selecciona File > New > Import UI Packages…

   

2. Ingresa la URL de un archivo de Figma que contenga un paquete de IU.

   

3. Haz clic en Next.

4. Selecciona los paquetes de IU que deseas importar. Los componentes que se muestran dependen de si pegaste un componente, una página o un vínculo de archivo. Si ya se importó un paquete de IU, tendrá la etiqueta "UPDATED". De lo contrario, aparecerá como "NEW".

   

   Nota: Los paquetes de IU anidados en otro paquete de IU se importan automáticamente si se selecciona el superior.

5. Haz clic en Finish para importar los paquetes seleccionados y sus dependencias a la carpeta ui-packages.

Pantalla de importación de paquetes de IU

La pantalla de importación incluye la siguiente información:

• Una vista previa de la imagen del componente y sus variantes
• Un título y una descripción
• Una lista de variantes y sus propiedades
• Una lista de los parámetros de contenido y sus tipos
• Una lista de los controladores de interacción y sus tipos

Ventana de herramientas del paquete de IU

El complemento de Android Studio agrega una ventana de herramientas llamada UI Package. Se abre cada vez que seleccionas un archivo dentro de una carpeta de paquete de IU (p. ej., app/src/main/ui-packages/mycomponent/). La ventana de herramientas muestra un resumen del paquete de IU y su contenido.

Cómo compilar tu proyecto de Android

Cuando compilas un proyecto de Android Studio que contiene un paquete de IU, el complemento de Gradle para Relay genera código a partir del paquete de IU y lo compila. Los recursos de fuente también se descargan y copian en tu proyecto.

Si deseas compilar solo los paquetes de IU importados y no todo el proyecto, puedes ejecutar estas tareas específicas de Gradle:

• generateDebugRelayCode o generateReleaseRelayCode generan versiones de depuración o actualización del código derivadas del paquete de IU.
• generateRelayRuntimeCode crea la biblioteca del entorno de ejecución que usa el código generado.

Durante el proceso de compilación, sucede lo siguiente:

1. El código se genera desde el paquete de la IU y se almacena en carpetas separadas.
2. Las imágenes y fuentes se copian en una carpeta de recursos generada y común.

La ubicación de las carpetas está documentada en Información sobre el paquete de IU y el código generado.

Advertencia: Por lo general, el código se vuelve a generar en la compilación si el paquete de IU se actualizó desde la última compilación. Sin embargo, la actualización de una dependencia ubicada fuera del directorio ui-packages no fuerza la regeneración del código cuando compilas el proyecto. Esto puede ocurrir cuando el archivo es un archivo de asignación de tema o un archivo de componente de referencia.

Solución alternativa: Para forzar una actualización del código generado, limpia el proyecto (ve a Build > Clean Project) o la carpeta de código generada asociada con el paquete de IU que debe actualizarse. Luego, vuelve a compilar.

Cómo actualizar un paquete de IU

Cuando hay una versión nueva de un diseño lista, el diseñador debe crear una nueva versión con nombre del archivo de Figma.

En Android Studio, asegúrate de que la ventana de herramientas Project esté en la vista de Android.

1. En la carpeta ui-packages de tu módulo, haz clic con el botón derecho en la carpeta de los paquetes de IU que deseas actualizar y, luego, selecciona Update UI Package(s). En el siguiente ejemplo, seleccionamos cinco paquetes de IU para actualizar.

   

2. También puedes hacer clic con el botón derecho en la carpeta ui-packages para actualizar todos los paquetes de IU.

   

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