Designänderungen vornehmen und weitergeben

In diesem Abschnitt erfahren Sie, wie Sie eine Komponente in Figma ändern (in diesem Fall die Textformatierung ändern) und sehen, wie die Änderungen auf die Codebasis in Android Studio übertragen werden, indem Sie auf Ihrem vorherigen Projekt aufbauen.

Vorher-Nachher-Vergleich

Änderungen in Figma

Nehmen wir eine Aktualisierung in der Figma-Komponente vor. Zurück zu Ihrer Figma-Datei:

  1. Wählen Sie die Textebene Titel aus. Ändern Sie im Abschnitt Text den Stil in Fett.

    Titeltext in Figma ausgewählt und fett formatiert

Benannte Version speichern

Integrieren Sie nun die aktualisierte Komponente in Ihre Codebasis. Um sicherzustellen, dass Entwickler die neue Version Ihrer Komponente verwenden, wiederholen Sie die Schritte zum Speichern einer Version.

  1. Öffnen Sie das Figma Relay-Plug-in, falls es noch nicht geöffnet ist.

  2. Klicken Sie auf Mit Entwickler teilen.

    Option „Im Versionsverlauf speichern“ im Menü

  3. Auf dem Bildschirm Mit Entwickler teilen können Sie im Bereich Versionsverlauf speichern einen neuen Versionsnamen und eine neue Beschreibung eingeben.

    Option „Im Versionsverlauf speichern“ im Menü

  4. Drücken Sie auf dem Mac CMD-L oder auf Windows-Geräten Strg + L, um den neuen Link in die Zwischenablage zu kopieren.

Komponentencode aktualisieren

Importieren wir die Komponente jetzt noch einmal:

  1. Prüfen Sie in Android Studio, ob sich das Fenster „Project Tool“ in der Android-Ansicht befindet. Klicken Sie dann mit der rechten Maustaste auf app/ui-packages/hello_card/ und wählen Sie Update UI Package (UI-Paket aktualisieren) aus.

    Option „UI-Paket aktualisieren“ im Kontextmenü

    Warten Sie, bis der Ladebalken unten rechts abgeschlossen ist:

    Ladeleiste in Android Studio

  2. Klicken Sie auf Schaltfläche „Projekt erstellen“, um Ihr Projekt zu erstellen. Die aktualisierte Komponente wird dann in der Vorschau von app/java/com/example/hellofigma/MainActivity.kt angezeigt. Beachten Sie, dass der Text jetzt fett ist.

    Schaltfläche „Build“ in der Symbolleiste
    Vorschau der Komponente

  3. Führen Sie die App aus, um dieselben Updates im Emulator anzusehen.

    Schaltfläche „Ausführen“ in der Symbolleiste
    App-Vorschau im Emulator

Nächster Schritt

Nachdem wir nun ein Design aktualisiert und gesehen haben, wie der resultierende Code ebenfalls aktualisiert wird, können wir uns der Anmerkung des Designs mit Inhaltsparametern zuwenden, die variable Daten in unseren Komponenten ermöglichen.