Introducción a FigJam de Figma: primeros pasos

Si estás leyendo esto probablemente ya conozcas de qué va Figma.

Es un software que siempre se ha caracterizado por estar en la nube y promover de forma clara y eficiente el trabajo colaborativo.

Ahora han decidido ir un paso más allá y lanzar FigJam. El objetivo parece estar claro: dejar de ser una sola herramienta y pasar a ser un ecosistema.

En este artículo te cuento las principales características de FigJam… y sé que algunas te sorprenderán. Al final de todo te dejo un vídeo que subí a YouTube 🙂

¡Vamos allá!

Qué es FigJam

Durante este último año seguro que has tenido que trabajar de forma más o menos remota con otros perfiles de diseño y otros equipos dentro de la compañía.

Habrás tenido sesiones en Miro o Mural para hacer retrospectivas de equipo, flujos de usuario, sesiones de ideación conjuntas, moodboards, priorizaciones, etc.

Pues bien, FigJam llega para traerte todo esto y a integrarlo directamente con Figma.

Tal y como lo definen ellos mismos, FigJam es «una pizarra online para que los equipos ideen y hagan brainstorming juntos».

Pero como te puedes imaginar viniendo de Figma, es *mucho* más que esto.

Cómo crear un archivo de FigJam

Ahora cuando quieres crear un archivo nuevo se te desplegará un pequeño menú que te permitirá escoger entre un Design file (los archivos de Figma habituales) y FigJam files.

Cómo se crea un archivo de FigJam en Figma

En las miniaturas de los archivos también han aparecido estos pequeños iconos azules y morados que te permitirán identificar a simple vista qué tipo de archivo es.

Funcionalidades principales de FigJam

A continuación te explico qué funcionalidades tiene. Algunas son las que te puedes esperar, otras probablemente te sorprendan.

Interfaz y manejo de FigJam

La interfaz de FigJam es súper sencilla: tienes las funcionalidades más importantes cerca de la parte inferior de la pantalla, donde son más fácilmente alcanzables, y otras más secundarias arriba a la derecha.

La interfaz de FigJam

El manejo es prácticamente igual que un archivo convencional de Figma:

  • Podrás desplazarte por toda el área disponible apretando el espacio en el teclado o seleccionando la manita que está a la izquierda de la barra de herramientas.
  • Para hacer zoom solo tienes que usar el trackpad o, en el teclado, hacer clic en CMD (o CTRL) y – o +.

En FigJam también puedes añadir comentarios (el icono está arriba a la derecha) y como novedad, chatear con otros miembros del equipo…. solo con el cursor.

Mira, no te miento:

Herramientas básicas

Estas son las tres funcionalidades más esenciales de FigJam:

Rotulador (M)
El rotulador te permite dibujar en el canvas. Puedes cambiar el color de la tinta o el grosor del rotulador. Como detalle, verás que una vez dejas de hacer clic, las curvas se suavizan un poco 🙂

 

Figuras geométricas (O)
Puedes insertar cualquier figura geométrica que necesites: círculos, cuadrados, rombos, triángulos…

Una vez hagas clic en el canvas te permitirá escribir algo dentro, cambiar el tamaño y personalizar el color de fondo y el borde de la figura.

Si mueves el cursor alrededor de ella verás unos símbolos de (+). Esto te permiten crear otra figura geométrica enlazada a esta primera. Una vez creada podrás cambiar la figura si así lo deseas.

 

Post-its (S)
Con los post-its puedes hacer acciones similares: cuando lo insertas te permite cambiar el color de fondo, el tamaño, el tamaño del texto, insertar listas y añadir (u ocultar) tu nombre del post-it.

También tienen el icono de (+) para que puedas enlazarlo con otros ^^

Otras herramientas

Fíjate en los otros cinco iconos que hay en el lado derecho de la barra de herramientas. Te permitirán hacer todavía más magia.

 

Campo de texto (T)
Si lo deseas puedes insertar un simple bloque de texto, sin que dependa de ninguna figura geométrica o post-it.

Puedes personalizar el color, enlazarlo, hacer listas, cambiar la alineación y escoger entre cuatro formatos posibles.

 

Conectores (C)
¿Te acuerdas de las conexiones entre figuras geométricas y post-its que te he contado más arriba? Con esta opción podrás crearlas directamente a mano y personalizarlas para no usar las que crea por defecto si enlazas elementos haciendo clic en el (+).

Te enseño cómo hacerlo:

 

Library (L)
Aquí encontrarás algunos packs de stickers maravillosos predefinidos y, aquí está la magia, cargar los componentes que tengas en tu guía de estilo o sistema de diseño.

Para cargarlos, solo haz clic en el «+» que hay a la derecha del modal y añade el que quieras.

 

Stamps (E)
Estos sellos son reacciones rápidas que puedes necesitar a la hora de hacer una retrospectiva de equipo, decir si te gusta o no algo que se haya escrito en un post-it, indicar con tu avatar que lo has escrito tú, etc.

Evidentemente, también puedes incluir algunos emojis ^^

 

Añadir imagen
El último icono te permite insertar alguna imagen que tengas guardada en el ordenador.

Chat por voz

Ahora mismo, tanto Figma como FigJam incluyen pronto chats de voz. Esto, de nuevo, permite evitar tener que utilizar una herramienta externa como Google Meets, Zoom o Microsoft Teams para poder comentar algo rápido.

Insertar frames de Figma

Más allá de las herramientas y funcionalidades que te he contado hasta ahora, FigJam cuenta con otra gran ventaja respecto otras herramientas como Miro o Mural.

Simplemente con un copiar-pegar podrás llevarte a un archivo de FigJam cualquier frame que tengas en Figma.

Imagínate poder integrar los propios diseño dentro de las discusiones de flujos de usuario, ideación, brainstorming… sin tener que exportarlos a jpg, duplicarlos y, en resumen, sin perder el tiempo.

Plantillas en Community

Si no quieres empezar desde cero, en Figma Community ya tienes varias plantillas que han subido otr@s diseñador@s.

Te enlazo por aquí las que me han parecido más interesantes:

Apuntes finales

Como te decía al inicio, parece que este es un movimiento para integrar al máximo todas las partes del proceso de diseño dentro de una misma herramienta.

Si te va mejor, te dejo aquí el vídeo que subí a YouTube sobre FigJam 🙂

Con Figma y FigJam no necesitarás ir saltando de una herramienta a otra, optimizando tu tiempo y, probablemente, también los costes.

Y dime… ¿qué te parece FigJam? ¿Lo utilizarás?