Informações gerais

Componente "Card" com imagem e texto

Neste tutorial básico, mostramos o fluxo de trabalho do designer e do desenvolvedor para o Relay, oferecendo uma primeira experiência completa. Após a configuração do plug-in Relay, você pode chegar rapidamente no estágio em que vê a IU aparecer no Android Studio. Recomendamos que continue a configurá-lo.

O tutorial cria um componente básico de card no Figma e o importa para o Android Studio, onde é possível ver o código gerado. Você vai aprender como fazer o seguinte:

No Figma:

  1. Criar um componente de IU no Figma.
  2. Criar um pacote da IU usando o plug-in do Figma.
  3. Salvar uma versão nomeada do design.
  4. Compartilhar o URL do Figma com os desenvolvedores.

No Android Studio:

  1. Importar o pacote da IU para um projeto usando o URL do Figma.
  2. Gerar o código do Jetpack Compose criando o projeto.
  3. Adicionar uma referência ao elemento combinável gerado no código da IU do projeto.
  4. Executar o projeto.

Próxima etapa

Primeiro, vamos criar nosso design e um pacote da IU no Figma.