Criar pacotes de IU

Pacotes de IU no Figma

Os pacotes de IU definem um modelo compartilhado para componentes da IU do Android. Eles são criados no Figma e usados para gerar código de produção do Compose no Android Studio. Um pacote de IU contém estas informações:

  • Informações de layout
  • Resumo do pacote de IU
  • Parâmetros de conteúdo e interação
  • Informações sobre estilo
  • Recursos de imagem e fonte

Criar pacote de IU

Adicionar um resumo ao pacote de IU

Para criar um pacote de IU usando o plug-in Relay para o Figma:

  1. Abra o plug-in e clique em Get Started.
  2. Selecione o componente do Figma que você quer empacotar.
  3. Clique em Create UI Package.

Para criar vários pacotes de interface ao mesmo tempo, faça o seguinte:

  1. Selecione um ou mais componentes do Figma.
  2. Clique em Create UI Packages. Isso cria um pacote de interface para cada componente selecionado.

Você também pode refatorar os elementos já existentes do pacote de IU para novos pacotes:

  1. Selecione um frame ou uma camada do componente em um pacote de IU já existente.
  2. Clique no ícone de menu.
  3. Selecione Create UI package from selection.

Depois que um pacote de IU é importado para o Android Studio, o Relay gera um código quando o projeto do Android é criado.

Adicionar um resumo

Relay para o Figma com um componente selecionado

Após a criação, um campo de texto é exibido para que você possa adicionar um resumo ao pacote de IU. Um resumo aparece como um bloco de comentário acima da função de composição correspondente no código gerado.

Também é possível editar o resumo mais tarde:

  1. Selecione Summary.
  2. Edite o resumo no campo de texto.

Remover o empacotamento da IU

Selecione o ícone de menu e Remove packaging. Essa ação exclui todos os metadados de Relay, mas não o componente no Figma.

Opção "Remove packaging" no plug-in