Stile dem Design „Compose“ zuordnen

Zuordnungen zwischen Stilen in Figma und Design in Compose

Mit Figma können Designschaffende einen Stil auf ein Designelement anwenden. Ein Stil ist ein wiederverwendbarer Sammlung von Eigenschaften wie Farben oder Typografie. Da es zentral ist, definiert haben, kann ein Team Eigenschaften über alle Designs hinweg definieren und aktualisieren, Aktualisierung eines einzelnen Designelements. Sie können Relay so einrichten, dass Figma zu Jetpack Compose-Designs hinzufügen.

Die Zuordnung zwischen Figma-Stilen und Compose-Designs wird über eine Konfigurationsdatei.

Zuordnung von Figma-Stilen und Compose-Designs in der Konfigurationsdatei

Im unten gezeigten Figma-Design werden beispielhaft Stile aus Material 3 von Google verwendet. Design-Kit Für den Text Primär – Titel groß lautet die Schriftart: M3/title/large und die Farbe M3/sys/light/primary.

Material 3-Stile in Figma

Wenn wir das Design mit aktivierter Stilübersetzung in das M3 Design Kit importieren, Der folgende Code wird für den Text Primär - Titel groß generiert:

@Composable
fun PrimaryTitleLarge(modifier: Modifier = Modifier) {
    Text(
        content = "Primary - Title large",
        fontSize = MaterialTheme.typography.titleLarge.fontSize,
        fontFamily = MaterialTheme.typography.titleLarge.fontFamily,
        color = MaterialTheme.colorScheme.primary,
        height = MaterialTheme.typography.titleLarge.lineHeight,
        letterSpacing = MaterialTheme.typography.titleLarge.letterSpacing,
        textAlign = TextAlign.Left,
        fontWeight = MaterialTheme.typography.titleLarge.fontWeight,
        modifier = modifier
    )
}

Um diese Funktion zu nutzen, verwenden Sie Stile wie gewohnt in Figma. Dann in Android Studio verwenden, navigieren Sie zum Menü Datei > Neu > Import UI Packages... (UI-Pakete importieren...) und prüfen Sie dann Übersetze Figma-Stile in das Design „Compose“.

An dieser Stelle müssen Sie eine Konfiguration für die Übersetzung der Stile:

  • Wenn sie direkt aus dem Material 3 Design Kit von Google stammen für Figma (Format M3/body/medium or M3/sys/light/primary) und wählen Sie dann die Option Material 3 Design Kit-Konfiguration aus.
  • Wenn sie direkt aus dem Material 2 Design Kit von Google stammen für Figma (Format 01. Primary/500 or Subtitle 1), dann wählen Sie das Konfiguration des Material 2 Design Kit.

  • Wenn Sie eigene Stildefinitionen haben, wählen Sie die Option Benutzerdefiniert Konfiguration und wählen Sie die Datei mit den Zuordnungen aus. zwischen den Figma-Stilen und den Compose-Designs (in diesem Abschnitt beschrieben).

    Dialogfeld „UI Package importieren“

Wenn es im Figma-Design Stile gibt, die nicht in der ausgewählten Konfiguration wird im Dialogfeld „Importieren“ für jeden nicht zugeordneten Stil eine Warnung angezeigt. Jedes Nicht zugeordneter Stil wird stattdessen in seinen Literalwert übersetzt. Die Warnungen sind anfänglich minimiert; klicken Sie auf das Warnbanner, um es zu maximieren. Jede Warnung hat ein Link zu der Ebene in der Figma-Datei, die die Warnung auslöst.

Warnungen im Importdialog

Nach dem Import befindet sich die Stilkonfiguration in Android Studio Projekt arbeiten. Du findest sie im ui-package-resources/style-mappings -Verzeichnis.

Konfigurationsdateien für benutzerdefinierte Übersetzungen

Die Übersetzung von Figma-Stilen in Compose-Designs umfasst zwei Schritte:

  1. Ein Figma-Stil in einem UI-Paket wird in ein Design-Token in der Benutzeroberfläche übersetzt. JSON-Datei mit der Paketdefinition im Ordner „UI Package“ Ihres Android-Geräts Studio-Projekt
  2. Ein Design-Token in der Definitionsdatei eines UI-Pakets wird in ein Snippet Erstellen Sie den Designcode in Ihrem Android Studio-Projekt.

Das Format der benutzerdefinierten Konfigurationsdatei (im JSON-Format) entspricht zwei Schritte ausführen. Hier sehen Sie ein Beispiel für eine einfache benutzerdefinierte Konfigurationsdatei, verarbeitet nur Farbstile:

