Importa design da Figma
Ora integreremo il pacchetto UI creato in Figma nel progetto Android Studio. Per incorporare il pacchetto UI, copia nella procedura guidata di importazione di Android Studio l'URL di condivisione che abbiamo generato nella sezione precedente.
Scarica il file ZIP preconfigurato del progetto Android Studio (che è lo stesso progetto della pagina Install Relay).
Fai doppio clic sul file per decomprimerlo, creando una cartella denominata HelloFigma. Spostalo nella tua cartella Home...
Torna ad Android Studio. Vai a File > Apri, vai alla tua cartella principale, seleziona HelloFigma e fai clic su Apri.
Quando apri il progetto, Android Studio potrebbe chiederti se ritieni attendibile il progetto. Fai clic su Trust Project (Progetto attendibile).
In Android Studio, seleziona File > Nuovo > Importa pacchetti UI....
Nella finestra di dialogo Importa pacchetti UI, incolla l'URL del file Figma e fai clic su Avanti.
Attendi il download del file. Dopo il download, viene visualizzata l'anteprima dei componenti. Fai clic su Crea.
Tieni presente che al progetto sono stati aggiunti nuovi file. Questi devono essere impegnati nel controllo del codice sorgente nell'ambito del progetto. Nella visualizzazione Android del tuo progetto, vedrai:
app/ui-packages/hello_card/*
Tutti gli asset di origine necessari per descrivere il componente nel codice. Questi file vengono utilizzati per la generazione di codice nel passaggio di build.app/ui-packages/hello_card/hello_card.json
Il file JSON che contiene la definizione del componente (inclusi il suo layout e altre proprietà).app/ui-packages/hello_card/fonts/*
Qualsiasi file di carattere necessario per supportare il componente in Jetpack Compose.app/ui-packages/hello_card/*.png
o*.jpeg
Qualsiasi asset immagine necessario per supportare il componente.app/ui-packages/hello_card/VERSION.txt
La versione del plug-in Relay for Android Studio utilizzata per importare il pacchetto UI.app/ui-packages/hello_card/config.json
Il tema utilizzato per le anteprime.
Crea e genera codice
Fai clic su per creare il tuo progetto.
Per visualizzare il risultato della build, fai clic sulla scheda Crea.
Il codice generato viene ora aggiunto al tuo progetto. Poiché si tratta di codice generato, non devi impegnarti a eseguire il controllo del codice sorgente nell'ambito del tuo progetto. Nella visualizzazione Android del tuo progetto, puoi visualizzare:
app/java (generated)/com/example/hellofigma/hellocard
Codice e caratteri Jetpack Compose generati.app/java (generated)/com/google/relay/compose
Codice di runtime condiviso utilizzato in tutti i pacchetti UI.
Apri
app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt
. Questa è la funzione Jetpack Compose generata per il componente Figma. Puoi anche visualizzare l'anteprima del componente.Le informazioni su layout, asset e stile vengono ora trasferite da Figma al codice.
Nel codice, il riassunto aggiunto in Figma ora viene tradotto in un commento sopra il componibile generato.
/** * Hello Card component used to display the image and the title content * * This composable was generated from the UI package ‘ hello_card’ * Generated code; do not edit directly */ @Composable fun HelloCard(modifier: Modifier = Modifier) {...
Integra il componente ed esegui l'app
Ora integriamo il componente nell'attività principale.
In
app/java/com/example/hellofigma/MainActivity.kt
, aggiungi elementi alla sezione Importa in alto:import com.example.hellofigma.hellocard.HelloCard
Più in basso nello stesso file, modifica il seguente codice nella classe
MainActivity
:class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { HelloFigmaTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { // Greeting("Android") // Delete this line HelloCard() // Add this line } } } } }
Più in basso nello stesso file, nell'anteprima del componibile, modifica una riga:
@Preview(showBackground = true) @Composable fun DefaultPreview() { HelloFigmaTheme { HelloCard() // Change this line } }
Assicurati che sia selezionato un dispositivo nella barra degli strumenti.
Esegui il progetto facendo clic su ▶ nella barra degli strumenti.
L'emulatore verrà avviato, il progetto verrà creato e la tua app verrà avviata.
Congratulazioni. Hai incorporato il primo componente Figma in un'app Jetpack Compose.
Passaggio successivo
Apportare e propagare aggiornamenti al design
Ora che hai un esempio funzionante end-to-end, vediamo come aggiornare il design originale e rigenerare il codice.
Consigliato per te
- Nota: il testo del link viene visualizzato quando JavaScript è disattivato
- Parametri dei contenuti
- Apportare e propagare aggiornamenti al design
- Gestione delle varianti di design