Por qué diseñar contenido en Figma es mucho más que cool
Reflexiones de un UX Designer y una UX Writer amantes del trabajo colaborativo.
Contenido: David Motoa Moreno y Yamile Sánchez
Ilustraciones y ejemplos: David Motoa Moreno
¿Por qué amamos tanto a Figma?
Figma es una herramienta de diseño revolucionaria, porque vino a demostrar que el trabajo en UX/UI es 100% colaborativo (o no es). Figma es todo en un mismo lugar, dialogando, creando, iterando y evolucionando. Es una mesa de trabajo digital y en tiempo real. Figma sabe que cuando hablamos de UX no se trata solo de diseñadores, por eso conquistó mi corazón.
Con mi generoso y talentoso colega y amigo David Motoa Moreno (A.K.A Dave) nos conocimos trabajando en Despegar y, además de reírnos mucho, conversábamos sobre cómo podríamos idear más en conjunto y lo explorábamos creando wireframes, pensando en arquitectura de información o ideas de contenido: siempre en dupla, siempre aprendiendo, siempre compartiendo.
Un día del 2019 nos enteramos que existía una herramienta llamada Figma que parecía ser revolucionaria. De curiosidad, empezamos a usarla informalmente en una iniciativa que estábamos trabajando y descubrimos que calmó muchas de nuestras necesidades.
Otro día del 2021, cuando nos volvimos a reencontrar como dupla en Mercado Libre, Figma vino para quedarse, la transición ya no tenía vuelta atrás (por fin). Otra vez, envueltos en ganas y curiosidad empezamos a trabajar sobre Figma nuestros proyectos. David tuvo una idea maravillosa y nos dijo a Karen y a mí (las 2 UX Writers que estábamos en su equipo): “¿Quieren que les dé unas clases así las ayudo con Figma?”, por supuesto que la respuesta fue un “RE SÍ”. Entonces, tuvimos 3 encuentros super útiles donde aprendimos lo que nos hacía falta para animarnos a usarla todos los días sin sentir que estábamos rompiendo todo.
Después de esta experiencia y de toda la revolución en los procesos de trabajo, invité a David a reflexionar conmigo y decidimos compartirlo en este artículo que escribimos en conjunto.
¿Por qué todas las especialidades UX deberíamos trabajar juntas en Figma?
Y todas somos: UX Research, UX Design y UX Writing (y las que vendrán, ahre).
1) Co-creación pura: el cambio que nos propone Figma y la colaboración en tiempo real, es la propuesta a co-crear en un muy puro sentido de la palabra. Las ventajas para el diseño de interfaces son múltiples y tangibles:
- Podemos pasar a crear wireframes más entendibles y con menos lorem ipsum.
- Podemos co-diseñar la información con mejor criterio al tener más contexto: dejamos de copiar y pegar textos de un Word para diseñarlos directamente donde queremos que existan, y tener en cuenta sus limitaciones como el tamaño del viewport o la cantidad de caracteres.
- Podemos diseñar la información teniendo en cuenta mejores jerarquías de texto aportando a la escaneabilidad de la pantalla.
2) Inclusión y accesibilidad como profesionales: diseñamos experiencias en tecnología, entonces Figma nos acerca al Design System lo cual es clave para crear a partir de un lenguaje compartido e idear en contexto: entender componentes, patrones, comportamientos, posibilidades y aplicarlas no es lo mismo que imaginarlas.
3) Trabajo en equipo, calidad y escalabilidad: reduce tiempos porque se itera e impacta en tiempo real, acerca equipos al crear en el mismo espacio y evita errores de contenido, ya que si somos owners de la pieza de principio a fin, evitamos los typos o versiones obsoletas antes de hacer hand off. (Perdón el abuso de spanglish en todo el artículo, pero es la jerga, get used to it).
4) Facilitación de los procesos de trabajo: incorporar Figma como herramienta colaborativa para la creación de contenidos puede mejorar y escalar nuestra forma de trabajar (WoW). Explorar e iterar procesos de trabajo por fuera de un G-doc, por ejemplo, nos puede evitar tener muchos documentos diferentes y aislados por disciplina, y aporta en la coherencia y diálogo no solo entre UX sino también con otros stakeholders como Desarrollo y Producto, entre otros.
5) Aprendizaje continuo y el desafío motivador constante de incorporar nuevas habilidades: probar e idear en nuevas herramientas nos ayuda a estar en evolución e innovación constante con el objetivo de aprender técnicamente, mejorar la calidad de lo que hacemos y facilitar cómo lo hacemos. Además, la cualidad colaborativa que tiene hacer UX, nos obliga a “challengear” nuestros roles y workflows, en palabras de Dave: “el punto es que a los designers nos pone en una situación “incómoda” (en el buen sentido) donde tenemos que aprender a co-crear directo en el mismo software donde hacemos altas de diseño, lo cual es un cambio de mindset”. Sabiendo que cada vez somos, seremos y necesitamos más UXers, ¿por qué no la hacemos más fácil para quienes están por venir?
¿Cómo dar tus primeros pasos en Figma como UX Writer? Consejos y tips
- Se mira y se toca: animarse a probar
Todo en la vida es prueba y error. La ventaja de Figma, a diferencia de la vida muchas veces, es que es sumamente intuitiva y no hay nada que un ctrl+z no pueda solucionar. Si alguna vez usaste alguna herramienta de edición, tocando vas a ir entendiendo, al menos esa es nuestra forma de aprender: haciendo.
El pro tip que aplicamos y funciona es copiar una página ya existente, con piezas, flujos, o lo que necesites trabajar, y explorar versiones de contenido. Esa página será tu espacio de ideación y allí tendrás libertad de probar y, además, te quedará como borrador, registro de exploraciones, antecedentes, bajada de racionales, acuerdos y decisiones.
2. Facilitaciones para entender la herramienta
Con sus clases, Dave nos ayudó a entender cómo aprovechar los assets y styles reutilizables de nuestro Design System. Pero lo más valioso que nos llevamos fue aprender a darle forma y sentido a cada parte que compone Figma y entenderlas para luego poder aprovecharlas. Aquí va un resumen básico para que te animes a usarlo:
- Workspace (espacio de trabajo): conocerlo te ayudará a saber ubicarte en el espacio, entender qué podés esperar del panel de capas/assets, de las tools, del panel de propiedades y propiamente del canvas (lienzo). Sabiendo diferenciar para qué sirve cada conjunto de elementos de la interfaz, podemos aprovechar lo que nos es útil para facilitar nuestro trabajo diario.
- Shortcuts (atajos): luego de ubicarnos en el espacio, lo siguiente puede ser aprender atajos para ahorrar mucho (mucho) tiempo. Cuando trabajás con diseño y/o contenido varias horas al día, apretar solo la tecla [T] para empezar a bajar todas las ideas hace mucho la diferencia a estar yendo y viniendo de cliquear la tool de texto.
- Diferencias entre grupos: Figma tiene varios “grupos” de elementos que parecen similares en principio, pero sus lógicas son distintas. No se diferencian a simple vista, pero hacerlo ayuda a entender la naturaleza de lo que tenemos enfrente. Podés tener un group, un frame, un elemento hecho con autolayout y una instance de un component completamente iguales en tu canvas sin darte cuenta.
Un group son solo elementos agrupados (guiño guiño a shortcuts) y pueden ser de cualquier clase. Un frame es un marco de trabajo, algo muy usado para dibujar las pantallas (360px, 720px, 1280px), generalmente todo en su interior queda “enmascarado” y cuando está dentro de otro frame se comporta similar a un group. Un elemento con autolayout es un frame hecho con un feature de Figma del mismo nombre, que tiene espaciados dinámicos (es casi magia negra) y que crece vertical u horizontalmente mediante se vayan agregando elementos o texto en su interior. Y los components…continuará (en el siguiente punto :P).
Un pro tip: si no se diferencian bien estos “conjuntos”, ver el ícono con el que aparecen en el panel de layers puede ayudar a distinguirlos, cada uno tiene uno diferente.
- Components: así como un style, un component es un elemento reutilizable, cuyo original puede estar en tu documento o en otro (como una library) y cuyas copias o instances, hacen que diseñemos interfaces más rápidamente y sin reinventar la rueda. Imaginemos un tooltip: ¿Cuántas veces lo usamos, ¿deberíamos dibujarlo cada vez que lo usamos? Para eso y todo lo demás, existen los components :D.
Además, uno de los grandes aciertos de Figma, fue haber introducido variables fáciles de usar en cada component, ya que cuando existen muchas opciones, distinguir estas variantes y sacarles provecho es pasar de caminar a correr, literal.
P/D: abrazo de oso a todos los equipos de Design Systems, por su trabajo silencioso pero vital ❤.
- Text styles: actualmente trabajar con un Design System o algún UI kit (archivo tipo librería de assets y estilos) es cada vez más común, así que es normal que tengamos styles de texto, que son como components pero de texto (magia negra x2). Es decir, puedo escribir un texto, ir a las propiedades y agregarle un text style definido por el Design System con el que trabaje y asegurar consistencia en cuanto a tamaños de texto, interlineados, interletrados y otras propiedades, pero manteniendo algunas de ellas editables, como la alineación o el color. Parece poco, pero así evitamos estar manipulando propiedades de texto y enfocarnos en el contenido.
3. Salir de la comodidad y explorar otras formas
Hay opciones de herramientas y plugins que podemos investigar para optimizar y complementar procesos de diseño y contenido. Así salimos un poco del Excel y del Word y nos acercamos a opciones que faciliten cómo hacemos nuestro trabajo. Algunos ejemplos para investigar y explorar (en eso estamos aún): Diitowords, Lokalise, Frontitude, FigJam, Stark, entre otros.
Reflexión final y take away
En realidad, no solo se trata del diseño de interfaces, el desafío real está en ir más profundo y utilizar Figma como un catalizador para las etapas de empatizar, definir, e idear del Design Thinking, todo de forma colaborativa, por ejemplo: analizar información, hacer workshops y, una de las favoritas, diseñar User Flows (también sirve para muchos otros modelos de información).
Entonces, el enfoque de acá en adelante, cambia hacia un paradigma donde los equipos colaboramos y usamos las herramientas no solo para dibujar pantallas en alta, sino como especie de tableros en blanco para entender mejor los problemas de las personas usuarias, cuestionar y decidir a más alto nivel para poder llegar a mejores acuerdos. ¿Por qué? Porque UX nunca se ha tratado solo de dibujar pantallas.
Idea para llevarte en el bolsillo: pedí ayuda a tu colega de diseño para evitar el miedo al error y pedí ayuda a tu colega de contenido para evitar el lorem ipsum.
Dave nos ofreció ayuda de forma desinteresada y con el objetivo de ayudar y facilitar no solo nuestro trabajo sino también el de él. Lo que me parece genial es que, como buen UXer, armó una charla basada en nuestras necesidades como usuarias. Primero hizo su research, nos preguntó si teníamos esa necesidad. Segundo hizo foco en dónde estaba el problema y cuál era la oportunidad para que las clases se ajusten a su target:
Con Karen coincidimos en que la problemática que nos frenaba a hacer más en Figma era “el miedo a romper todo”, y como oportunidad ambas veíamos las ventajas que tiene Figma para nuestro proceso diario. El éxito de tener estos encuentros fue que perdimos ese miedo y hoy nos animamos a mucho más en Figma. Basándonos en las respuestas al “research” y en la percepción que tenemos hoy luego de 3 clases y mucha (mucha) más práctica usando la herramienta, con Karen sentimos que: pasamos de sentirnos principiantes o limitadas a usuarias activas o intermedias; de solo editar o ajustar texto, a probar y crear componentes; y de no saber todo lo que podíamos hacer en Figma a encontrar la utilidad y animarnos a tocar mucho más que solo texto.
Como contrapropuesta, podemos ofrecer a colegas de diseño charlas sobre UX Writing o tips de escritura digital para que exploren en sus diseños, evitemos el lorem ipsum y sigamos co-creando y aprendiendo.
Ahora hablamos de Figma, pero esta dinámica se puede trasladar a cualquier herramienta, metodología o necesidad de mejorar el trabajo en equipo o aprender algo nuevo. Y vos, ¿te animás a implementar esta ayuda colaborativa en tu lugar de trabajo?
¡Gracias por leernos! Nos encantaría extender la reflexión, el diálogo y seguir aprendiendo así que no duden en escribirnos para complementar (o cuestionar) lo que hoy compartimos en este artículo.
Con ❤️y 🧠, Dave y Yam.
Bonus Track: sugerencias de lecturas y cursos relacionados
