Limitaciones y solución de problemas

Limitaciones de Figma y de la traducción

Tipos de capas de Figma compatibles

Relay solo admite los siguientes tipos de capas:

  • Nodos de texto
  • Nodos de imágenes (PNG, JPEG, etc.)
  • Nodos de marcos (diseño automático y no automático)
  • Componentes y variantes, instancias de componentes
  • Nodos vectoriales

Capas y funciones de Figma no compatibles

  • Funciones de prototipado
  • Grupos de enmascaramiento
  • Capas de Slice

Propiedades de Figma no compatibles

Hay varias propiedades no compatibles, incluidas las siguientes:

  • Sombra interna, desenfoque de capa y desenfoque de fondo
  • Rotación de capas (se admite la rotación vectorial)
  • Modos de combinación de trazo o capa (se admite el modo de combinación de relleno)
  • Propiedades del texto:
    • Espaciado de párrafo
    • Sangría de párrafo
    • Estilos de números
    • Formas de letras
    • Conjuntos estilísticos
    • Tachado y subrayado
    • Altura de línea (esto sí funciona cuando se aplica a todo el elemento de texto)
  • Propiedades vectoriales:
    • Funciones no compatibles con el formato VectorDrawable de Android:
      • Imágenes de mapa de bits incorporadas
        • Excepto los rectángulos, que son compatibles como imágenes en lugar de vectores
      • Trazos discontinuos
      • Desenfoque
      • Sombra
      • Patrón
      • Máscara
      • Opacidad del grupo
      • Punto focal de gradiente radial
    • Funciones no compatibles con el formato SVG:
      • Gradientes angulares
      • Gradientes de diamante
    • Operaciones booleanas entre objetos vectoriales (unión / resta / intersección / exclusión)
      • Una solución alternativa es combinar y compactar en un único vector

Capas y propiedades de Figma parcialmente compatibles

  • El truncamiento de texto (o elipsis) funciona de manera más confiable cuando el elemento de texto es solo una línea
  • Color de relleno:
    • Las imágenes solo pueden tener un relleno, pero pueden tener rellenos adicionales de otros tipos (p. ej., gradientes).
    • Para los gradientes, solo se admite el lineal. Las versiones futuras brindarán compatibilidad adicional con los tipos de gradientes restantes (radial, diamante y angular).
    • En el complemento de Figma, no hay forma de especificar que un parámetro puede aceptar varios rellenos. Si deseas parametrizar un color de relleno, por el momento, solo se admiten colores sólidos para los parámetros.
  • Sombras paralelas:
    • Por el momento, las sombras paralelas no funcionan en las siguientes capas:
      • Vectores no rectangulares
      • Vectores rectangulares rotados
    • No se admiten varias sombras paralelas por capa.
    • Los modos de combinación de sombras paralelas que no sean "Normal" solo están disponibles en Android 10 y versiones posteriores (de no ser así, se ignoran).
    • Las sombras paralelas en las capas solo están disponibles en Android 9 y versiones posteriores, excepto en la de texto, que está disponible en todas las versiones de Android compatibles con Compose.
    • Las sombras siempre se mostrarán detrás de capas transparentes en Compose.
  • Posicionamiento absoluto dentro del diseño automático:
    • Los objetos de posicionamiento absoluto deben estar detrás o delante de todos los elementos de diseño automático en el marco. Cualquier objeto de posicionamiento absoluto que esté en capas entre los elementos de diseño automático se enviará al frente de estos objetos.
    • La anidación de marcos de diseño automático con objetos de posicionamiento absoluto dentro de otros marcos de diseño automático puede dar como resultado un diseño incorrecto, ya que los elementos posicionados de ese marco afectan el cuadro delimitador del marco anidado.

Varios estilos se descartan si se pasan al parámetro de texto con un estilo

Si un componente superior intenta pasar texto con varios estilos a un parámetro de texto del componente anidado con un solo estilo, los varios estilos se pierden en el código de Compose generado. Solo se conserva el estilo original del parámetro de texto.

Esta degradación es necesaria para evitar las discrepancias de tipo que impiden la compilación del código generado. Si el texto de un componente tiene varios estilos, el elemento componible generado tendrá un parámetro AnnotatedText. Si el texto de un componente tiene solo un estilo, el elemento componible generado tendrá un parámetro String simple. En la situación anterior, debemos convertir el texto enriquecido del componente superior de AnnotatedText a String y descartar varios estilos, de modo que pueda pasarse a la instancia del componente anidado.

