Installazione di relay

Il relè è composto da tre parti, ciascuna delle quali deve essere installata separatamente:

1. Relay per plug-in Figma
2. Relay per plug-in Android Studio
3. Plug-in Relay Gradle

Prerequisiti

• Devi aver eseguito l'accesso a un account Figma.
• Hai installato Android Studio 2022.2.1 Flamingo o versioni successive.
• Hai installato il runtime Java.
• Stai utilizzando Jetpack Compose versione 1.2 o successiva.
• Stai utilizzando il plug-in Gradle versione 8.0 o successiva.

Installa il plug-in Relay for Figma

Il plug-in Relay for Figma consente a chiunque lavori in Figma di annotare i propri progetti e di condividerli con gli sviluppatori che utilizzano Android Studio e Jetpack Compose.

Il plug-in Relay for Figma viene pubblicato nel marketplace dei plug-in della community di Figma. Per installare il plug-in:

1. Vai alla pagina del plug-in Relay for Figma sul sito web di Figma.

2. In alto a destra nella pagina, fai clic su Prova.

   

3. È possibile che venga visualizzata una finestra di dialogo che chiede se vuoi utilizzare il plug-in. Nella finestra di dialogo, seleziona la tua organizzazione. In rari casi, la tua organizzazione potrebbe disattivare i plug-in pubblici. In questo caso, seleziona l'opzione Team esterni.

   

   Si apre un file Figma con la pagina delle informazioni sul plug-in. Fai clic su ... e seleziona Salva per assicurarti di poter riutilizzare facilmente il plug-in.

   

4. Ora, fai clic su Esegui:

   Puoi visualizzare il plug-in in esecuzione nella tela di Figma:

   

Installare il plug-in Relay for Android Studio

Il plug-in Relay for Android Studio consente agli sviluppatori che lavorano in Android Studio di importare progetti annotati con informazioni sull'intent di progettazione utilizzando il plug-in Relay for Figma. Il plug-in viene pubblicato nell'Android Studio Plugin Marketplace. Per installare:

1. Apri Android Studio.
2. Nel menu principale:
   • Per macOS, seleziona Android Studio > Preferenze.
   • Per Windows e Linux, seleziona File > Impostazioni.
3. Seleziona Plugin.

4. Seleziona la scheda Marketplace, cerca "Relay for Android Studio" e seleziona il plug-in pubblicato da Google:

   

5. Fai clic su Installa.

6. Al termine dell'installazione, fai clic su Riavvia IDE.

7. Per verificare se l'installazione è riuscita, apri Preferenze o Impostazioni, quindi vai a Plugin. Dovresti vedere Relay for Android Studio elencato nella sezione Installati.

Installa il plug-in Relay Gradle

Il plug-in Relay Gradle assicura che i progetti in Figma annotati con informazioni sull'intent di progettazione mediante il plug-in Relay per Figma vengano convertiti correttamente in codice durante una build.

Il plug-in Relay Gradle viene pubblicato in Google Maven, un server che contiene molti plug-in Gradle. Android Studio richiama per impostazione predefinita le operazioni Gradle, che includono il download e l'installazione delle dipendenze a cui fa riferimento il progetto.

Per assicurarti che Android Studio e, di conseguenza, Gradle stesso, scarichi e installi il plug-in Relay Gradle, devi specificare il plug-in come dipendenza nel progetto, in particolare nel file build.gradle nella directory del modulo. Di solito è nel mese di app/build.gradle.

Nella parte superiore del file app/build.gradle viene visualizzata una sezione che elenca tutti i plug-in in uso. Aggiungi il plug-in Relay Gradle a questo elenco e Gradle gestisce il download e l'installazione. Ecco alcuni esempi:

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.relay' version '0.3.11'
}

Assicurati inoltre che il tuo file settings.gradle abbia la seguente sezione:

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
    }
}

Puoi anche utilizzare un progetto preconfigurato, che include la configurazione indicata sopra.

Configura l'accesso a Figma

L'inoltro richiede un token di accesso personale Figma per poter scaricare i progetti Figma e convertirli in codice. Se non ne hai già uno:

1. Apri Figma e accedi a Figma.
2. Vai al browser di file .

3. Fai clic sull'icona del tuo account e seleziona Impostazioni.

   

4. Scorri verso il basso fino alla sezione Token di accesso personali.

5. Inserisci una descrizione del token, ad esempio "Relay" e digita Return. Viene generato un token. Fai clic su Copia questo token.

   

6. Nel menu principale di Android Studio, seleziona Strumenti > Impostazioni di inoltro.

   

7. Se hai già configurato un token di accesso di Figma su macOS, potresti visualizzare la finestra di dialogo seguente. Questa finestra di dialogo ti informa che Android Studio sta usando il token di accesso Figma esistente. Inserisci la password e fai clic su Consenti sempre.

   

8. Incolla il token di accesso di Figma nel campo Figma Access Token (Token di accesso Figma). Se non è la prima volta che configuri un token di accesso Figma, potresti visualizzare l'input di un Token di accesso Figma esistente.

   

9. Fai clic su Ok.

Scarica e configura il progetto preconfigurato

Per scaricare e configurare un progetto preconfigurato:

1. Scarica il file ZIP del progetto.
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).

Esecuzione del progetto preconfigurato

Esegui l'app su un emulatore o un dispositivo. Dovresti vedere "Ciao, Android!" su una schermata vuota.

Passaggio successivo

Ora siamo pronti a creare i nostri primi progetti utilizzando Relay.

Tutorial di base

Consigliato per te

• Nota: il testo del link viene visualizzato quando JavaScript è disattivato
• Configurare il progetto Android
• Verificare il layout di Compose
• Dove istruire lo stato