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…

    Opción Import UI Packages… en el menú File

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

    Diálogo de Import UI Packages

  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".

    Vista previa de los componentes

  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:

Pantalla de importación de paquetes de IU
  • 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

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.

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.

    Opción Update 5 UI Packages en el menú contextual

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

    Opción Update All UI Packages en el menú contextual