Añadir vídeos y documentos en FigJam

Los amigos de Figma no paran en diciembre, hace unas horas han lanzado un upgrade que entre otras cosas nos permite añadir vídeos y documentos en FigJam.

Con la última actualización de su aplicación de pizarras en línea podremos pegar vídeos, documentos, sitios web o listas de reproducción y FigJam creará con ellos una vista previa de su contenido.

Esta novedad es fabulosa, la posibilidad de incrustar enlaces y contenidos multimedia nos permitirá añadir contexto e información complementaria a los whiteboards de FigJam, con todo ello nuestras tareas serán más óptimas y ágiles.

¿Cómo incrustar contenidos en FigJam?

Ahora veamos los métodos que podemos usar para pegar contenidos a las pizarras:

Barra de herramientas

La primera opción que tenemos es utilizar la barra de herramientas de FigJam, la que vemos en el centro del margen inferior de la pantalla.

• Haciendo click en el icono More tools (el de los tres puntos alineados) ubicado en el lado derecho del toolbar abriremos un menú con varias opciones, la primera de ellas es Media, la descripción del ítem lo pone bien claro, “Desde tu ordenador o desde la web».
• Si pinchamos en Media se abrirá un nuevo diálogo con dos bloques, nos interesa el segundo, el que lleva por título Links.
• Allí encontraremos un INPUT donde vamos a pegar el enlace (previamente copiado en el portapapeles de nuestro sistema) al contenido que deseamos incrustar en nuestro archivo.
• Después vamos a pinchar en el botón Add, que se activará justo después de pegar el link.
• Por último FigJam generará una tarjeta en el whiteboard con (casi siempre) tres elementos: miniatura, título y descripción del contenido. En unos bloques más abajo hablaré de las pequeñas diferencias que pueden tener las tarjetas que incrustamos.

Pegar el link

La segunda opción es la más rápida y seguramente será la favorita de las personas que usan FigJam con más asiduidad.

Con el enlace copiado en nuestro clipboard sólo vamos a pulsar las teclas Control + V (en Windows) o Command + V (en macOS) para pegarlo en el whiteboard. Y FigJam se encargará de generar la vista previa del contenido.

Atención: las vistas previas funcionan con enlaces públicos.‎ Si los contenidos de las URLs que quieren pegar son privados o tienen alguna limitación de acceso es muy probable que no puedan mostrar una vista previa.

¿Qué archivos podemos pegar en FigJam?

Hagamos un repaso de los tipos de archivos que podemos incrustar en FigJam.

Vídeos

YouTube, Vimeo, Dailymotion, Loom y Twitch son los servicios de vídeo que he probado. FigJam mostrará una tarjeta con una vista previa interactiva.

• YouTube muestra captura y título.
• Vimeo y Loom muestran captura, título y descripción.
• Dailymotion sólo ofrece captura.
• Hice pruebas con vídeos de Twitch, pero no obtuve buenos resultados.

Si seleccionamos con el ratón una de las tarjetas se mostrará un menú con tres iconos:

• Abrir link: abrirá una ventana de nuestro navegador predeterminado con el enlace del vídeo.
• Maximizar: abrirá la tarjeta a (casi) pantalla completa, el vídeo se reproducirá automáticamente con YouTube y Vimeo, Dailymotion en cambio seguirá mostrando el botón Play.
• Cambiar a texto: se ocultará la tarjeta y se mostrará un texto con la URL del vídeo.

Documentos

He probado cuatro tipos de documentos: Figma, Google Drive, Word y Pages.

• Cuando pegamos enlaces a diseños de Figma las tarjetas muestran una captura del archivo (o el cover que hemos seleccionado) y el título del mismo.
• Con Google Drive he obtenido una de las mejores experiencias, en realidad con cualquiera de los archivos de la suite Google Workspace. La tarjeta muestra una miniatura del documento, título y descripción.
• Word (de Microsoft Office) genera una tarjeta con una captura con el icono de un documento de Word.
• Pages muestra menos información, la tarjeta sólo tiene el título del documento y el nombre del autor.

Cuando seleccionamos las tarjetas con el ratón FigJam muestra un menú de opciones:

• Maximizar: se muestra únicamente con los archivos de Figma, esta opción nos permite abrir la vista previa a (casi) pantalla completa y recorrer el canvas del archivo, la experiencia es muy parecida a la que encontramos en la ficha de un archivo publicado en Figma Community.
• Display vertical: muestra la captura del archivo y debajo el resto de los datos.
• Display horizontal: igual que la opción anterior pero con la captura del archivo a la izquierda.
• Abrir link y Cambiar a texto en todos los casos, las mismas opciones que se despliegan cuando pegamos URLs de vídeos.

Sitios web

La estructura de las tarjetas generadas a partir de las URLs de sitios web es (casi) siempre la misma: imagen, título, descripción, avatar y link. Cuando digo avatar me refiero al favicon, el mismo que se muestra en la barra de dirección del browser o navegador web.

La vista previa se genera con la información mostrada en las SERPs de Google (los resultados de búsqueda). Hablo del Schema, el lenguaje universal con datos estructurados que los buscadores leen para “entender” y mostrar el contenido de un sitio web.

Si una URL no tiene una imagen definida dentro del Schema, la tarjeta que genere FigJam no mostrará ninguna imagen.

Las tarjetas de un sitio web se mostrarán con casi cualquier URL, siempre y cuando tenga un Schema completo y bien estructurado.

Listas de reproducción

Es bastante curioso, hasta este momento, mientras escribo este artículo, no he podido incrustar la URL de una lista de reproducción de Spotify.

Pego el link sin problemas y FigJam genera una tarjeta vacía, sólo muestra el título «Spotify», el avatar de la aplicación y la URL open.spotify.com, muy raro…

Seguiré atento hasta que se solucione este detalle.

Casos prácticos

¿Cuándo añadir vídeos y documentos en FigJam? Las aplicaciones de esta nueva funcionalidad son prácticamente infinitas, el límite lo pondrán las personas que usen la herramienta.

Desde que existe FigJam suelo añadir links externos en muchos de los documentos con los que trabajo, solo o de forma colaborativa. La diferencia es que ahora podré hacerlo utilizando las tarjetas estáticas o interactivas que se generen automáticamente.

Mis casos de uso más comunes son:

• Añadir enlaces a mis archivos de análisis y benchmarking.
• Complementar tablas y gráficas a documentos PRD, MRD y BRD.
• Pegar links a documentos de Google Docs y Google Sheets con información de interés.
• Incrustar vídeos o listas de reproducción relacionadas con la información de un proyecto.

Recordad, las posibilidades son tantas como lo exijan nuestras necesidades.

¿Qué opinas al respecto?

¿En qué casos incrustas o incrustarás enlaces en tus archivos de FigJam?

Si deseas compartir tu experiencia por favor deja un comentario, gracias de antemano.