Convertire i design in codice in Android Studio

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.

1. Scarica il file ZIP preconfigurato del progetto Android Studio (che è lo stesso progetto della pagina Install Relay).

2. Fai doppio clic sul file per decomprimerlo, creando una cartella denominata HelloFigma. Spostalo nella tua cartella Home...

3. Torna ad Android Studio. Vai a File > Apri, vai alla tua cartella principale, seleziona HelloFigma e fai clic su Apri.

4. Quando apri il progetto, Android Studio potrebbe chiederti se ritieni attendibile il progetto. Fai clic su Trust Project (Progetto attendibile).

5. In Android Studio, seleziona File > Nuovo > Importa pacchetti UI....

   

6. Nella finestra di dialogo Importa pacchetti UI, incolla l'URL del file Figma e fai clic su Avanti.

   

   Nota: se non disponi dell'URL Figma, ripeti le istruzioni per recuperare l'URL e torna a questa finestra di dialogo.
   Nota: se viene visualizzata una richiesta del portachiavi, inserisci la password e fai clic su Consenti.

   

   Nota: se al contrario viene visualizzata una finestra di dialogo sul token di accesso Figma, procedi con i prompt o ripeti le istruzioni per configurare il token di accesso Figma.

7. Attendi il download del file. Dopo il download, viene visualizzata l'anteprima dei componenti. Fai clic su Crea.

   Nota: il pulsante qui sopra potrebbe avere la dicitura Fine anziché Crea, a seconda della versione di Android Studio in uso.

   

   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

1. Fai clic su per creare il tuo progetto.

   

2. Per visualizzare il risultato della build, fai clic sulla scheda Crea.

   

   Nota: per i problemi relativi alla build, consulta questa pagina per le soluzioni comuni.

3. 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.

4. 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.

1. In app/java/com/example/hellofigma/MainActivity.kt, aggiungi elementi alla sezione Importa in alto:

   import com.example.hellofigma.hellocard.HelloCard
   

2. 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
                   }
               }
           }
       }
   }
   

3. Più in basso nello stesso file, nell'anteprima del componibile, modifica una riga:

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard() // Change this line
       }
   }
   

4. Assicurati che sia selezionato un dispositivo nella barra degli strumenti.

5. 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.