Cómo crear un enlace a una imagen de Figma

figma-imagen-crear-enlace

Hoy voy a responder la siguiente pregunta, Cómo crear un enlace a imagen de Figma, la recibí después de publicar el tutorial donde expliqué todos los métodos que ofrece la aplicación para crear enlaces dentro del Canvas.

El lector que se puso en contacto me pedía ayuda para resolver un problema, no encontraba la URL de la imagen que incrustaba segundos antes en su diseño.

Para entender bien su problema lo primero que hice fue pedirle acceso a su archivo y utilizando las herramientas de colaboración me envió una invitación con permisos para ver y editar su diseño.

Cómo obtener el enlace de una imagen en Figma

Una vez dentro de su archivo lo primero que hice fue mandarle un enlace a una charla de Meet. Cuando trabajo con alguien en un archivo de Figma y hacemos algo en común, me ayuda recrear la escena, sentir que ambos estamos delante de la misma pantalla.

Al pulsar «Cargar y reproducir vídeo», aceptas conectar con YouTube para mostrar este contenido. Recibirá tu IP y puede usar cookies y almacenamiento local según sus políticas. Más información. Puedes seguir leyendo sin cargarlo.

Ver en YouTube (se abre en otra pestaña)

Según él estaba haciendo todo bien, incrustaba la imagen de todas las formas posibles:

  • Arrastrando la imagen al Canvas desde el escritorio de su ordenador
  • Utilizando la función Place image siguiendo una de las cuatro opciones que Figma ofrece para utilizarla

Efectivamente estaba usando bien la herramienta para importar imágenes, pero para poder obtener un link a la misma debía hacer algo más, la solución era simple…

Hasta el momento Figma nos ofrece dos tipos de enlaces dentro de un archivo: enlaces a Frames y a Páginas. El lector no encontraba la opción Copy link en la imagen porque Figma no la ofrece.

Para obtener “la URL de una imagen” antes debemos colocarla dentro de un Frame y será la URL del Frame la que introduciremos en el enlace que vayamos a crear.

Los pasos para crear un enlace a una imagen son los siguientes:

  • Incrustar la imagen en el Canvas
  • Seleccionar la imagen
  • Abrir el menú contextual pulsando el botón derecho del ratón y seleccionar la opción Frame selection, también se puede utilizar la combinación de teclas Option + Command + G en macOS y Control + Alt + G en Windows

Finalmente la imagen quedará dentro del nuevo Frame.

Ahora sólo queda seleccionar el Frame y obtener la URL del mismo utilizando el menú contextual, aquí te dejo más información para que puedas aprender a crear y usar links en un archivo de Figma.

También se podría colocar la imagen dentro de una Página y obtener su URL pero entendemos que rara vez usaremos una Página para colocar una imagen sin nada más, de todos modos es una opción válida, todo dependerá de nuestras necesidades.

Si tienes alguna duda por favor deja tu comentario, muchas gracias.

Acerca de Juanpol

Product Designer en Magnific. Combino diseño, código e IA para crear mejores experiencias y agentes que transforman la forma en que diseñamos y construimos.

¿Te lo mando por correo?

Las siguientes notas de trabajo, en tu bandeja. Una o dos veces al mes.

Ver la newsletter