Flusso di lavoro di Android Studio

Importa un pacchetto UI

Dopo aver creato un pacchetto UI in Figma, puoi importarlo nel tuo progetto Android Studio. Una volta creato il progetto, Relay genera il codice Jetpack Compose.

Per importare un pacchetto UI in un progetto Android Studio:

  1. Seleziona File > Nuovo > Importa pacchetti UI...

    Opzione Importa pacchetti UI... nel menu File

  2. Inserisci l'URL di un file Figma che contiene un pacchetto UI.

    Finestra di dialogo Importa pacchetti UI

  3. Fai clic su Avanti.

  4. Seleziona i pacchetti UI che vuoi importare. I componenti visualizzati variano a seconda che tu abbia incollato un link a un componente, a una pagina o a un file. Se un pacchetto UI è già stato importato, è etichettato come "AGGIORNATO". Altrimenti viene visualizzato come "NUOVO".

    Anteprima dei componenti

  5. Fai clic su Fine per importare i pacchetti selezionati e le loro dipendenze nella cartella ui-packages.

Schermata Importazione pacchetto UI

La schermata di importazione include le seguenti informazioni:

Schermata Importazione pacchetto UI
  • Un'immagine di anteprima del componente e delle sue varianti.
  • Un titolo e una descrizione.
  • Un elenco delle varianti e delle loro proprietà.
  • Un elenco dei parametri dei contenuti e dei relativi tipi.
  • Un elenco di gestori delle interazioni e relativi tipi.

Finestra dello strumento Pacchetto UI

Barra laterale dei pacchetti UI

Il plug-in Android Studio aggiunge una finestra dello strumento denominata Pacchetto UI. Si apre ogni volta che selezioni un file all'interno di una cartella di un pacchetto UI (ad es. app/src/main/ui-packages/mycomponent/). Nella finestra degli strumenti viene visualizzato un riepilogo del pacchetto UI e dei suoi contenuti.

Crea il tuo progetto Android

Quando crei un progetto Android Studio contenente un pacchetto UI, il plug-in Relay Gradle genera il codice dal pacchetto UI e lo compila. Anche gli asset dei caratteri vengono scaricati e copiati nel progetto.

Se vuoi creare solo i pacchetti UI importati e non l'intero progetto, puoi eseguire queste attività Gradle specifiche:

  • generateDebugRelayCode o generateReleaseRelayCode generano versioni di debug o di rilascio del codice derivato dal pacchetto UI.
  • generateRelayRuntimeCode crea la libreria di runtime utilizzata dal codice generato.

Durante il processo di compilazione:

  1. Il codice viene generato dal pacchetto UI e archiviato in cartelle separate.
  2. Le immagini e i caratteri vengono copiati in una cartella di risorse generata comune.

La posizione delle cartelle è documentata in Informazioni sul pacchetto UI e sul codice generato.

Aggiornamento di un pacchetto UI

Quando una nuova versione di un progetto è pronta, il designer deve creare una nuova versione con nome del file Figma.

In Android Studio, assicurati che la finestra dello strumento Progetto sia in visualizzazione Android.

  1. Nella cartella ui-packages del modulo, fai clic con il pulsante destro del mouse sulla cartella Pacchetti UI da aggiornare, quindi seleziona Aggiorna pacchetti UI. Nell'esempio riportato di seguito, abbiamo selezionato cinque pacchetti UI da aggiornare.

    Opzione Aggiorna 5 pacchetti UI nel menu contestuale

  2. Puoi anche fare clic con il tasto destro del mouse sulla cartella ui-packages per aggiornare tutti i pacchetti UI.

    Opzione Aggiorna tutti i pacchetti UI nel menu contestuale