Designs in Android Studio in Code umwandeln

Design aus Figma importieren

Jetzt binden wir das in Figma erstellte UI-Paket in das Android Studio-Projekt ein. Um das UI-Paket einzubinden, musst du die Freigabe-URL, die wir im vorherigen Abschnitt generiert haben, in den Importassistenten von Android Studio kopieren.

1. Laden Sie die vorkonfigurierte ZIP-Datei des Android Studio-Projekts herunter. Es handelt sich dabei um dasselbe Projekt wie auf der Seite Relay installieren.

2. Doppelklicken Sie auf die Datei, um sie zu entpacken. Dadurch wird ein Ordner mit dem Namen HelloFigma erstellt. Verschieben Sie es in Ihren Basisordner.

3. Kehren Sie zu Android Studio zurück. Gehen Sie zu File > Open (Datei > Öffnen), gehen Sie zu Ihrem Basisordner, wählen Sie HelloFigma aus und klicken Sie auf Open (Öffnen).

4. Wenn Sie das Projekt öffnen, werden Sie von Android Studio möglicherweise gefragt, ob Sie dem Projekt vertrauen. Klicken Sie auf Projekt vertrauen.

5. Wählen Sie in Android Studio File > New > Import UI Packages... (Datei > Neu > UI-Pakete importieren...) aus.

   

6. Fügen Sie im Dialogfeld „Import UI Packages“ die URL Ihrer Figma-Datei ein und klicken Sie auf Next.

   

   

7. Warten Sie, bis die Datei heruntergeladen ist. Nach dem Download wird die Komponentenvorschau angezeigt. Klicken Sie auf Eintragen.

   

   Ihrem Projekt wurden neue Dateien hinzugefügt. Diese sollten der Versionsverwaltung als Teil des Projekts übergeben werden. In der Android-Ansicht Ihres Projekts sehen Sie Folgendes:

   

   • app/ui-packages/hello_card/*
     Alle Quell-Assets, die zur Beschreibung der Komponente im Code erforderlich sind. Diese Dateien werden im Build-Schritt für die Codegenerierung verwendet.

   • app/ui-packages/hello_card/hello_card.json
     Die JSON-Datei mit der Definition der Komponente, einschließlich Layout und anderer Eigenschaften.

   • app/ui-packages/hello_card/fonts/*
     Alle Schriftartdateien, die zur Unterstützung der Komponente in Jetpack Compose erforderlich sind.

   • app/ui-packages/hello_card/*.png oder *.jpeg
     Alle Bild-Assets, die zur Unterstützung der Komponente erforderlich sind.

   • app/ui-packages/hello_card/VERSION.txt
     Die Version des Relay for Android Studio-Plug-ins, das zum Importieren des UI-Pakets verwendet wurde.

   • app/ui-packages/hello_card/config.json
     Das für Vorschauen verwendete Design.

Code erstellen und generieren

1. Klicken Sie auf , um Ihr Projekt zu erstellen.

   

2. Klicken Sie auf den Tab Build, um das Build-Ergebnis anzusehen.

   

3. Der generierte Code wird Ihrem Projekt jetzt hinzugefügt. Da dies generierter Code ist, sollte er nicht für die Versionsverwaltung als Teil Ihres Projekts festgelegt werden. In der Android-Ansicht Ihres Projekts können Sie Folgendes sehen:

   

   • app/java (generated)/com/example/hellofigma/hellocard
     Jetpack Compose-Code und -Schriftarten wurden generiert.

   • app/java (generated)/com/google/relay/compose
     Gemeinsamer Laufzeitcode, der in allen UI-Paketen verwendet wird.

4. „app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt“ öffnen. Dies ist die generierte Jetpack Compose-Funktion für die Figma-Komponente. Sie können die Komponente auch als Vorschau ansehen.

   Die Layout-, Assets- und Stilinformationen werden nun von Figma in Code übertragen.

   

   Im Code wird die in Figma hinzugefügte Zusammenfassung jetzt in einen Kommentar über der generierten zusammensetzbaren Funktion übersetzt.

    /**
    * 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) {...
   

Komponente integrieren und App ausführen

Jetzt integrieren wir die Komponente in die Hauptaktivität.

1. Fügen Sie in app/java/com/example/hellofigma/MainActivity.kt oben den Importabschnitt hinzu:

   import com.example.hellofigma.hellocard.HelloCard
   

2. Ändern Sie weiter unten in derselben Datei den folgenden Code in der Klasse 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. Ändern Sie weiter unten in derselben Datei in der Vorschau der zusammensetzbaren Funktion eine Zeile:

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

4. Achten Sie darauf, dass in der Symbolleiste ein Gerät ausgewählt ist.

5. Führen Sie das Projekt aus, indem Sie in der Symbolleiste auf ▶ klicken.

   

   Der Emulator wird gestartet, das Projekt wird erstellt und Ihre App wird gestartet.

   

   Glückwunsch! Sie haben Ihre erste Figma-Komponente erfolgreich in eine Jetpack Compose-App integriert!

Nächster Schritt

Designänderungen vornehmen und weitergeben

Sie haben nun ein durchgängig funktionierendes Beispiel. Sehen wir uns an, wie Sie das ursprüngliche Design aktualisieren und unseren Code neu generieren können.