Parâmetros de conteúdo

Quando implementado, o conteúdo da maioria dos componentes não é estático. Ele muda de acordo com os dados fornecidos a um componente. Para refletir isso nos seus designs, você pode usar parâmetros de conteúdo. Esses parâmetros permitem especificar qual parte de um design contém dados, sem fixar no código os dados reais.

Adicionar um parâmetro de conteúdo

1. No arquivo do Figma, selecione o componente e abra o plug-in Relay para o Figma (Plugins > Relay for Figma).

   

2. Na janela principal do Figma, selecione a camada Title com ⌘ + clique no Mac ou Ctrl + clique no Windows e no Linux. Em seguida, no plug-in, clique em + ao lado de "Parameters" e selecione text-content para adicionar um parâmetro à camada.

   

3. Para mudar o nome do parâmetro de conteúdo de texto do título, digite-o em Name. Neste tutorial, insira Title.

   

   Além de editar o nome, você pode selecionar diferentes tipos de propriedade ou adicionar uma descrição para gerar um comentário no código. Trabalhe com seus desenvolvedores para encontrar o esquema de nomenclatura mais adequado. Os nomes dos parâmetros de conteúdo são convertidos em nomes de parâmetros no elemento de composição gerado.

Salvar uma versão nomeada

Agora vamos integrar o componente atualizado à base de código. Para garantir que os desenvolvedores usem a versão mais recente do componente, crie uma nova versão nomeada:

1. Acesse File > Save to version history e digite um título e uma descrição para a nova versão.

   Exemplo de título: Hello World Card V3

   Exemplo de descrição: Parâmetros adicionados

   

Atualizar o componente no Android Studio

Vamos atualizar o componente:

1. No Android Studio, verifique se a janela de ferramentas do Project está na visualização Android. Em seguida, clique com o botão direito do mouse em app/ui-packages/hello_card/ e clique em Update UI Package.

   

2. Clique em para criar o projeto novamente. Você vai receber um erro de build (nós vamos falar sobre isso em breve).

   

   Se você abrir app/java/com/example/hellofigma/hellocard/HelloCard.kt, vai ver que um parâmetro foi adicionado: title. O nome do parâmetro é o nome do parâmetro de conteúdo especificado no Figma:

   

   No entanto, agora você está recebendo um erro de build (No value passed for parameter 'title) porque o código em MainActivity que chama HelloCard não inclui um valor para o novo parâmetro de título. É necessário corrigir MainActivity para transmitir um valor para o parâmetro title de HelloCard.

3. Abra app/java/com/example/hellofigma/MainActivity.kt.

4. Mude uma linha na classe MainActivity para adicionar um valor ao parâmetro title:

   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) {
                       HelloCard(title="Balloon World!") // Change this line
                   }
               }
           }
       }
   }
   

5. Mais abaixo no mesmo arquivo, na visualização do elemento de composição, mude uma linha:

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard(title="Balloon World!") // Change this line
       }
   }
   

6. Crie o projeto novamente e veja o componente atualizado na visualização. Agora o novo valor do parâmetro vai ficar visível.

   

7. Execute o app para ver as mesmas atualizações no emulador.

   Oba! Você aprendeu as noções básicas do fluxo de trabalho do Relay.

Próxima etapa

Isso conclui o tutorial básico. Embora você tenha visto muitos dos recursos do fluxo de trabalho do Relay, há vários outros disponíveis. Se você quiser saber como usar recursos como gerenciadores de interação, como trabalhar com componentes que têm diversas variantes do Figma e muito mais, acesse o tutorial avançado.