Cómo manejar variantes de diseño

En Figma, las variantes se usan para agrupar diferentes variaciones del mismo componente, como diferentes estados o tamaños. Relay conserva las variantes de un componente cuando se traduce al código. En esta sección, veremos cómo Relay maneja las variantes en los diseños.

Punto de partida

Comenzaremos con un archivo de Figma que contiene un componente News Card con tres variantes:

• hero-item para el artículo de noticias más importante
• article-item es para un artículo típico.
• audio-item corresponde a un artículo que escuchas, en lugar de leer

Cómo copiar el ejemplo de Figma

A modo de ejemplo para este instructivo, usaremos un archivo existente de Figma. Asegúrate de haber accedido a tu cuenta de Figma.

1. Descarga HelloNews.fig en tu computadora.

2. En Figma, ve al navegador de archivos. En el lado izquierdo, coloca el cursor sobre Borradores. Aparecerá un ícono +. Haz clic en el ícono + y, luego, en Importar. Selecciona el archivo HelloNews.fig que acabas de descargar. Este proceso puede tardar entre 10 segundos y un minuto.

   

3. Abre el archivo importado en Figma.

Cómo crear un paquete de IU

El complemento Relay for Figma agrega información adicional a nuestro componente para que podamos trabajar con nuestros desarrolladores que usarán el componente en su código.

1. Abre el complemento Relay for Figma en tu archivo (en la barra de menú: Plugins > Relay for Figma). Haz clic en Get Started.

2. Selecciona el componente y haz clic en Create UI Package.

   

3. Con el paquete de IU seleccionado, agrega una descripción al cuadro de resumen. Por ejemplo: "Componente de tarjeta de noticias destinado a mostrar artículos de noticias para una lista".

   

Cómo guardar una versión con nombre

Ahora que creaste un paquete de IU, prepara tu componente para compartirlo con el equipo de desarrollo.

1. Abre el complemento Figma Relay, si aún no está abierto.
2. Haz clic en Compartir con el desarrollador.
3. En la pantalla Compartir con el desarrollador, puedes ingresar un nombre de versión y una descripción nuevos en la sección Guardar el historial de versiones.

4. Haz clic en Guardar.

   Título de ejemplo: Tarjeta inicial nueva

   Descripción de ejemplo: primera iteración de los elementos de artículos de noticias

Cómo descargar un proyecto de Android Studio

Para la parte de Android Studio de este instructivo, usaremos un proyecto de Android Studio preconfigurado. Este proyecto contiene una app que muestra artículos de noticias en formato de texto sin formato.

1. Descarga el archivo de muestra HelloNews.zip.
2. Haz doble clic en el archivo para descomprimirlo, lo que creará una carpeta llamada HelloNews. Muévela a tu carpeta principal.
3. Vuelve a Android Studio. Ve a File > Open, navega a tu carpeta principal, selecciona HelloNews y haz clic en Open.
4. Cuando abras el proyecto, Android Studio te preguntará si confías en él. Haz clic en Trust Project.

Cómo importar a Android Studio

Importemos nuestro componente de Figma al proyecto.

1. De regreso en Figma, copia la URL del archivo Figma del instructivo de tarjetas de noticias. Usaremos esta URL para importar nuestros componentes. En la esquina superior derecha de Figma, haz clic en el botón Share. En el cuadro de diálogo que se abre, haz clic en Copiar vínculo.

   

2. Cambia al proyecto HelloNews en Android Studio. Ve a File > New > Import UI Packages... en la barra de menú de Android Studio.

   

3. Pega la URL del archivo de Figma y haz clic en Next.

   

   

   1. Una vez que se termine de recuperar el archivo (lo cual puede tardar un poco), haz clic en Finish.

   

4. Haz clic en para compilar tu proyecto. Este proceso puede demorar aproximadamente un minuto.

   

Vista previa de la app y el componente

1. En la vista de Android, abre app/java/com/example/hellonews/ui/home/HomeScreen.kt y verás una vista previa de la app, que mostrará varios artículos de noticias en formato de texto sin formato, con historias impresas sobre noticias de audio.

   

2. Abre app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. Este es el código de Jetpack Compose generado para nuestro componente de Figma. En la vista previa, podemos ver que se tradujeron tres variantes del componente NewsCard de Figma al código. Analicemos con más detalle el código.

   

3. La enumeración View nos permite elegir qué variante usar para este componente. El nombre de la enum y sus valores derivaron de las variantes del componente de Figma. Se usa en el parámetro view de nuestro elemento componible NewsCard.

   

4. El elemento componible NewsCard se generó desde el paquete de IU. Incluye un parámetro de tipo View, que establece la variante de la tarjeta de noticias para la que se creará una instancia.

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list.
   *
   * 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
   ) {...}
   
   

Cuál es el próximo paso

Aún no estamos listos para usar NewsCard. El componente no sabe cómo mostrar diferentes noticias, solo la misma que está codificada en Figma. Por lo tanto, si agregáramos el componente ahora, lo único que obtendríamos sería que se repitiera la misma noticia. Necesitamos una forma de especificar qué partes de NewsCard se deben completar con datos dinámicos.

Parámetros de contenido

En esta sección, agregaremos parámetros de contenido al componente NewsCard.

Recomendaciones para ti

• Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
• Parámetros de contenido
• Desplazamiento
• Cómo usar Compose en Views