Limitations et dépannage

Limites de Figma et de traduction

Types de calques Figma compatibles

Relay n'accepte que les types de calques suivants:

  • Nœuds de texte
  • Nœuds d'image (PNG, JPEG, etc.)
  • Nœuds de frame (mise en page automatique et non automatique)
  • Composants et variantes, instances de composants
  • Nœuds vectoriels

Calques et fonctionnalités Figma non compatibles

  • Fonctionnalités de prototypage
  • Groupes de masquage
  • Calques de tranche

Propriétés Figma non compatibles

Plusieurs propriétés ne sont pas prises en charge :

  • Ombres internes, floutage des calques et de l'arrière-plan
  • Rotation des calques (la rotation vectorielle est prise en charge)
  • Modes de fusion de calques ou de traits (le mode de fusion de remplissage est pris en charge)
  • Propriétés du texte :
    • Espace entre paragraphes
    • Retrait de paragraphe
    • Style des chiffres
    • Formes de lettres
    • Ensembles stylistiques
    • Barré et souligné
    • Hauteur de ligne (fonctionne encore lorsque appliquée à l'intégralité de l'élément de texte)
  • Propriétés des vecteurs :
    • Fonctionnalités non compatibles avec le format VectorDrawable d'Android :
      • Images bitmap intégrées
        • À l'exception des rectangles, qui sont acceptés en tant qu'images au lieu de vecteurs
      • Traits pointillés
      • Floutage
      • Ombre
      • Motif
      • Masque
      • Opacité du groupe
      • Point de fuite du dégradé radial
    • Fonctionnalités non compatibles avec le format SVG :
      • Dégradés angulaires
      • Dégradés en losange
    • Opérations booléennes entre les objets vectoriels (union, soustraction, croisement, exclusion)
      • Une solution consiste à combiner et à aplatir en un seul vecteur

Calques et propriétés Figma partiellement compatibles

  • La troncation de texte (points de suspension) fonctionne de manière plus fiable lorsque l'élément de texte ne comporte qu'une seule ligne
  • Couleur de remplissage :
    • Les images ne peuvent avoir qu'un seul remplissage d'image, mais peuvent avoir des remplissages d'autres types (par exemple, des dégradés)
    • En ce qui concerne les dégradés, seul le format linéaire est accepté. Les futures versions prendront en charge les autres types de dégradé (radial, losange et angulaire).
    • Dans le plug-in Figma, il n'existe aucun moyen de spécifier qu'un paramètre peut accepter plusieurs remplissages. Si vous souhaitez paramétrer une couleur de remplissage, seules les couleurs unies sont actuellement prises en charge pour les paramètres.
  • Ombres projetées :
    • Les ombres projetées ne fonctionnent actuellement pas sur les calques suivants :
      • Vecteurs non rectangulaires
      • Vecteur rectangulaire ayant subi une rotation
    • Il n'est pas possible d'ajouter plusieurs ombres projetées à un calque.
    • Les modes de fusion d'ombres projetées autres que "Normal" ne sont disponibles que sur Android 10 ou version ultérieure (ils sont ignorés dans les autres versions).
    • Les ombres projetées sur des calques ne sont disponibles que sur Android 9 ou version ultérieure, à l'exception du texte, qui est disponible sur toutes les versions Android compatibles avec Compose.
    • Les ombres s'afficheront toujours derrière des calques transparents dans Compose.
  • Positionnement absolu dans la mise en page automatique :
    • Les objets positionnés de façon absolue doivent être placés devant ou derrière les éléments de mise en page automatique dans le frame. Tous les objets positionnés de façon absolue entre des éléments de mise en page automatique sont déplacés devant ces objets.
    • L'imbrication de frames de mise en page automatique avec des objets positionnés de façon absolue dans d'autres frames de mise en page automatique peut donner lieu à une mise en page incorrecte. En effet, le cadre de délimitation du frame imbriqué est affecté par les éléments positionnés dans ce frame.

Les divers styles d'un texte sont ignorés s'ils sont transmis à un paramètre de texte à un seul style

Si un composant parent tente de transmettre du texte avec plusieurs styles dans un paramètre de texte de composant imbriqué avec un seul style, les différents styles sont perdus dans le code Compose généré. Seul le style d'origine du paramètre de texte est conservé.

Cette dégradation est nécessaire pour éviter les incohérences de type qui empêchent la compilation du code généré. Si le texte d'un composant comporte plusieurs styles, le composable généré comporte un paramètre AnnotatedText. Si le texte d'un composant n'a qu'un seul style, le composable généré comporte un paramètre String simple. Dans le scénario ci-dessus, nous devons convertir le texte enrichi du composant parent de AnnotatedText en String, en ignorant les différents styles, afin qu'il puisse être transmis à l'instance de composant imbriqué.

