Comparte paquetes de IU

Prácticas recomendadas

Comprueba si hay errores y crea versiones con nombre antes de compartirlas

Cuando tienes todo listo para compartir un componente o una página de componentes, crear una versión con nombre mantiene estables las definiciones del paquete de la IU. Esto evita que los cambios en el archivo de Figma afecten los componentes de producción.

  1. Haz clic en la opción "Share with developer" (Compartir con el desarrollador) del complemento.

    StatusCard en la vista de Android
  2. Los errores que impidan que el desarrollador use el componente se mostrarán en una lista. Primero corrige los errores.

  3. Puedes guardar un historial de versiones después de corregir todos los errores de bloqueo. Esto es lo mismo que guardar un historial de versiones dentro de Figma. Ingresa un título y una descripción para tu nueva versión. Haz clic en Guardar.

    StatusCard en la vista de Android
  4. Tu nueva versión se guarda como un historial de versiones dentro de Figma.

    StatusCard en la vista de Android

Esto vincula el proyecto de Android Studio a la última versión con nombre, lo que permite realizar actualizaciones sin inconvenientes. Si el archivo no tiene versiones con nombre, las actualizaciones en Android Studio siempre extraerán la última versión guardada automáticamente. Sin embargo, recomendamos usar versiones con nombre.

Cuando estés listo, puedes compartir tus paquetes de IU con tus desarrolladores a través del vínculo URL de Figma.

Cómo compartir todos los paquetes de IU de una página

Haz clic con el botón derecho en la página en el panel izquierdo y selecciona Copiar vínculo a la página.

Se comparten todos los paquetes de IU de la página. Los desarrolladores pueden seleccionar importar cualquiera o todos los paquetes de IU en la página de Figma.

Compartir un paquete de IU específico

Con el componente seleccionado, haz clic con el botón derecho y selecciona Copiar/Pegar como > Copiar vínculo.

Solo se comparte el paquete de IU seleccionado a través de la URL. Los desarrolladores solo pueden importar el paquete de IU compartido.

Cómo compartir todos los paquetes de IU en un archivo

En el escritorio de Figma, copia la URL haciendo clic con el botón derecho en la pestaña y selecciona Copy link.

https://www.figma.com/file/sample_file_id/FileName?node-id=1234567

Quita todo lo que esté después del ID de nodo en la URL. Comparte la nueva URL con tu desarrollador.

https://www.figma.com/file/sample_file_id/FileName

Los desarrolladores pueden importar todos los paquetes de IU en el archivo de Figma.

Comparte todos los paquetes de IU de una página con una versión específica

Abre el panel Historial de versiones en Figma. Haz clic con el botón derecho y selecciona Copiar vínculo.

Los desarrolladores pueden importar todos los paquetes de IU en la página en la versión con nombre especificada.

StatusCard en la vista de Android

Uso avanzado

El flujo de trabajo de Relay admite la importación de diferentes versiones de paquetes de IU en el mismo proyecto, pero requiere la formación manual de una URL de archivo Figma.

  1. Copia el vínculo directo al componente que deseas importar. Selecciona la capa del componente, haz clic con el botón derecho y selecciona Copy/Paste as > Copy link. Ejemplo:

    www.figma.com/file/sample_file_id/FileName?node-id=123%3A45

  2. Selecciona la versión del componente que deseas usar. Ve a File > Show version history y selecciona una versión. Luego, haz clic con el botón derecho y elige Copy link para copiar la URL de la versión. Ejemplo:

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=0%3A1&viewport=2425%2C1794%2C2.99

  3. Combina las dos URLs a fin de crear una URL con versión para el componente. Puedes reemplazar el valor node-id en el vínculo con versión por el del vínculo del componente o insertar el parámetro version-id en el vínculo del componente, siempre y cuando ambos parámetros estén presentes en la URL. Ejemplo:

    www.figma.com/file/sample_file_id/FileName?version-id=7654321&node-id=123%3A45