Einschränkungen und Fehlerbehebung

Figma und Einschränkungen bei der Übersetzung

Unterstützte Figma-Ebenentypen

Relay unterstützt nur die folgenden Ebenentypen:

  • Textknoten
  • Bildknoten (PNG, JPEG usw.)
  • Frame-Knoten (automatisches und nicht automatisches Layout)
  • Komponenten und Varianten, Komponenteninstanzen
  • Vektorknoten

Nicht unterstützte Figma-Ebenen und -Funktionen

  • Prototyping-Funktionen
  • Gruppen maskieren
  • Slice-Ebenen

Nicht unterstützte Figma-Eigenschaften

Einige Eigenschaften werden nicht unterstützt, darunter:

  • Schatten nach innen, Ebenen weichzeichnen und Hintergrund weichzeichnen
  • Ebenenrotation (Vektordrehung wird unterstützt)
  • Ebenen- oder Strichmischmodi (Mischmodus „Füllung“ wird unterstützt)
  • Texteigenschaften:
    • Absatzabstand
    • Absatzeinzug
    • Zahlenstil
    • Briefformen
    • Stilistische Sets
    • Durchstreichen und Unterstreichen
    • Zeilenhöhe (funktioniert weiterhin, wenn sie auf das gesamte Textelement angewendet wird)
  • Vektoreigenschaften:
    • Funktionen, die vom VectorDrawable-Format von Android nicht unterstützt werden:
      • Eingebettete Bitmapbilder
        • Mit Ausnahme von Rechtecken, die als Bilder und nicht als Vektoren unterstützt werden.
      • Gestrichelte Striche
      • Unkenntlich machen
      • Shadow
      • Muster
      • Schutzmaske
      • Deckkraft der Gruppe
      • Brennpunkt eines radialen Farbverlaufs
    • Funktionen, die vom SVG-Format nicht unterstützt werden:
      • Eckige Farbverläufe
      • Diamant-Farbverläufe
    • Boolesche Operationen zwischen Vektorobjekten (Union / Subtrahieren / schneiden/Ausschließen)
      • Sie können das Problem umgehen, indem Sie einen Vektor kombinieren und ihn vereinfachen.

Teilweise unterstützte Figma-Ebenen und -Eigenschaften

  • Die Abkürzung von Text (Auslassungspunkte) funktioniert am zuverlässigsten, wenn das Textelement aus nur einer Zeile besteht.
  • Füllfarbe:
    • Bilder können nur eine Bildfüllung, aber weitere Füllungen anderer Typen (z. B. Farbverläufe) haben.
    • Für Farbverläufe wird nur lineare Form unterstützt. Zukünftige Versionen werden zusätzliche Unterstützung für die verbleibenden Gradiententypen (Radial, Rauten und Winkel) bieten.
    • Im Figma-Plug-in kann nicht festgelegt werden, dass ein Parameter mehrere Füllungen akzeptieren kann. Füllfarben werden derzeit nur für Volltonfarben unterstützt.
  • Schlagschatten:
    • Schlagschatten können derzeit auf den folgenden Ebenen nicht verwendet werden:
      • Nicht rechteckige Vektoren
      • Gedrehter rechteckiger Vektor
    • Mehrere Schlagschatten pro Ebene werden nicht unterstützt.
    • Andere Schlagschatten-Mischmodi als „Normal“ sind nur unter Android-Version 10 oder höher verfügbar (andernfalls ignoriert).
    • Schlagschatten auf Ebenen sind nur unter Android 9 oder höher verfügbar, mit Ausnahme von Text, der in allen Android-Versionen verfügbar ist, die von „Compose“ unterstützt werden.
    • Schatten werden in der Funktion „Schreiben“ immer hinter transparenten Ebenen angezeigt.
  • Absolute Positionierung in „Auto Layout“:
    • Absolute Objekte müssen sich entweder hinter oder vor allen Auto-Layout-Elementen im Frame befinden. Alle absoluten positionierten Objekte, die sich zwischen Auto-Layout-Elementen befinden, werden an den Anfang dieser Objekte verschoben.
    • Das Verschachteln von Frames mit automatischem Layout mit absolut positionierten Objekten in anderen Frames mit automatischem Layout kann zu einem falschen Layout führen, da der Begrenzungsrahmen des verschachtelten Frames von den positionierten Elementen in diesem Frame beeinflusst wird.