La compilation des composants imbriqués ayant les mêmes propriétés de variante que celles du composant parent échoue

Si deux composants ont une [variante de conception]{:.external} avec le même nom de propriété et que l'un est imbriqué dans l'autre, les énumérations créées pour les deux variantes porteront le même nom dans le code généré. Une erreur de compilation sera renvoyée :

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

Pour contourner ce problème, modifiez le nom de propriété de la variante de l'un des composants.

Polices compatibles

Actuellement, nous n'acceptons que les polices Google Fonts.

Résoudre des problèmes liés à Android Studio

J'ai reçu un message d'erreur concernant la conversion de ressources SVG sous Windows

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

Le nom de votre projet Android Studio est peut-être trop long. Sous Windows, le chemin d'accès complet le projet Android Studio ne doit pas comporter plus de 70 caractères. Nous mettons tout en œuvre augmenter cette durée dans une prochaine version.

Les mises à jour ne sont pas importées dans Android Studio

Le plug-in extraira uniquement la dernière version nommée de votre fichier Figma. Vérifiez que vous avez créé une nouvelle version nommée de votre fichier Figma avec les modifications.

Un message d'erreur concernant l'environnement d'exécution Java et SVG s'affiche lors de la compilation

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.

Réinstallez l'environnement d'exécution Java, puis recompilez.

Un message d'erreur s'affiche concernant les polices lors de la compilation

Un message d'erreur semblable à celui-ci peut s'afficher :

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

La raison de cette erreur est une condition de concurrence : plusieurs composants tentent de copier la même police dans le même répertoire. Nous mettons tout en œuvre pour résoudre ce problème. En attendant, essayez de recompiler le code.

Dans Android Studio, annuler la suppression d'un dossier de package UI peut échouer

Dans Android Studio, si vous supprimez un dossier de package UI dans le dossier ui-packages, puis que vous annulez la suppression, les fichiers de ce dossier qui n'avaient pas été ouverts avant la suppression risquent de ne pas être restaurés correctement.

Solution : Réimportez la version du fichier Figma dont vous avez besoin en sélectionnant Fichier > Nouveau > Importer les packages UI. Vous pouvez également cliquer sur chaque fichier dans le dossier du package UI lors de l'importation afin de vous assurer qu'ils seront restaurés correctement.

La mise à jour de ressources en dehors de ui-packages ne force pas une nouvelle compilation

Mettre à jour une dépendance située en dehors du répertoire ui-packages (un fichier de mappage de thème ou un fichier de composant de référence, par exemple) ne force par la regénération du code lorsque vous compilez le projet.

Solution : Pour forcer la mise à jour du code généré, nettoyez le projet (accédez à Compiler > Nettoyer le projet) ou supprimez le dossier du code généré associé au package UI qui doit être mis à jour. Ensuite, compilez à nouveau le code.

Il manque du code généré ou des dossiers ui-packages dans le navigateur de projet Android

Dans certains cas, les dossiers générés par le plug-in Relay for Android Studio ne sont pas dans le navigateur de projet Android.

Solution: Pour actualiser les dossiers du projet, effectuez un clic droit sur un dossier de niveau supérieur, puis sélectionnez « Recharger depuis le disque ».

Les thèmes d'application des composants enfants ne sont pas mis à jour

Lorsqu'un composant parent est réimporté avec un nouveau thème d'application, ses composants enfants (répertoriés dans DEPS.txt) ne récupèrent pas le nouveau thème.

Solution: copiez le thème d'aperçu depuis le fichier config.json, puis remplacez les composants enfants prévisualisez les thèmes, les config.json respectifs. Après la recompilation, les thèmes des composants enfants le code généré seront corrigés.

Le nom du package UI doit commencer par une lettre

Si le nom du package UI ne commence pas par une lettre, Relay génère un code Compose qui ne se compile pas, et le message d'erreur suivant s'affiche : The resource name must start with a letter.

Solution : Dans Figma, renommez le package UI afin qu'il commence par une lettre.

La marge intérieure de la police dans Compose ne correspond pas à celle de Figma

Figma et Compose placent différemment le texte dans son cadre de délimitation. Compose ajoute une marge intérieure supérieure en haut du cadre de délimitation.

Solution : Vous devez déplacer l'emplacement du texte dans Figma de quelques pixels vers le haut pour qu'il s'aligne correctement dans Compose. Nous nous efforçons de trouver une solution permanente.