Los componentes anidados con las mismas propiedades de variante que el componente superior no se puede compilar

Si dos componentes tienen una [variante de diseño]{:.external} con el mismo nombre de propiedad y uno anida el otro, las enumeraciones creadas para las dos variantes tendrán el mismo nombre en el código generado y se mostrará un error de compilación:

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

Para solucionar este problema, cambia el nombre de la propiedad de la variante de uno de los componentes.

Compatibilidad con fuentes

Actualmente, solo se admiten fuentes de Google Fonts.

Solución de problemas de Android Studio

Recibí un error sobre la conversión de recursos SVG en 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

Es posible que el nombre de tu proyecto de Android Studio sea demasiado largo. En Windows, la ruta de acceso completa del proyecto de Android Studio no debe superar los 70 caracteres. Estamos trabajando para aumentar esta duración en una versión futura.

Las actualizaciones no se importan a Android Studio

El complemento solo extraerá la última versión con nombre de tu archivo de Figma. Vuelve a verificar que hayas creado una nueva versión con nombre del archivo de Figma con los cambios.

Recibo un error sobre SVG y Java Runtime durante la compilación

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.

Instala Java Runtime y vuelve a compilar.

Recibo un error sobre las fuentes durante la compilación

Es posible que veas un error similar al siguiente:

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

Esto se debe a una condición de carrera: varios componentes intentan copiar la misma fuente en el mismo directorio. Estamos trabajando para solucionar este problema. Mientras tanto, intenta compilar de nuevo.

En Android Studio, la acción de deshacer la eliminación de una carpeta de paquetes de IU puede fallar

Si borras una carpeta del paquete de IU dentro de la carpeta ui-packages en Android Studio y, luego, deshaces la eliminación, es posible que los archivos de esa carpeta que no se hayan abierto con anterioridad a la eliminación no se restablezcan correctamente.

Solución alternativa: Vuelve a importar la versión del archivo de Figma que necesitas mediante File > New > Import UI Packages…. También puedes hacer clic en cada archivo de la carpeta del paquete de IU en el momento de importarlo para asegurarte de que se restablezcan correctamente.

La actualización de recursos fuera de ui-packages no fuerza una compilación nueva

La actualización de una dependencia ubicada fuera del directorio ui-packages (como un archivo de asignación de temas o uno de componente de referencias) no fuerza la regeneración del código cuando compilas el proyecto.

Solución alternativa: Para forzar una actualización del código generado, borra el proyecto (ve a Build > Clean Project) o la carpeta de código generada asociada con el paquete de IU que debe actualizarse. Luego, vuelve a compilar.

Faltan el código generado o las carpetas ui-packages en el navegador de proyectos de Android

En algunos casos, las carpetas que genera el complemento Relay for Android Studio no aparecen en el navegador de proyectos de Android.

Solución alternativa: Para volver a cargar las carpetas del proyecto, haz clic con el botón derecho en una carpeta de nivel superior y selecciona “Volver a cargar desde el disco”.

No se actualizan los temas de apps para componentes secundarios

Cuando se vuelva a importar un componente superior con un tema de app nuevo, sus componentes secundarios (enumerados en DEPS.txt) no recogerán el tema nuevo.

Solución alternativa: Copia el tema de la vista previa del config.json del componente superior y reemplaza con él los temas de la vista previa de los componentes secundarios en cada config.json respectivo. Después de volver a compilar, se corregirán los temas del código generado de los componentes secundarios.

El nombre del paquete de IU debe comenzar con una letra

Si el nombre de un paquete de IU no comienza con una letra, Relay generará un código de Compose que no se compilará, y mostrará un mensaje de error que indica The resource name must start with a letter.

Solución alternativa: En Figma, cambia el nombre del paquete de IU de modo que comience con una letra.

El padding de la fuente en Compose no coincide con el de Figma

Figma y Compose presentan el texto dentro de su cuadro delimitador de manera diferente. Compose agrega más padding en la parte superior del cuadro.

Solución alternativa: Deberás mover la ubicación del texto en Figma algunos píxeles para que se alinee correctamente en Compose. Estamos trabajando en una solución permanente.