Experiencias colaborativas en el diseño de producto y Figma
Acerca de dónde construimos nuestro espacio creativo y cómo lo convertimos en un ambiente común.

Hoy declaro con orgullo que soy un “Figma lover” y un “figmavangelizador” empedernido. Soy de los que cuando tiene la oportunidad de hablar con algún diseñador que aún no conoce sus ventajas y virtudes, entre otras cosas le pregunto: “amigo, crees en la redención?”.
Gracias a esa declarada pasión y mi nueva cercanía con startups, he podido experimentar cómo a través de la colaboración pueden materializarse proyectos con mayor agilidad. Así es que, continuando con mi misión, compartiré contigo algunas reflexiones y experiencias acerca de lo que es (y no es) el trabajo colaborativo, y de cómo Figma lo hace posible.
1. Trabajar en equipo no es igual a trabajar colaborativamene
Resulta que aunque parezca lo mismo, no es igual. Pensemos en The Beatles: Jhon, Paul, George y Ringo. Todos, músicos reconocidos que han pasado a la historia con la capacidad comprobada de componer excelentes canciones.

Ser una banda como The Beatles, significa trabajar en equipo en muchos contextos y situaciones. Por ejemplo, al salir al escenario para brindar un concierto. Sin embargo, ¿podríamos afirmar que es ahí donde se produce el trabajo de colaboración creativa?.
Algunos músicos encuentran en el estudio de grabación un gran laboratorio de ideas, sin embargo, el escenario de la creatividad suele ser bastante mas íntimo: en un cuarto, sala de ensayo o garaje; cada uno coge su instrumento, “pimponean” ideas, estructuran, improvisan, hasta que obtienen la versión 1.0 de lo que probablemente será su próximo hit.

En el mundo del diseño de productos, donde encontramos las mismas necesidades colaborativas, existen muchas herramientas que facilitan el trabajo en equipo. Sin embargo, ninguna de ellas nos había acercado tanto a tener una experiencia similar a la de una sala de ensayo como Figma.

UX Designers, UI Designers, Developers, Copywriters y demás. Todos juntos en el mismo espacio, trabajando simultáneamente y a tiempo real.
2. La colaboración es un ejercicio de construcción

He encontrado muchas referencias que grafican el proceso de diseño como un cordón que se desenreda. En esa figura, observamos que para llegar a una solución se pasa de la exploración al concepto, hasta que, finalmente, todo converge en un solo camino hacia el resultado final.
Ahora bien, si tratáramos de incorporar el comportamiento del equipo dentro de esta visión, lo más probable es que obtengamos una imagen como esta:

Aquí observamos que fuera de la exploración grupal, se generan micro exploraciones individuales en espacios aislados. Esto no es algo que obstruya el proceso, claro está, pero sí que dificulta la integración de cada una de las partes y componentes cuando se unifican los caminos más adelante.

Trabajar en colaboración constructiva significa que lo que crea uno, es insumo para otro. Agregar una capa nueva o valor adicional a las bases que ya existen. Ahora imaginen que elevamos este concepto a un nivel mucho más alto, donde no hablamos de tareas, sino de proyectos donde el resultante es la base o punto de partida para otro proyecto más grande. No hay nada muy revelador en esto. Quizá la gran pregunta es, ¿cómo se puede construir cuando todos están construyendo al mismo tiempo?
Veamos, en un proyecto tradicional donde se involucra a perfiles de diseño de distinto seniority, es usual encontrar lo siguiente:

En este esquema, el Lead, por su conocimiento y experiencia estaría más enfocado en la parte conceptual. El Senior, adoptaría estas definiciones para aplicarlas en nuevas soluciones. Y, finalmente, el Junior, se encargaría principalmente de lo adaptativo.
Este, a pesar de ser un trabajo en equipo, y a pesar de ser un proceso ordenado y constructivo, puede ser lineal y poco colaborativo.

En este nuevo concepto, vemos como luego de encontrar el equilibrio, el equipo puede avanzar, construir y colaborar al mismo tiempo. No obstante, trabajar de una forma no lineal, donde no se tiene certeza de lo que puede ocurrir adelante, lleva consigo la sombra del reproceso.
Nada es perfecto. Avanzar sin tener una tarea cerrada por completo nos obliga inevitablemente a retroceder de vez en cuando para modificar diversos aspectos de nuestro diseño en aras de la consistencia. En este contexto, nuestro trabajo se hace mucho más complejo, ya que en teoría, no solo deberíamos construir hacia adelante, sino también hacia atrás.

