Convierte los diseños a código en Android Studio

Cómo importar diseños desde Figma

Ahora, incorporaremos el paquete de IU creado en Figma en el Proyecto de Android Studio Para incorporar el paquete de IU, copia la URL compartida que que generamos en la sección anterior en el asistente de importación de Android Studio.

  1. Descarga el archivo ZIP del proyecto de Android Studio preconfigurado (que es el mismo proyecto que el de la página Cómo instalar Relay).

  2. Haz doble clic en el archivo para descomprimirlo, lo que creará una carpeta llamada HelloFigma. Muévela a tu carpeta principal.

  3. Vuelve a Android Studio. Ve a File > Open, navega a tu carpeta principal, selecciona HelloFigma y haz clic en Open.

  4. Cuando abras el proyecto, es posible que Android Studio te pregunte si confías en él. Haz clic en Trust Project.

  5. En Android Studio, selecciona File > New > Import UI Packages….

    Opción Import UI Packages… en el menú File
  6. En el cuadro de diálogo Import UI Packages, pega la URL de tu archivo de Figma y haz clic en Next.

    Cuadro de diálogo Import UI Package
    Cuadro de diálogo del sistema de acceso al llavero
  7. Espera a que se descargue el archivo. Cuando se descarga correctamente, se muestra la vista previa del componente. Haz clic en Crear.

    Vista previa del componente

    Ten en cuenta que se agregaron archivos nuevos a tu proyecto. Estos deben confirmarse en el control del código fuente como parte de tu proyecto. En la vista de Android de tu proyecto, verás lo siguiente:

    Carpeta UI-packages en la vista de Android
    • app/ui-packages/hello_card/*
      Todos los recursos fuente necesarios para describir el componente en el código (estos archivos se usan para generar código en el paso de compilación)

    • app/ui-packages/hello_card/hello_card.json
      El archivo JSON que contiene la definición del componente (incluidos su diseño y otras propiedades)

    • app/ui-packages/hello_card/fonts/*
      Los archivos de fuente necesarios para admitir el componente en Jetpack Compose

    • app/ui-packages/hello_card/*.png o *.jpeg
      Recursos de imagen necesarios para admitir el componente

    • app/ui-packages/hello_card/VERSION.txt
      La versión del complemento Relay for Android Studio que se usa para importar el paquete de IU

    • app/ui-packages/hello_card/config.json
      El tema que se usa para las vistas previas

Cómo compilar y generar el código

  1. Haz clic en Botón Make Project para compilar tu proyecto.

    Botón Make Project en la barra de herramientas
  2. Para ver el resultado de la compilación, haz clic en la pestaña Build.

    Pestaña Build en la parte inferior de Android Studio
  3. El código generado ahora se agrega a tu proyecto. Dado que se trata de código generado, no debe confirmarse en el control del código fuente como parte del proyecto. En la vista de Android de tu proyecto, puedes ver lo siguiente:

    Código generado en la vista de Android
    • app/java (generated)/com/example/hellofigma/hellocard
      Fuentes y código de Jetpack Compose generados

    • app/java (generated)/com/google/relay/compose
      Código de entorno de ejecución compartido que se usa en todos los paquetes de IU

  4. Abre app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt. Esta es la función de Jetpack Compose generada para el componente de Figma. También puedes obtener una vista previa del componente.

    La información de diseño, recursos y estilo ahora se transfiere de Figma al código.

    Vista previa del componente

    En el código, el resumen agregado en Figma ahora se traduce a un comentario sobre el elemento componible generado.

     /**
     * Hello Card component used to display the image and the title content
     *
     * This composable was generated from the UI package ‘ hello_card’
     * Generated code; do not edit directly
     */
    @Composable
    fun HelloCard(modifier: Modifier = Modifier) {...
    

Cómo integrar el componente y ejecutar la app

Ahora, integremos el componente a la actividad principal.

  1. En app/java/com/example/hellofigma/MainActivity.kt, agrega lo siguiente a la sección de importación en la parte superior:

    import com.example.hellofigma.hellocard.HelloCard
    
  2. Más abajo en el mismo archivo, cambia el siguiente código en la clase MainActivity:

    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                HelloFigmaTheme {
                    // A surface container using the 'background' color from the theme
                    Surface(color = MaterialTheme.colors.background) {
                        // Greeting("Android") // Delete this line
                        HelloCard()  // Add this line
                    }
                }
            }
        }
    }
    
  3. Más abajo en el mismo archivo, en la vista previa del elemento componible, cambia una línea:

    @Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
        HelloFigmaTheme {
            HelloCard() // Change this line
        }
    }
    
  4. Asegúrate de que se haya seleccionado un dispositivo en la barra de herramientas.

  5. Para ejecutar el proyecto, haz clic en ▶ en la barra de herramientas.

    Botón Run en la barra de herramientas

    Se iniciará el emulador, se compilará el proyecto y se iniciará tu app.

    Vista previa de la app en el emulador

    ¡Felicitaciones! Incorporaste correctamente tu primer componente de Figma a una app de Jetpack Compose.

Próximo paso

Crea y propaga actualizaciones de diseño

Ahora que tienes un ejemplo de funcionamiento de extremo a extremo, veamos cómo actualizar el diseño original y volver a generar nuestro código.