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.

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

   

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.

   

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

   

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.

   

   Warten Sie, bis der Ladebalken unten rechts abgeschlossen ist:

   

2. Klicken Sie auf , 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.

   

   

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

   

   

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.