Parâmetros de conteúdo

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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.

Parâmetro de título no plug-in

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

    Plug-in do Figma com o card hello selecionado
  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.

    Menu de seleção de parâmetros no plug-in do Figma
  3. Para mudar o nome do parâmetro de conteúdo de texto do título, digite-o em Name. Neste tutorial, insira Title.

    Detalhes do parâmetro no plug-in do Figma

    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

    Opção "Save to version history" no menu

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.

    Opção "Update UI Package" no menu de contexto
  2. Clique em Botão "Make Project" para criar o projeto novamente. Você vai receber um erro de build (nós vamos falar sobre isso em breve).

    Botão "Build" na barra de ferramentas

    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:

    Parâmetro de título no Figma e no código gerado

    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.

    Visualização do card "Hello" com um estilo de texto atualizado
  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.