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

    Option „Import UI Packages...“ (UI-Pakete importieren...) im Menü „File“ (Datei)

  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> Dialogfeld „UI Package importieren“
    <ph type="x-smartling-placeholder">
    </ph> Dialogfeld für das Schlüsselbundsystem

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

    Vorschau der Komponente

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

    Ordner „UI-packages“ in der Android-Ansicht

    • 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 Schaltfläche „Projekt erstellen“ um Ihr Projekt aufzubauen.

    Schaltfläche „Projekt erstellen“ in der Symbolleiste

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

    <ph type="x-smartling-placeholder">
    </ph> Tab „Build“ unten in Android Studio

  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:

    Generierter Code in der Android-Ansicht

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

    Vorschau der Komponente

    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.

    Schaltfläche „Ausführen“ in der Symbolleiste

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

    App-Vorschau im Emulator

    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.