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.

César Sáenz
Nov 4 · 8 min read

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.

The Beatles, destaca por sus individualidades, pero sobre todo, por su capacidad de trabajo conjunto.

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.

Para la mayoría de bandas, la colaboración creativa se da en espacios como este.

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.

Para el equipo de diseño de hoy, esto es lo más parecido a una sala de ensayo.

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

El caos que antecede a la calma

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:

El enredo siempre puede estar más enredado.

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.

Así es como me imagino que se construyeron las Pirámides de Egipto.

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:

Un ejemplo de colaboración lineal: cuando termina uno, empieza el otro

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.

Aunque parezca lo mismo, no es igual: acá todo avanza y todo fluye.

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.

Una actualización se enriquece con nuevos elementos y mejora los ya existentes.

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.

Cuando la frase “la pelota está en tu cancha” es casi literal.

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?

Cuando nos acordamos que jugamos el mismo partido y debemos disparar hacia el mismo arco.

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?

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.

Platforma Flowcharts nos facilita la elaboración de flujos.
Method Wireframe Kit nos proporciona una librería completa para la elaboración de wireframes.

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.

Usando los plugins adecuados aceleramos nuestro proceso de diseño.

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.

Con las herramientas de prototipado podemos acercarnos mas al producto final.

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.

Por un lado la data, y por el otro, lo visual. La actualización de contenidos se realiza con un solo clic.

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.

Diversas formas de comunicación para el feedback: comentarios, lista de tareas y mensajería.

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.

Figma se integra con plataformas como Zeroheight para hacer más simple lo complejo.

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.

Un programador puede acceder fácilmente a las propiedades de cada elemento.

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.

César Sáenz

Written by

Soy Diseñador. Resuelvo problemas... o al menos lo intento.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade