Cómo añadir links en los diseños de Figma

En este post voy a responder la inquietud de un lector que trabaja en el equipo de marketing de una empresa tecnológica. En su mensaje me decía que trabaja todo el día con archivos de Google Workspace (antes G Suite) y me hacía una pregunta: ¿Cómo añadir links en los diseños de Figma?

Lo primero que hice fue pedirle más información, para poder darle una respuesta precisa necesitaba saber qué tipo de datos quería añadir a los archivos en los que colaboraba junto a las personas del equipo de diseño.

Incrustar documentos en el Canvas

Me dijo que en ese momento tenía redactadas casi ocho páginas en un archivo de Google Docs, con encabezados, textos y tablas llenas de información. Y que quería añadirlo al archivo de Figma. Antes de poder decirle algo me dijo que se disponía a exportar las páginas del archivo en formato PDF para luego incrustarlas en el Canvas de Figma.

Le dije que como solución rápida podría valer y al mismo tiempo le prometí redactar este artículo para explicarle “el método” que aplico en mi trabajo diario, tanto en diseños propios y personales, como en los que colaboro con personas de perfil UX, UI, copywriter, translator, marketing, growth, etc.

¿Por qué no me gusta pegar capturas de pantalla?

La opción de importar al Canvas capturas de archivos con documentación no me convence porque tengo la sensación de “perder” dicha información. Quiero decir, una vez pegadas las capturas ya no puedo actualizarlas. Podría editar los archivos originales, hacer una nueva exportación a formatos JPG, PNG o PDF y volver a pegarlos en Figma. Pero creo que se puede trabajar de forma más óptima, rápida y fluida.

Cómo añadir documentación a los diseños de Figma

Antes de centrarme en las herramientas y servicios que uso para documentar mis diseños de Figma me gustaría decir que en algunos casos vuelco información directamente en el mismo archivo.

Lo hago en diseños rápidos, en algún borrador o alguna protoidea que quizás en algún momento se convierta en algo más grande que requiera una mejor organización de conceptos, objetivos, etc. Para hacerlo cuento con herramientas propias que construí dentro de Figma y que mantengo actualizadas en el DSM de mi cuenta personal.

Son básicamente cuatro herramientas:

• Hoja de estructura simple para escribir
• Post-it para dejar apuntes y notas rápidas
• Flecha para conectar partes del diseño con comentarios y preguntas
• Set de iconos para complementar la información volcada en la hoja y los post-its

Si te interesa usarlas podría compartir el archivo en mi perfil de Figma Community para que lo puedas duplicar en tu cuenta y comenzar a utilizarlo. Por favor déjamelo saber dejando un comentario aquí mismo.

Ahora sí voy a hablar de mi método para documentar diseños en Figma. Como siempre digo es “mi receta” y puede que no sea la tuya. Si quieres compartir tu experiencia adelante, puedes dejar un comentario, gracias de antemano.

Usar Google Workspace

Toda la información que genero en mi trabajo, con mis blogs y con cualquier otra actividad personal la vuelco en dos cuentas de Google Workspace.

Comencé a usar el servicio cuando se abrió en fase beta, en ese momento se llamaba Google Apps, luego se hizo de pago, años después pasó a llamarse G Suite y desde hace muy poco Google Workspace. Uso una cuenta para trabajar y la otra para todo lo demás, en síntesis estoy muy acostumbrado a trabajar con ellas. Es cierto que con el tiempo aparecieron “competidores”, últimamente he probado Notion durante un mes para sacar mis propias conclusiones, mucho antes hice lo mismo con Coda.io, de iCloud (la vieja .Mac) o Microsoft Office 365, mejor ni hablar…

La información que enlazo desde los diseños que hago en Figma está toda en las cuentas de Google Workspace. Es terriblemente simple para mí, porque realizo con ellas mis tareas de análisis e investigación desde hace 15 años, recordemos que la beta de Google Apps se liberó en agosto de 2006.

Mi trabajo no ha cambiado, sigo generando archivos de texto en Docs, hojas de cálculo en Sheets, notas y listas de tareas en Keep, correos electrónicos en Gmail, páginas wiki con Google Sites y gestionando carpetas y subcarpetas en Drive. Y toda esa información se puede vincular a Figma con un simple enlace.

La ventaja de hacerlo así es que toda la información se puede editar fácilmente desde cualquier dispositivo en el que se haya abierto una sesión, ordenadores, tablets y teléfonos móviles.

Si tuviera la necesidad de destacar o complementar los links a estos documentos en el Canvas de Figma podría usar algunas de las cuatro herramientas que comenté en párrafos anteriores.

Cómo avisar si hago cambios en la documentación

Cuando trabajo solo en un proyecto no mando notificaciones, todo el proceso lo documento en una hoja de cálculo de Sheets con casillas inteligentes, vinculadas a otros archivos, etc.

Pero si estoy colaborando con gente necesito enviarlas para que sepan y estén al tanto de todos los cambios que se hacen en la documentación. Incluso muchas veces son esas personas las que hacen modificaciones y me envían notificaciones a mí.

Slack