Mehrere Stile werden verworfen, wenn sie an einen Textparameter mit einem Stil übergeben werden

Wenn eine übergeordnete Komponente versucht, Text mit mehreren Stilen an einen Textparameter der verschachtelten Komponente mit nur einem Stil zu übergeben, gehen die verschiedenen Stile im generierten Erstellungscode verloren. Nur der ursprüngliche Stil des Textparameters wird beibehalten.

Diese Verschlechterung ist erforderlich, um nicht übereinstimmende Typen zu vermeiden, die die Kompilierung des generierten Codes verhindern. Wenn der Text in einer Komponente mehrere Stile hat, hat die generierte zusammensetzbare Funktion den Parameter AnnotatedText. Wenn der Text in einer Komponente nur einen Stil hat, hat die generierte zusammensetzbare Funktion den einfachen Parameter String. Im obigen Szenario müssen wir den Rich-Text der übergeordneten Komponente von AnnotatedText in String konvertieren und dabei die verschiedenen Stile löschen, damit er an die verschachtelte Komponenteninstanz übergeben werden kann.

Verschachtelte Komponenten mit denselben Varianteneigenschaften wie die übergeordnete Komponente können nicht kompiliert werden.

Wenn zwei Komponenten eine [Designvariante]{:.external} mit demselben Eigenschaftsnamen haben und eine die andere verschachtelt, dann haben die für die beiden Varianten erstellten Enums im generierten Code denselben Namen und es kommt zu einem Kompilierungsfehler:

Conflicting import, imported name '(variant property)' is ambiguous

Ändern Sie den Namen der Varianteneigenschaft einer der Komponenten, um dieses Problem zu umgehen.

Unterstützung von Schriftarten

Derzeit werden nur Schriftarten von Google Fonts unterstützt.

Fehlerbehebung bei Android Studio

Ich habe eine Fehlermeldung zur Konvertierung von SVG-Ressourcen unter Windows erhalten.

FAILURE: Build failed with an exception.
*   What went wrong:
Execution failed for task ':app:generateDebugRelayCode'.
> A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > Converting SVG files: Exception Converting SVG resources for my_packaged_component
        The syntax of the command is incorrect

Der Name Ihres Android Studio-Projekts ist möglicherweise zu lang. Unter Windows darf der vollständige Pfad des Android Studio-Projekts nicht mehr als 70 Zeichen lang sein. Wir arbeiten daran, diese Länge in einer zukünftigen Version zu erhöhen.

Updates werden nicht in Android Studio importiert

Das Plug-in ruft nur die neueste benannte Version Ihrer Figma-Datei ab. Vergewissern Sie sich, dass Sie eine neue benannte Version Ihrer Figma-Datei mit den Änderungen erstellt haben.

Ich erhalte beim Erstellen eine Fehlermeldung zu SVG und Java Runtime.

Converting SVG Files: Exception running shell command 'cd /path-to/relay/bin; path/to/relay/bin/vd-tool -c -in path/to/hello_card -out /var/folders/...'.
The operation couldn't be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

Installieren Sie Java Runtime und erstellen Sie dann noch einmal.

Ich erhalte eine Fehlermeldung zu Schriftarten beim Erstellen

Es kann eine Fehlermeldung wie diese angezeigt werden:

FAILURE: Build failed with an exception.
*   What went wrong:
Execution failed for task ':app:generateDebugRelayCode'.
> Multiple task action failures occurred:
   > A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > /Users/me/AndroidStudioProjects/MyProject/app/build/generated/res/relay/debug/font/relay_inter_bold.ttf
   > A failure occurred while executing com.google.relay.gradle.GenerateCode$GenerateCodeWorkAction
      > /Users/me/AndroidStudioProjects/MyProject/app/build/generated/res/relay/debug/font/relay_inter_bold.ttf

