Processar variantes de design

No Figma, as variantes são usadas para agrupar diferentes variações do mesmo componente, como diferentes estados ou tamanhos. O Relay preserva as variantes de um componente quando ele é convertido em código. Nesta seção, vamos aprender como o Relay processa variantes de designs.

Ponto de partida

Começaremos com um arquivo do Figma que contenha um componente News Card com três variantes:

• hero-item: serve para a matéria mais importante.
• article-item é para um artigo comum
• audio-item é para um artigo que você ouve, em vez de ler

Copiar um exemplo do Figma

Vamos usar um arquivo do Figma já existente como exemplo para este tutorial. Confira se a conta do Figma está conectada.

1. Faça o download do arquivo HelloNews.fig no computador.

2. No Figma, acesse o navegador de arquivos. No lado esquerdo, passe o mouse sobre Rascunhos. Um ícone + vai aparecer. Clique no ícone + e depois em Importar. Selecione o arquivo HelloNews.fig que você acabou de transferir por download. Isso pode levar de 10 segundos a um minuto.

   

3. Abra o arquivo importado no Figma.

Criar um pacote de interface

O plug-in Relay para Figma adiciona informações extras ao nosso componente para que possamos trabalhar com nossos desenvolvedores, que vão usar nosso componente no código.

1. Abra o plug-in Relay para Figma no arquivo (na barra de menus: Plugins > Relay for Figma). Clique em Começar.

2. Selecione o componente e clique em Create UI Package.

   

3. Com o pacote de interface selecionado, adicione uma descrição à caixa de resumo. Por exemplo: "Componente do card de notícias destinado a exibir itens de notícias de uma lista".

   

Salvar versão nomeada

Agora que você criou um pacote de interface, prepare o componente para compartilhá-lo com a equipe de desenvolvimento.

1. Abra o plug-in do Figma Relay, se ainda não estiver aberto.
2. Clique em Compartilhar com o desenvolvedor.
3. Na tela Compartilhar com o desenvolvedor, é possível inserir o nome e a descrição da nova versão na seção Salvar histórico de versões.

4. Clique em Salvar.

   Exemplo de título: Novo card inicial

   Exemplo de descrição: primeira iteração dos itens do artigo de notícias

Fazer o download do projeto do Android Studio

Para a parte do Android Studio neste tutorial, usaremos um projeto pré-configurado do Android Studio. Esse projeto contém um app que exibe artigos de notícias em formato de texto simples.

1. Faça o download do arquivo HelloNews.zip de exemplo.
2. Clique duas vezes no arquivo para descompactá-lo. Isso criará uma pasta chamada HelloNews. Mova o arquivo para sua pasta inicial.
3. Volte para o Android Studio. Acesse File > Open, navegue até a pasta inicial, selecione HelloNews e clique em Open.
4. Ao abrir o projeto, o Android Studio vai perguntar se você confia nele. Clique em Trust Project.

Importar para o Android Studio

Vamos importar o componente do Figma para o projeto.

1. De volta ao Figma, copie o URL do arquivo News Card Tutorial do Figma. Usaremos esse URL para importar nossos componentes. No canto superior direito do Figma, clique no botão Share. Na caixa de diálogo aberta, clique em Copy Link.

   

2. Mude para o projeto HelloNews no Android Studio. Acesse File > New > Import UI Packages... na barra de menus do Android Studio.

   

3. Cole o URL do arquivo do Figma e clique em Next.

   

   

   1. Quando a busca do arquivo for concluída (o que pode levar algum tempo), clique em Finish.

   

4. Clique em para criar seu projeto. Isso pode levar cerca de um minuto.

   

Visualizar app e componente

1. Na visualização do Android, abra app/java/com/example/hellonews/ui/home/HomeScreen.kt. Você verá uma prévia do app, que mostra várias matérias em um formato de texto simples, com matérias impressas acima de matérias em áudio.

   

2. Abra o arquivo app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. Esse é o código gerado pelo Jetpack Compose para o componente do Figma. Na visualização, podemos ver que três variantes do componente NewsCard foram traduzidas do Figma para código. Vamos analisar o código mais de perto.

   

3. A enumeração View permite escolher qual variante usar para esse componente. O nome do tipo enumerado e os valores dele são derivados das variantes do componente do Figma. É usado no parâmetro view no elemento que pode ser composto NewsCard.

   

4. O elemento combinável NewsCard foi gerado no pacote da interface. Ele inclui um parâmetro do tipo View, que define a variante do card de notícias a ser instanciada.

   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
   ) {...}
   
   

A seguir

Ainda não estamos prontos para usar o NewsCard. O componente não sabe como exibir diferentes notícias, apenas a mesma fixada no código no Figma. Se fôssemos adicionar o componente agora, tudo o que conseguiríamos seria a mesma notícia repetida. Precisamos de uma maneira de especificar quais partes de NewsCard precisam ser preenchidas com dados dinâmicos.

Parâmetros de conteúdo

Nesta seção, vamos adicionar parâmetros de conteúdo ao componente NewsCard.

Recomendados para você

• Observação: o texto do link aparece quando o JavaScript está desativado.
• Parâmetros de conteúdo
• Rolagem
• Como usar o Compose em visualizações