Fazer e propagar atualizações de design

Nesta seção, você vai aprender a mudar um componente no Figma (neste caso, mudar a formatação do texto) e ver as mudanças propagadas para a base de código no Android Studio, com base no projeto anterior.

Comparação de "antes e depois"

Mudanças no Figma

Vamos atualizar o componente do Figma. De volta ao arquivo do Figma:

  1. Selecione a camada de texto Title e, na seção Text, mude o estilo para Bold.

    Texto do título selecionado e em negrito no Figma

Salvar versão nomeada

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

  1. Acesse File > Save to Version History e insira um título e uma descrição para a nova versão.

    Exemplo de título: Hello World Card V2

    Exemplo de descrição: estilo do texto adicionado

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

Atualizar o código do componente

Agora vamos importar o componente novamente:

  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 selecione Update UI Package.

    Atualizar a opção de pacote de IU no menu de contexto

    Aguarde a barra de carregamento no canto inferior direito terminar:

    Barra de carregamento do Android Studio
  2. Clique em Botão "Make Project" para criar seu projeto e ver o componente atualizado na visualização de app/java/com/example/hellofigma/MainActivity.kt. O texto agora está em negrito.

    Botão "Build" na barra de ferramentas
    Visualização do componente
  3. Execute o app para ver as mesmas atualizações no emulador.

    Botão "Run" na barra de ferramentas
    Visualização do aplicativo no emulador

Próxima etapa

Agora que atualizamos um design e vimos como o código resultante também é atualizado, podemos voltar nossa atenção para a anotação do design com parâmetros de conteúdo que permitam dados variáveis nos componentes.