Designs in Android Studio in Code umwandeln

Design aus Figma importieren

Jetzt binden wir das in Figma erstellte UI-Paket in die Android Studio-Projekt Um das UI-Paket zu integrieren, kopieren Sie die Freigabe-URL, die den wir im vorherigen Abschnitt im Importassistenten von Android Studio erstellt haben.

1. Laden Sie die vorkonfigurierte ZIP-Datei für das Android Studio-Projekt herunter. Das ist dasselbe Projekt wie auf der Seite Relay installieren.

2. Doppelklicken Sie auf die Datei, um sie zu entpacken, wodurch ein Ordner namens HelloFigma Verschiebe sie in den Basisordner...

3. Kehren Sie zu Android Studio zurück. Wählen Sie Datei > Öffnen, zeigen Sie mir den Weg nach Hause. Wählen Sie HelloFigma aus und klicken Sie auf Open (Öffnen).

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

5. Wählen Sie in Android Studio File > Neu > UI-Pakete importieren...

   

6. Fügen Sie im Dialogfeld „Import UI Packages“ (UI-Pakete importieren) die URL Ihrer Figma-Datei ein und klicken Sie auf Weiter.

   <ph type="x-smartling-placeholder">

   </ph>

   <ph type="x-smartling-placeholder">

   </ph>

7. Warten Sie, bis die Datei heruntergeladen wurde. Nach dem Download wird eine Vorschau angezeigt. Klicken Sie auf Erstellen.

   

   Dem Projekt wurden neue Dateien hinzugefügt. Diese sollten zur Versionsverwaltung im Rahmen Ihres Projekts verpflichtet. In der Android-Ansicht von sehen Sie Folgendes:

   

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

   • app/ui-packages/hello_card/hello_card.json
     Die JSON-Datei mit der Definition der Komponente (einschließlich dessen Layout und andere 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 der Benutzeroberfläche verwendet wurde Paket.

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

Erstellen und Code generieren

1. Klicken Sie auf um Ihr Projekt aufzubauen.

   

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

   <ph type="x-smartling-placeholder">

   </ph>

3. Der generierte Code wird jetzt Ihrem Projekt hinzugefügt. Da dieser Code generiert wurde, Es sollte nicht Teil Ihres Projekts zur Versionsverwaltung gehören. Im In der Android-Ansicht Ihres Projekts können Sie sich Folgendes ansehen:

   

   • 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. Ich die Komponente auch in der Vorschau anzeigen.

   Die Layout-, Asset- und Stilinformationen werden jetzt von Figma übertragen. zu programmieren.

   

   Im Code wird die in Figma hinzugefügte Zusammenfassung jetzt in einen Kommentar oben übersetzt. die generierte zusammensetzbare Funktion.

    /**
    * 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 App ausführen

Jetzt binden wir die Komponente in die Hauptaktivität ein.

1. In app/java/com/example/hellofigma/MainActivity.kt dem Import hinzufügen -Abschnitt oben:

   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 Ihr erstes Figma-Modell Komponente in eine Jetpack Compose-App!

Nächster Schritt

Designänderungen vornehmen und weitergeben

Da Sie nun über ein funktionierendes End-to-End-Beispiel verfügen, sehen wir uns nun an, wie Sie die Design neu generieren und den Code neu generieren.