![Componente "Card" com imagem e texto](https://developer.android.google.cn/static/develop/ui/compose/tooling/relay/images/basic-tutorial/card-component.png?authuser=7&hl=pt)
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:
- Criar um componente de IU no Figma.
- Criar um pacote da IU usando o plug-in do Figma.
- Salvar uma versão nomeada do design.
- Compartilhar o URL do Figma com os desenvolvedores.
No Android Studio:
- Importar o pacote da IU para um projeto usando o URL do Figma.
- Gerar o código do Jetpack Compose criando o projeto.
- Adicionar uma referência ao elemento combinável gerado no código da IU do projeto.
- Executar o projeto.
Próxima etapa
Primeiro, vamos criar nosso design e um pacote da IU no Figma.