Scarica il file Figma preconfigurato
Iniziamo creando un componente in Figma. Per questo tutorial utilizzeremo un file Figma esistente da usare come esempio. Questo file contiene un frame con layout automatico con un'immagine e un titolo. Assicurati di aver eseguito l'accesso al tuo account Figma.
- Scarica questo file Figma sul computer: HelloFigma.fig.
Nel browser di file di Figma, passa il mouse sopra Bozze. Viene visualizzata un'icona +. Fai clic su +, quindi su Importa... e seleziona il file HelloFigma.fig che hai appena scaricato.
Apri il file importato in Figma.
Creare un componente
Per utilizzare il design importato con il plug-in Relay for Figma, dobbiamo prima convertirlo in un componente. Seleziona il frame Hello Card e fai clic su Crea componente dalla barra degli strumenti.
Creazione di un pacchetto UI
Il plug-in Relay for Figma aggiunge ulteriori informazioni al componente per consentirti di collaborare con i tuoi sviluppatori che potranno utilizzare il componente nel loro codice.
Apri il plug-in Relay for Figma nel file in questione. Nel menu Figma: Plugin > Relay per Figma. Fai clic su Inizia.
Seleziona il componente e fai clic su Crea pacchetto UI.
Con il pacchetto UI selezionato, aggiungi una descrizione a Riepilogo. Ad esempio: "Componente Hello Card utilizzato per visualizzare il contenuto dell'immagine e del titolo"
Fai clic su Condividi con lo sviluppatore nell'angolo in basso a destra della finestra di dialogo per passare alla schermata successiva.
Condividi con il flusso di sviluppo
Ora che hai creato un pacchetto UI, prepara il componente per condividerlo con il team di sviluppo.
Crea una nuova versione denominata del file del componente. L'utilizzo di versioni denominate del componente impedisce che le modifiche indesiderate interessino i componenti di produzione.
Inserisci un nome e una descrizione per la prima versione del componente e fai clic su Salva.
Successivamente, crea un link al componente condivisibile e copialo negli appunti digitando CMD-L su Mac o CTRL-L su Windows.
Passaggio successivo
A questo punto puoi passare il componente dell'interfaccia utente ad Android Studio.
Apri Android Studio per completare la parte successiva di questo tutorial.
Convertire i progetti in codice in Android Studio