Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
In Figma werden Varianten verwendet, um verschiedene Varianten eines
Komponenten gemeinsam nutzen, wie z. B. unterschiedliche Stadien oder Größen. Relay-Konservierungen
die Varianten einer Komponente, wenn sie in Code übersetzt wird. In diesem Abschnitt erfahren Sie,
wie Relay Varianten in Designs handhabt.
Start
Wir beginnen mit einer Figma-Datei, die eine News Card-Komponente mit drei
Varianten:
hero-item ist für den wichtigsten Nachrichtenartikel
article-item steht für einen typischen Artikel.
audio-item ist für einen Artikel gedacht, den du dir anhörst, anstatt ihn zu lesen
Figma-Beispiel kopieren
Wir verwenden eine vorhandene Figma-Datei als Beispiel für dieses Tutorial. Achten Sie darauf,
wenn Sie in Ihrem Figma-Konto angemeldet sind.
Laden Sie HelloNews.fig auf Ihren Computer herunter.
Wechseln Sie in Figma zum Dateibrowser. Bewegen Sie die Maus im linken Bereich über
Entwürfe. Ein +-Symbol wird angezeigt. Klicken Sie auf das +-Symbol und dann auf Importieren.
Wählen Sie die Datei HelloNews.fig aus, die Sie gerade heruntergeladen haben. Dies kann bis zu
zwischen 10 Sekunden und einer Minute.
Öffnen Sie die importierte Datei in Figma.
UI-Paket erstellen
Das Plug-in Relay for Figma fügt Ihrer Komponente zusätzliche Informationen hinzu,
mit unseren Entwicklern zusammenarbeiten,
die unsere Komponente in ihrem Code verwenden.
Öffnen Sie das Relay for Figma-Plug-in in Ihrer Datei (in der Menüleiste: Plugins > Relay)
für Figma) Klicken Sie auf Jetzt starten.
Wählen Sie die Komponente aus und klicken Sie auf Create UI Package (UI-Paket erstellen).
Fügen Sie bei ausgewähltem UI-Paket eine Beschreibung zum Zusammenfassungsfeld hinzu. Für
Beispiel: „Nachrichtenkartenkomponente zur Anzeige von Nachrichteninhalten für eine Liste“.
<ph type="x-smartling-placeholder"></ph>
Benannte Version speichern
Nachdem Sie nun ein UI-Paket erstellt haben, bereiten Sie Ihre Komponente für die Freigabe für das Entwicklungsteam vor.
Öffnen Sie das Figma Relay-Plug-in, falls es noch nicht geöffnet ist.
Klicken Sie auf Mit Entwickler teilen.
Auf dem Bildschirm Für Entwickler freigeben können Sie im Abschnitt Versionsverlauf speichern einen neuen Versionsnamen und eine neue Beschreibung eingeben.
Klicken Sie auf Speichern.
Beispieltitel: Erste neue Karte
Beispielbeschreibung: erste Iteration der Artikelelemente
Android Studio-Projekt herunterladen
Für den Android Studio-Teil dieser Anleitung verwenden wir eine vorkonfigurierte
Android Studio-Projekt Dieses Projekt enthält eine App, die Nachrichtenartikel anzeigt
im Nur-Text-Format.
Doppelklicken Sie auf die Datei, um sie zu entpacken, wodurch ein Ordner namens
HelloNews Verschieben Sie sie in den Basisordner.
Kehren Sie zu Android Studio zurück. Wählen Sie Datei > Öffnen, zeigen Sie mir den Weg nach Hause.
Wählen Sie HelloNews aus und klicken Sie auf Öffnen.
Wenn Sie das Projekt öffnen, werden Sie von Android Studio gefragt, ob Sie dem
Projekt arbeiten. Klicken Sie auf Trust Project (Projekt vertrauen).
In Android Studio importieren
Importieren wir nun unsere Figma-Komponente in das Projekt.
Kopieren Sie in Figma die URL der Figma-Datei mit dem Tutorial News Card. Wir werden
verwenden wir diese URL,
um die Komponenten zu importieren. Oben rechts im
klicken Sie in Figma auf die Schaltfläche Share (Teilen). Klicken Sie im daraufhin angezeigten Dialogfeld auf
Link kopieren:
Wechseln Sie in Android Studio zum HelloNews-Projekt. Wählen Sie Datei > Neu > Importieren
UI Packages... (UI-Pakete...) aus.
Fügen Sie die URL Ihrer Figma-Datei ein und klicken Sie auf Next (Weiter).
Nachdem die Datei abgerufen wurde, was einige Zeit dauern kann, klicken Sie auf
Finish (Fertigstellen).
Klicken Sie auf
um Ihr Projekt aufzubauen. Dies kann etwa eine Minute dauern.
<ph type="x-smartling-placeholder"></ph>
Vorschau der App ansehen und Komponente
Öffnen Sie in der Android-Ansicht
app/java/com/example/hellonews/ui/home/HomeScreen.kt,
sehen Sie eine Vorschau der App mit mehreren Nachrichtenartikeln
Nur-Text-Format mit gedruckten Geschichten über Hörbüchern
app/java
(generated)/com/example/hellonews/newscard/NewsCard.kt öffnen. Dieses
ist der generierte Jetpack Compose-Code für unsere Figma-Komponente. Wählen Sie im
sehen wir, dass drei Varianten der NewsCard-Komponente
von Figma in Code
übersetzt wurden. Sehen wir uns den Code etwas genauer an.
Mit der Aufzählung View können wir wählen, welche Variante für diese Komponente verwendet werden soll.
Der Name der Aufzählung und die zugehörigen Werte wurden aus den Varianten unserer
Figma-Komponente. Diese wird im view-Parameter in unserer NewsCard-Datei verwendet.
zusammensetzbar sind.
Die zusammensetzbare Funktion NewsCard wurde aus dem UI-Paket generiert. Es enthält ein
Parameter des Typs View, mit dem die Variante der Nachrichtenkarte auf
zu instanziieren.
packagecom.example.myapplication.newscardimport...// Design to select for NewsCardenumclassView{HeroItem,ArticleItem,AudioItem}/*** News card component intended to display news items for a list.** This composable was generated from the UI Package 'news_card'.* Generated code; do not edit directly*/@ComposablefunNewsCard(modifier:Modifier=Modifier,view:View=View.HeroItem){...}
Nächstes Video
Wir sind noch nicht bereit, NewsCard zu verwenden. Die Komponente weiß nicht, wie
verschiedene Nachrichtenmeldungen anzuzeigen, nur dieselbe hartcodierte in Figma. Wenn also
die Komponente hinzufügen, würden wir
nur die gleiche Nachrichtenmeldung
wiederholt. Wir benötigen eine Möglichkeit, um anzugeben, welche Teile von NewsCard ausgefüllt werden sollen.
mit dynamischen Daten.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.