{
  "figma": {
    "colors": {
      "my-app-theme/sys/light/primary": "myapp.sys.color.primary",
      "my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
      "my-app-theme/sys/light/background": "myapp.sys.color.background",
      "my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
      "my-app-theme/sys/dark/background": "myapp.sys.color.background",
      "my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
    }
  },
  "compose": {
    "colors": {
      "myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "myapp.sys.color.background": "MaterialTheme.colorScheme.background",
      "myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

Es gibt zwei Abschnitte der obersten Ebene: figma (in dem Schritt 1 angegeben wird) und compose (in dem Schritt 2 angegeben wird). Beide enthalten einen colors-Abschnitt:

  • Im Abschnitt colors von figma werden ein Figma-Stil und der entsprechende Designtoken, das in die Definitionsdatei für das UI-Paket geschrieben werden sollte.
  • Der Abschnitt colors von compose gibt ein Designtoken im UI-Paket an. die Definitionsdatei und das entsprechende Code-Snippet, um Ihren Eingabecode zu ändern.

In der obigen Beispielkonfiguration kann alles, was die Farbe verwendet, Für my-app-theme/sys/light/primary in Figma steht die Farbe so myapp.sys.color.primary in der Definitionsdatei für das UI-Paket. Dann, während des Codes wird diese Farbe als MaterialTheme.colorScheme.primary in Schreiben.

Der Abschnitt compose enthält auch den Abschnitt options, der angibt, Pakets, in dem sich ein bestimmtes Code-Symbol befindet. Das Beispiel oben besagt, dass MaterialTheme befindet sich im androidx.compose.material3-Paket, was daher sollte in jedem generierten Code importiert werden.

Das Zuordnen von Typografiestile ist etwas komplizierter als Farbstile. Hier ist Das gleiche Beispiel wie oben, wobei jedoch Typografiestile hinzugefügt wurden:

{
  "figma": {
    "colors": {
      "my-app-theme/sys/light/primary": "myapp.sys.color.primary",
      "my-app-theme/sys/light/primary-container": "myapp.sys.color.primary-container",
      "my-app-theme/sys/light/background": "myapp.sys.color.background",
      "my-app-theme/sys/light/on-background": "myapp.sys.color.on-background",
      "my-app-theme/sys/dark/background": "myapp.sys.color.background",
      "my-app-theme/sys/dark/on-background": "myapp.sys.color.on-background"
    },
    "typography": {
      "symbols": {
        "my-app-theme/headline/large": "myapp.sys.typescale.headline-large",
        "my-app-theme/body/medium": "myapp.sys.typescale.body-medium"
      },
      "subproperties": {
        "fontFamily": "font",
        "fontWeight": "weight",
        "fontSize": "size",
        "letterSpacing": "tracking",
        "lineHeightPx": "line-height"
      }
    }
  },
  "compose": {
    "colors": {
      "myapp.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "myapp.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "myapp.sys.color.background": "MaterialTheme.colorScheme.background",
      "myapp.sys.color.on-background": "MaterialTheme.colorScheme.onBackground"
    },
    "typography": {
      "symbols": {
        "myapp.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
        "myapp.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium"
      },
      "subproperties": {
        "font": "fontFamily",
        "weight": "fontWeight",
        "size": "fontSize",
        "tracking": "letterSpacing",
        "line-height": "lineHeight"
      }
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

Die Struktur der Typografieabschnitte spiegelt die Tatsache wider, dass ein Typografiestil aus vielen untergeordneten Properties. In Figma und Compose gibt es einen Typografiestil, den Namen des Schriftbilds, die Schriftstärke, die Schriftgröße, den Buchstabenabstand und die Unternehmensgröße. Anstatt die einzelnen Stile einzeln zuordnen zu müssen, Untereigenschaften immer wieder werden die Stile stattdessen Tokens zugeordnet. und Themen und ordnen Sie dann jede einzelne untergeordnete Property separat zu.

Das Beispiel oben besagt, dass ein Figma-Textelement mit dem Stil my-app-theme/headline/large wird in die Definitionsdatei des UI-Pakets geschrieben: Die Schriftart des Textes ist myapp.sys.typescale.headline-large.font, die Größe ist myapp.sys.typescale.headline-large.size usw. Wenn die Funktion zum Schreiben von Code generiert, eine zusammensetzbare Funktion RelayText, die die zusammensetzbare Funktion Text in Material erstellen) erstellt wird, wobei der Parameter font MaterialTheme.typography.headlineLarge.fontFamily ist der size-Parameter MaterialTheme.typography.headlineLarge.fontSize usw.

Beispiele für Konfigurationsdateien finden Sie in den integrierten Materialien 3 und Material 2 Design Kit-Konfigurationen, bei denen genau dasselbe Format verwendet wird. Sie können laden Sie die Dateien hier herunter:

Beschränkungen

Derzeit gibt es mehrere Situationen, in denen Stile nicht in Themen:

  • Textstile, die nur auf einen Teil eines Textelements angewendet werden (wie beschrieben) in Mehrere Textstile)
  • Wenn auf verschiedene Varianten einer Komponente verschiedene Stile angewendet werden, wird nur ein Stil übersetzt.