• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página

Juanpol

Diseño UX y UI / Creación de productos digitales

  • Tutoriales de Figma
  • Blog
  • Newsletter
  • 🔴 YouTube

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.

vídeos documentos figjam
Tutorial para añadir vídeos y documentos en FigJam / Foto: Freepik

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.

Índice del artículo

  • ¿Cómo incrustar contenidos en FigJam?
    • Barra de herramientas
    • Pegar el link
  • ¿Qué archivos podemos pegar en FigJam?
    • Vídeos
    • Documentos
    • Sitios web
    • Listas de reproducción
  • Casos prácticos

¿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.

Aprende a usar Figma, Sketch y Webflow

Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Información de privacidad

En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

juanpol

Acerca de Juanpol

Product Designer, Diseñador UX/UI y creador de contenido con 29 años de experiencia. Trabaja en Freepik Company.

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


En este sitio web te solicito algunos datos para poder moderar y responder comentarios de usuarios. Responsable de los datos: Juan Pablo Olmo / Finalidad de los datos: Gestionar los comentarios y evitar el spam. / Legitimación: Aceptación expresa de la política de privacidad. / Almacenamiento de los datos: Base de datos alojada en Siteground España. / Duración: Hasta que lo solicites. / Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Te puede interesar

  • Componentes interactivos de Figma
  • Los mejores plugins de Figma en 2023
  • Cómo crear un scroll en Figma
  • ¿Qué es Figma y para qué sirve?

Información

  • Juanpol
  • Contacto

Juanpol

Juanpol

Diseño UX y UI / Creación de productos digitales

  • info@juanpol.com
  • LinkedIn
  • YouTube
  • Telegram
  • Twitter

  • Privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes informarte más sobre ellas en los ajustes

Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.

Cookies de terceros

Esta web utiliza herramientas de estadística para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies.