Fazer o download do arquivo do Figma pré-configurado
Vamos começar criando um componente no Figma. Para este tutorial, usaremos um arquivo atual do Figma como exemplo. Esse arquivo contém um frame de layout automático com uma imagem e um título. Faça login na sua conta do Figma.
- Faça o download deste arquivo do Figma no computador: HelloFigma.fig.
No navegador de arquivos do Figma, passe o cursor sobre Rascunhos. Um ícone + será exibido. Clique em +, em Import... e selecione o arquivo HelloFigma.fig que você acabou de transferir por download.
Abra o arquivo importado no Figma.
Criar um componente
Para usar o design importado com o plug-in Relay para Figma, primeiro precisamos convertê-lo em um componente. Selecione o frame Hello Card e, na barra de ferramentas, clique em Create Component.
Criar um pacote de interface
O plug-in do Relay para Figma adiciona mais informações ao componente para que você possa trabalhar com seus desenvolvedores que possam usar o componente no código.
Abra o plug-in Relay para Figma no arquivo (no menu do Figma: Plugins > Relay for Figma). Clique em Começar.
Selecione o componente e clique em Create UI Package.
Com o pacote de interface selecionado, adicione uma descrição ao Resumo. Por exemplo: “Componente Hello Card usado para exibir a imagem e o conteúdo do título”
Clique em Compartilhar com o desenvolvedor no canto inferior direito da caixa de diálogo para acessar a próxima tela.
Compartilhar com o fluxo do desenvolvedor
Agora que você criou um pacote de interface, prepare o componente para compartilhá-lo com a equipe de desenvolvimento.
Crie uma nova versão nomeada do arquivo do componente. O uso de versões nomeadas do componente impede que mudanças indesejadas afetem os componentes de produção.
Digite um nome e uma descrição para essa primeira versão do componente e clique em Salvar.
Em seguida, crie um link de componente compartilhável e copie-o para a área de transferência digitando CMD-L no Mac ou CTRL-L no Windows.
Próxima etapa
Agora, está tudo pronto para entregar o componente de IU ao Android Studio.
Abra o Android Studio para concluir a próxima parte deste tutorial.
Converter os designs em código no Android Studio