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:
Selecciona File > New > Import UI Packages…
Ingresa la URL de un archivo de Figma que contenga un paquete de IU.
Haz clic en Next.
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".
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:
![Pantalla de importación de paquetes de IU](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/android-studio-workflow/ui-package-summary.png?authuser=19&hl=es)
- 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
![Barra lateral del paquete de IU](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/android-studio-workflow/ui-package-sidebar.png?authuser=19&hl=es)
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
ogenerateReleaseRelayCode
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:
- El código se genera desde el paquete de la IU y se almacena en carpetas separadas.
- 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.
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.
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.También puedes hacer clic con el botón derecho en la carpeta
ui-packages
para actualizar todos los paquetes de IU.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Información sobre el paquete de IU y el código generado
- Limitaciones y solución de problemas
- Cómo asignar componentes al código existente