Felizmente, esto que va en contra de todas las leyes conocidas del Universo, puede resolverse de forma eficiente en Figma, a través del diseño sistemático, el uso de estilos, componentes y librerías compartidas.
3. Para colaborar hay que perderle miedo al error.
Ya lo dice Murphy: “cuando algo puede fallar, va a fallar”. Desentendernos de una ley tan universal y recurrente, es ingenuo. Por muy meticulosos que seamos en la planificación o rigurosos con nuestros procesos, algo va a faltar o funcionar indebidamente. Y muy probablemente, en el momento más inoportuno.
Frente a esta realidad, lo inteligente no es construir pensando en lo correcto, sino prepararnos para el error estructurando nuestro diseño para que cuando ocurra, el impacto sea el menor posible. La organización, los estilos y componentes, nuevamente son de gran utilidad. Pero, disponer de un control de versiones que nos permita viajar en el tiempo, no tiene precio.
4. Para colaborar hay que estar donde todos colaboran
Imagina una plataforma flexible a la que puedes acceder desde cualquier lugar, sin importar cuál sea tu sistema operativo, si no dispones de tus archivos, o inclusive, sin importar que tengas el programa instalado. Amigo, veo que ya te estoy convenciendo, lo que estás imaginando es Figma.
En el aspecto colaborativo, imaginemos ahora a nuestro equipo de diseño de producto convertido en uno de fútbol: ellos entrenan, se preparan físicamente, ensayan sus jugadas, se aclimatan; pero resulta que cuando llega el momento del partido oficial, se encuentran posicionados en canchas distintas.

Esta visión surrealista, grafica lo que en la práctica sucede cuando el trabajo en equipo no dispone de las herramientas adecuadas. Lo que debería ser un juego colectivo termina convirtiéndose en un ejercicio de buenas intenciones.
Para jugar como nunca y además ganar, debemos hacer posible que todos vuelvan a jugar en la misma cancha para colaborar con la jugada. Pero, ¿cómo es que esto puede llevarse a la práctica?, y sobre todo, ¿qué tiene que ver Figma?

Hagamos una lista. Si tuviéramos que desarrollar un producto digital, básicamente estaría contemplando lo siguiente:
- La experiencia de usuario
- El concepto visual
- El diseño de la interacción
- Redacción de contenidos
- Implementación de feedback
- Documentación
- Programación
Mucho de esto, como podrás suponer, es llevado a cabo por personas de distintas especialidades. ¿Será posible que todas puedan interactuar en un solo espacio para colaborar creativamente para el mismo producto?
La experiencia de usuario
Una de las tareas que demanda más intercambio por parte del equipo, es la creación de los flujos de interacción y la estructura de pantallas. ¿Qué es lo que le necesitaríamos para que Figma pueda convertirse en una herramienta de utilidad en esta etapa?. Pues, simplemente, nutrirla de una buena librería de elementos.


El concepto visual
Dado todo lo que se ha mencionado anteriormente, lo importante es el proceso constructivo y sistemático. Cosa que podemos hacer posible gracias al uso de estilos, componentes y librerías compartidas.
Mención aparte merece el apartado de plugins, donde siempre encontrarás algo de utilidad que agilice las tareas más repetitivas, o te brinden nuevas posibilidades dentro del programa.

El diseño de la interacción
Obtener una experiencia cercana a lo que nuestro producto debería ser, ya es posible con Figma. En una reciente actualización, nos sorprendieron con el lanzamiento Smart Animate: nuevas opciones de prototipado con las que podemos crear animaciones y transiciones más avanzadas.

Redacción de contenidos
Para un redactor de contenido, editar sus textos directamente sobre los prototipos es lo más cómodo y ventajoso. No obstante, no debemos olvidar que no todas los participantes disponen de los mismos permisos de edición.
Para este último caso ya existe una solución. El plugin Google Sheets Sync se conecta con una hoja de calculo para extraer la data, lo cual posibilita que en la práctica, tanto el equipo de diseño como el de redacción pueden trabajar a la par, a un solo clic de distancia de reflejarlo en el prototipo final.

Implementación de feedback
La retroalimentación es vital en un espacio colaborativo. Además de los comentarios que cualquier usuario puede dejar sobre el prototipo, destaco algunos plugins muy útiles: 1. TODO, para pasar de los simples comentarios a una lista de tareas y 2. Figma Chat, para todas esos comentarios que no cuentan como feedback, sino como consultas que pueden resolverse rápidamente respondiendo un par de mensajes.

Documentación
En Figma podemos crear hojas de estilo y librerías de componentes; pero si lo que necesitamos es algo que nos ayude a documentar algo tan complejo como un Design System, Zeroheight es la solución más acertada. Ambos programas trabajan en conjunto para recolectar automáticamente todos los elementos de nuestro documento para mostrarlos de una forma accesible y profesional.

Programación
Para un desarrollador es importante poder visualizar a las propiedades de cada uno de los elementos del diseño. Muchos suelen recurrir a herramientas como Zeplin o Invision Inspect. Sin embargo, si estos diseños están en Figma, basta con ir a la pestaña de Código para inspeccionar la información necesaria, en el formato que les sea más conveniente.

All you need is Figma
Podemos llegar a la conclusión, entonces, que el trabajo colaborativo exige disponer de una estructura y forma de trabajo que lo estimule, pero también de las herramientas que lo permitan. Un buen resultado requiere del talento y participación de todos los que conforman el equipo.
Finalmente, la última reflexión: Para crear un hit no nos hacen falta más ganas, sino más herramientas como Figma.
