Umgang mit Designvarianten

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.

1. Laden Sie HelloNews.fig auf Ihren Computer herunter.

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

   

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

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

2. Wählen Sie die Komponente aus und klicken Sie auf Create UI Package (UI-Paket erstellen).

   

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

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 Für Entwickler freigeben können Sie im Abschnitt Versionsverlauf speichern einen neuen Versionsnamen und eine neue Beschreibung eingeben.

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

1. Laden Sie die Beispieldatei HelloNews.zip herunter.
2. Doppelklicken Sie auf die Datei, um sie zu entpacken, wodurch ein Ordner namens HelloNews Verschieben Sie 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 HelloNews aus und klicken Sie auf Öffnen.
4. 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.

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

   

2. Wechseln Sie in Android Studio zum HelloNews-Projekt. Wählen Sie Datei > Neu > Importieren UI Packages... (UI-Pakete...) aus.

   

3. Fügen Sie die URL Ihrer Figma-Datei ein und klicken Sie auf Next (Weiter).

   <ph type="x-smartling-placeholder">

   </ph>

   <ph type="x-smartling-placeholder">

   </ph>

   1. Nachdem die Datei abgerufen wurde, was einige Zeit dauern kann, klicken Sie auf Finish (Fertigstellen).

   

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

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

   

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

   

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

   

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

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       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
   */
   @Composable
   fun NewsCard(
       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.

Inhaltsparameter

In diesem Abschnitt fügen wir der Komponente NewsCard Inhaltsparameter hinzu.

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• Inhaltsparameter
• Scrollen
• Die Funktion „Schreiben“ in Views verwenden