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.
Laden Sie die vorkonfigurierte ZIP-Datei des Android Studio-Projekts herunter. Es handelt sich dabei um dasselbe Projekt wie auf der Seite Relay installieren.
Doppelklicken Sie auf die Datei, um sie zu entpacken. Dadurch wird ein Ordner mit dem Namen HelloFigma erstellt. Verschieben Sie es in Ihren Basisordner.
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).
Wenn Sie das Projekt öffnen, werden Sie von Android Studio möglicherweise gefragt, ob Sie dem Projekt vertrauen. Klicken Sie auf Projekt vertrauen.
Wählen Sie in Android Studio File > New > Import UI Packages... (Datei > Neu > UI-Pakete importieren...) aus.
Fügen Sie im Dialogfeld „Import UI Packages“ die URL Ihrer Figma-Datei ein und klicken Sie auf Next.
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
Klicken Sie auf , um Ihr Projekt zu erstellen.
Klicken Sie auf den Tab Build, um das Build-Ergebnis anzusehen.
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.
„
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.
Fügen Sie in
app/java/com/example/hellofigma/MainActivity.kt
oben den Importabschnitt hinzu:import com.example.hellofigma.hellocard.HelloCard
Ä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 } } } } }
Ä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 } }
Achten Sie darauf, dass in der Symbolleiste ein Gerät ausgewählt ist.
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.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Inhaltsparameter
- Designänderungen vornehmen und weitergeben
- Umgang mit Designvarianten