Slack es la herramienta de mensajería que utilizamos para trabajar en equipo. Entonces, cuando hago un cambio en la documentación mando un mensaje a una cuenta determinada o de manera general en alguno de los canales que hemos creado para colaborar.

Comentarios de Figma

Otra opción es utilizar los comentarios nativos de Figma. Se podrían usar sin problema pero en mi caso prefiero usarlos cuando el cambio, la duda o el comentario está relacionado con los diseños que hago en Figma y que están directamente en el Canvas de la aplicación.

La herramienta Comentarios de Figma la abordaré con mucho más detalle en un nuevo post con capturas de pantalla, vídeos y ejemplos de uso real.

Me gustaría destacar que es posible conectar Figma con Slack utilizando una aplicación que se añade y configura muy fácilmente. La última versión se lanzó hace pocos días, comenté algunos detalles sobre la misma en el post donde comparto información sobre todas las releases de Figma.

Jira

La otra herramienta que más uso para trabajar es Jira Software de la empresa Atlassian. En ciertas ocasiones, si respondo un post en una de las tarjetas de proyecto, añado un link a la documentación que he modificado. Jira se encargará de enviar una notificación a todas las personas vinculadas a dicha tarea.

Evidentemente hay muchas otras formas de enviar notificaciones pero como dije antes, sólo compartiré mi experiencia personal. Sinceramente me encantaría que compartas la tuya, estoy convencido que con tu aportación nos darás ideas que en algunos casos podremos implementar en nuestro flujo de trabajo.

Cómo crear enlaces en Figma

Ya he dado respuesta a la inquietud de mi amigo, ahora toca complementar este post explicando los tipos de enlaces que puedes crear en los diseños de Figma.

Enlace externo

Los enlaces externos sirven para enviar al usuario a una URL fuera de Figma. Puede ser un sitio web, un documento dentro de Google Drive, un correo electrónico de Gmail, etc.

Para crearlo sigue estos pasos:

• Selecciona una cadena de texto o una parte de la misma que tengas en el Canvas
• Pulsa las teclas Command + K en macOS o Control + K en Windows
• También puedes pinchar en el icono Create link ubicado en la zona de las herramientas contextuales de la toolbar de Figma
• Introduce o pega la dirección del enlace en el INPUT con formato de tooltip que aparecerá justo encima de tu selección, el placeholder lo pone claramente “Type or paste URL”
• Para finalizar pulsa la tecla Enter

Por defecto Figma aplicará un subrayado al enlace como si fuera un hipervínculo HTML, por tu parte puedes cambiar el estilo del link tratándolo como lo que es, un elemento más de tu diseño.

Enlaces dentro del mismo archivo

En algunos proyectos tendrás la necesidad de crear enlaces a Frames o a Páginas del archivo de Figma.

Frames

Para obtener la URL de un Frame debes:

• Seleccionarlo pulsando en el título del mismo, lo puedes hacer en el Canvas o en el sidebar izquierdo de la aplicación
• Pulsar el botón derecho del ratón y elegir la opción Copy link dentro del ítem Copy/Paste

Páginas

También puedes crear un link a otra página del archivo, es decir, el usuario podrá ir de una página a otra pulsando un enlace dentro de tu diseño.

Para obtener la URL de una Página debes:

• Seleccionarla en el sidebar izquierdo de Figma
• Abrir el menú contextual con el botón derecho del ratón
• Y seleccionar la primera opción Copy link to page

Extra: también podremos crear un enlace a un Frame determinado de otra página, en este caso el link que copiaremos en el portapapeles es el del Frame de destino.

Ahora veamos el (hasta el momento) último caso para crear links en Figma.

Enlazar con otro archivo de Figma

Ahora veamos cómo crear enlaces para conectar con otro archivo de Figma, un diseño o un prototipo.

Para obtener la URL debes:

• Pulsar en el botón Share o Share prototype en la parte derecha de la barra de herramientas de un archivo o un prototipo
• En ambos casos se abrirá un modal con varias opciones, una de ellas es Copy link, está ubicada en la parte inferior izquierda del modal

Cómo editar y borrar enlaces

En cualquier caso siempre tendrás la posibilidad de editar o borrar los enlaces creados.

Si te pones encima de un enlace se activará el estado Hover, puedes pinchar sobre el mismo o esperar momento para que aparezca el tooltip con el link de destino junto a otro que pone Edit.

Si pinchas en Edit el contenido del tooltip cambiará:

• Puedes editar el enlace debes introduciendo la nueva URL en el INPUT y pulsar la tecla Enter
• O lo puedes borrar pinchando en el icono con el eslabón de cadera roto, en este caso el link desaparecerá y Figma te mostrará una notificación en la parte inferior de la pantalla

Cómo usar los enlaces de Figma

Después de explicar los métodos para enlazar sitios web, Páginas, Frames y archivos de Figma para ver algunos ejemplos de uso.

• Cómo crear un índice de contenidos (Disponible próximamente)
• Cómo usar plugins para linkear documentos (Disponible próximamente)

Tutorial

Aquí te dejo un tutorial en vídeo para que aprender a crear enlaces en tus diseños.

Si no te quieres perder nada puedes suscribirte ahora mismo a mi lista de correo, con ella te enviaré una notificación con todas las novedades que publico.

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