Dies wird durch eine Race-Bedingung verursacht, bei der mehrere Komponenten versuchen, dieselbe Schriftart in dasselbe Verzeichnis zu kopieren. Wir arbeiten an der Lösung dieses Problems. Versuchen Sie in der Zwischenzeit einfach noch einmal, etwas zu erstellen.

In Android Studio kann das Rückgängigmachen eines gelöschten UI-Paketordners möglicherweise fehlschlagen.

Wenn Sie einen UI-Paketordner im Ordner ui-packages in Android Studio löschen und den Löschvorgang dann rückgängig machen, werden alle Dateien in diesem Ordner, die vor dem Löschen nicht geöffnet wurden, möglicherweise nicht korrekt wiederhergestellt.

Problemumgehung: Importieren Sie die gewünschte Version der Figma-Datei über File > New > Import UI Packages... (Datei > Neu > UI-Pakete importieren...) noch einmal. Sie können auch beim Import auf jede Datei im Ordner „UI Package“ klicken, um sicherzustellen, dass sie korrekt wiederhergestellt werden.

Beim Aktualisieren von Ressourcen außerhalb von UI-Paketen wird kein neuer Build erzwungen

Das Aktualisieren einer Abhängigkeit außerhalb des Verzeichnisses ui-packages (z. B. einer Datei für die Themenzuordnung oder einer Referenzdatei) erzwingt beim Erstellen des Projekts nicht, dass Code neu generiert wird.

Problemumgehung: Wenn Sie eine Aktualisierung des generierten Codes erzwingen möchten, bereinigen Sie das Projekt (Rufen Sie Build > Clean Project auf) oder löschen Sie den generierten Codeordner, der mit dem zu aktualisierenden UI-Paket verknüpft ist. Erstellen Sie dann noch einmal.

Generierter Code oder ui-packages Ordner fehlt im Android-Projektbrowser

In einigen Fällen werden vom Relay für Android Studio-Plug-in generierte Ordner nicht im Android-Projektbrowser angezeigt.

Problemumgehung: Klicken Sie mit der rechten Maustaste auf einen Ordner der obersten Ebene und wählen Sie "Vom Laufwerk neu laden" aus, um Projektordner neu zu laden.

App-Designs für untergeordnete Komponenten werden nicht aktualisiert

Wenn eine übergeordnete Komponente mit einem neuen App-Design noch einmal importiert wird, übernehmen die in DEPS.txt aufgeführten untergeordneten Komponenten das neue Design nicht.

Problemumgehung: Kopieren Sie das Vorschaudesign aus der config.json der übergeordneten Komponente und ersetzen Sie das Vorschaudesign der untergeordneten Komponenten in den jeweiligen config.json durch dieses Design. Nach der Neuerstellung werden die Designs im generierten Code der untergeordneten Komponenten korrigiert.

UI-Paketname muss mit einem Buchstaben beginnen

Wenn der Name eines UI-Pakets nicht mit einem Buchstaben beginnt, generiert Relay einen Code zum Schreiben, der nicht kompiliert werden kann. Außerdem wird die Fehlermeldung The resource name must start with a letter ausgegeben.

Problemumgehung: Benennen Sie in Figma den Namen des UI-Pakets um, sodass er mit einem Buchstaben beginnt.

Der Abstand der Schriftart in „Compose“ stimmt nicht mit dem in Figma überein

Figma und Compose legen Text innerhalb des Begrenzungsrahmens unterschiedlich an. Mit der Funktion „Compose“ wird am oberen Rand des Begrenzungsrahmens ein größerer Abstand hinzugefügt.

Problemumgehung: Sie müssen die Textposition in Figma einige Pixel nach oben verschieben, damit sie in der Funktion „Compose“ korrekt ausgerichtet ist. Wir arbeiten an einer dauerhaften Lösung.