Processar variantes de design

No Figma, as variantes são usadas para agrupar diferentes variações do do mesmo componente, como diferentes estados ou tamanhos. Preservações de redirecionamento das variantes de um componente quando ele é convertido em código. Nesta seção, veremos como o Relay lida com variantes nos designs.

Ponto de partida

Vamos começar 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 típico
• audio-item destina-se a 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 HelloNews.fig no seu computador.

2. No Figma, acesse o navegador de arquivos. No lado esquerdo, passe o mouse sobre Rascunhos. Um ícone + será exibido. Clique no ícone + e em Importar. Selecione o arquivo HelloNews.fig que você acabou de transferir por download. Isso pode demorar 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 componente, para que possamos trabalham com os 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) para Figma). Clique em Começar.

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

   

3. Com o pacote da interface selecionado, adicione uma descrição à caixa de resumo. Para exemplo: "Componente do card de notícias criado para exibir itens de notícias em uma lista".

   

Salvar versão nomeada

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

1. Abra o plug-in 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 um novo nome e descrição de versão na seção Salvar histórico de versões.

4. Clique em Salvar.

   Exemplo de título: Novo cartão inicial

   Exemplo de descrição: primeira iteração dos itens da matéria

Fazer o download do projeto do Android Studio

Para a parte do Android Studio deste tutorial, vamos usar uma interface pré-configurada projeto do Android Studio. Este projeto contém um app que exibe artigos de notícias em um formato de texto simples.

1. Faça o download do arquivo de amostra HelloNews.zip.
2. Clique duas vezes no arquivo para descompactar, o que criará uma pasta chamada HelloNews. Mova-o para a pasta inicial.
3. Volte para o Android Studio. Vá para Arquivo > Abrir, navegue até sua casa selecione HelloNews e clique em Abrir.
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. No Figma, copie o URL do arquivo News Card Tutorial. Vamos use esse URL para importar nossos componentes. No canto superior direito do Figma, clique no botão Share. Na caixa de diálogo que se abre, clique em Copiar link.

   

2. Mude para o projeto HelloNews no Android Studio. Vá para Arquivo > Novo > Importar 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 Concluir.

   

4. Clique em para criar seu projeto. Isso pode levar um minuto ou mais.

   

Visualizar app e componente

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

   

2. Abra o arquivo app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. Isso é o código gerado do Jetpack Compose para o componente do Figma. Na guia veremos que três variantes do componente NewsCard têm foi traduzido do Figma para código. Vamos analisar o código mais de perto.

   

3. O tipo enumerado View permite escolher qual variante usar para esse componente. O nome do tipo enumerado e seus valores foram derivados das variantes da nossa Componente do Figma. Ele é usado no parâmetro view do NewsCard combinável.

   

4. O elemento combinável NewsCard foi gerado no pacote de interface. Ele inclui um do tipo View, que define a variante do card de notícias como instanciar.

   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 para exibir diferentes notícias, apenas a mesma fixada no código no Figma. Então, se adicionamos o componente agora, o que teríamos é a mesma notícia repetido. Precisamos de uma maneira de especificar quais partes do NewsCard devem ser preenchidas com dados dinâmicos.

Parâmetros de conteúdo

Nesta seção, adicionaremos 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