Cómo manejar variantes de diseño

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

Punto de partida

Tarjeta de noticias con variantes de árbol

Comenzaremos con un archivo de Figma que contiene un componente Tarjeta de noticias 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 es para un artículo que escuchas en lugar de leerlo.

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 la computadora.

  2. En Figma, ve al navegador de archivos. Del 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. Esto puede tardar desde 10 segundos hasta 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 nuestro componente en su código.

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

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

    Botón Create UI Package en el complemento

  3. Con el paquete de IU seleccionado, agrega una descripción al cuadro de resumen. Para por ejemplo, “Componente de tarjeta de noticias destinado a mostrar artículos de noticias en una lista”.

    Cuadro de resumen del complemento

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. Desde 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 nueva inicial

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

Descarga el proyecto de Android Studio

Para la parte de Android Studio de este instructivo, usaremos un modelo Proyecto de Android Studio 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 Archivo > Abrir, navega hasta tu casa 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

Importaremos nuestro componente de Figma al proyecto.

  1. De vuelta en Figma, copia la URL del archivo de Figma del instructivo de tarjeta de noticias. Más tarde usar 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.

    Opción Copiar vínculo en la pestaña del archivo

  2. Cambia al proyecto HelloNews en Android Studio. Ve a Archivo > Nuevo > Importar UI Packages... en la barra de menú de Android Studio.

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

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

    Diálogo de Import UI Packages
    Cuadro de diálogo del sistema de acceso al llavero
      .
    1. Una vez que el archivo termine de recuperarse (lo que puede tardar un poco), haz clic en Finalizar.
    Vista previa del componente

  4. Haz clic en Botón Make Project para compilar tu proyecto. Este proceso puede tardar aproximadamente un minuto.

    Botón Build en la barra de herramientas

Obtener vista previa de la app y componente

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

    Vista previa de la app

  2. Abre app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. Esta es el código de Jetpack Compose generado para nuestro componente de Figma. Desde vemos que tres variantes del componente NewsCard tienen de Figma al código. Analicemos con más detalle el código.

    Vista previa del componente NewsCard

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

    Variantes en Figma y enum de View correspondiente

  4. El elemento componible NewsCard se generó a partir del paquete de IU. Incluye un parámetro de tipo View, que establece la variante de la tarjeta de noticias en 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

Todavía no podemos usar NewsCard. El componente no sabe para mostrar diferentes noticias, solo la misma codificada en Figma. Entonces, si agregaríamos el componente ahora, todo lo que obtendríamos es la misma noticia repetido. 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.