En este artículo intentamos aportar algo de cordura al tema del uso de herramientas en el diseño visual: Cuán importantes son tanto a la hora de plantear un flujo de trabajo como de definirnos como profesionales del medio. Y si, hablamos de Sketch y Figma.
¿Me defino por lo que uso o por lo que hago?
Estoy convencido de que en el mundo del diseño visual el manejo de determinadas herramientas no nos convierte en mejores profesionales. Tengo ejemplos muy cercanos de diseñadores de prestigio que trabajan con versiones de Photoshop que no llegan a los 2 dígitos.
También me gusta pensar que no conocer un determinado software no supone ninguna traba a la hora de acceder a un puesto de trabajo.
Sin embargo, le damos mucha (¿demasiada?) importancia a las herramientas con las que trabajamos ya que, con el paso del tiempo, se han convertido en moneda de cambio a la hora de buscar un puesto de trabajo. No hay más que ver determinadas ofertas en LinkedIn con requisitos de software similares a recetas de cocina ancestrales.
Por no hablar del factor cuantitativo del software en nuestros perfiles laborales, llegando a ser la norma el ver listados de herramientas puntuadas en percentiles a modo de hoja de personaje de juego de rol.
Y todo esto dejando atrás el factor postureo que también existe. Pero eso lo discutimos mejor tomando unas cañas.
En cualquier caso, en mi ingenua cabeza todavía persiste la idea de que las herramientas, el software con el que trabajo día a día, es simplemente eso, una herramienta.
Útiles con los que damos forma al trabajo que realizamos como diseñadores de interfaz, responsables de producto, etc.
Vale, sí, pero ¿qué herramienta es mejor?
La respuesta rápida y sencilla sería la que solucione mejor tus necesidades. Pero teniendo en cuenta que sólo en la faceta de diseño visual tenemos tantísimas disciplinas que cubrir, no nos queda otra que analizar un poco el ecosistema actual.
Por un lado tenemos aplicaciones exclusivas de prototipado, de diseño visual, de animación, de métricas para test de usuario, de recursos entregables a desarrollo, de control de versiones, de documentación...
Por otro lado ya tenemos aplicaciones no exclusivas que unifican características de varios ámbitos, permitiendo diseñar, prototipar y entregar bajo un mismo techo.
Y por mucho que pensemos que las herramientas específicas funcionan mejor que las multiuso, lo cierto es que la tendencia es intentar abarcar y hacer bien varias (muchas) de las múltiples facetas que hemos comentado dentro del diseño de producto.
Que sí, que sí… ¡¡¡pero dime si uso Sketch o uso Figma!!!
Venga, va… dejemos ya tanto preámbulo y adentrémonos en el motivo del artículo por fin.
Si existe un estándar hoy en día en herramientas de diseño visual, y repito: diseño visual, estaríamos hablando de Figma y Sketch. Y la eterna batalla entre cuál es mejor, cuál es más potente, si debo aprender una u otra, etc.
Como cada caso es diferente, voy a contar el mío personal y laboral explicando las decisiones que hemos tomado en el camino.
Érase una vez...
Hace 5 años empecé a trabajar a jornada completa en Plex, donde el equipo de diseño empleaba Photoshop.
Yo llegué como un elefante en una cacharrería cambiando herramientas y flujos de trabajo, empezando a trabajar con Sketch, Invision para comentarios de diseño a nivel interno e integrando Zeplin a la hora de entregar visuales al equipo de desarrollo.
Al poco tiempo vimos que Invision generaba más problemas que soluciones ya que siendo nosotros una empresa de producto, con una carga tan importante de trabajo en desarrollo, lease un montón de ingenieros empleando Github constantemente, tener los comentarios sobre visuales en una herramienta y su implementación en otra era muy cansino y provocaba más de un despiste a la hora de saber qué versión era la última.
En conclusión, la integración con desarrollo se realizaba subiendo los archivos a Zeplin y enlazando dichos archivos a los issues correspondientes en Github.
¡Todo el mundo feliz!
En el caso de diseño visual, ya que Sketch no dispone de control de versiones y herramientas como Abstract no existían todavía (o estaban empezando) nos vimos obligados a emplear Github a modo de backup online compartido, especialmente a la hora de trabajar con bibliotecas de componentes.
Así que nuestra relación con Github desde un punto de vista de diseño visual era bastante importante.
Retomando el relato, estábamos trabajando con Sketch, manteniendo un control de versiones via Github y entregando visuales a desarrollo mediante Zeplin.
Llegamos incluso a desarrollar un plugin de Sketch que alimentaba nuestros componentes con elementos visuales y texto de un servidor especial donde tenemos material seleccionado por sus méritos visuales. De tal manera que no solamente no perdiéramos tiempo metiendo contenido real en nuestros diseños sino que además la gente de márketing podía preparar todo el material visual necesario teniendo la certeza de que iba a ser visualmente atractivo.
Trabajar con Sketch durante ese tiempo fue muy bonito aunque, como en todas las relaciones, también tuvimos nuestros problemas.
El hecho de no poder abrir un archivo guardado con una versión reciente nos obligaba a actualizar el software toda la compañía a la vez para evitar disgustos innecesarios.
Y si quisiéramos hacer daño, hablaríamos de cómo se rompía nuestro plugin con cada nueva actualización de Sketch, llegando al punto de que nadie lo actualizaba en la empresa hasta que hubiéramos comprobado que todo funcionaba correctamente.
Una aplicación para gobernarlas a todas
Hace unos meses, empezamos a valorar Figma como alternativa para ver si el flujo actual que teníamos implementado se podría mejorar.
Tengo que reconocer que mi reacción inicial fue reticente. Ya teníamos todo un flujo de trabajo basado en Sketch, con plugins a medida, y un montón de material visual generado, incluyendo nuestras bibliotecas de componentes.
Pero el principal problema es que teníamos gente en Producto que empleaba PC y le resultaba imposible editar los archivos, y sólo podían visualizarlos mediante Zeplin. Seguíamos teniendo el problema de las versiones actualizadas de componentes, ya que no se actualizaban de manera automática por su ubicación en Github. Y Sketch Cloud estaba todavía dando sus primeros pasos.
Así que decidimos probar una semana sólo con Figma, realizando un ejercicio de abstracción bastante interesante pensando en cómo sería el flujo de trabajo final, una vez que tuviéramos todos nuestros recursos disponibles también en Figma.
Los fundamentos de uso de ambas herramientas son tan parecidos que apenas tienes problemas de atajos de teclado o interfaz cuando cambias de uno a otro. Ambas aplicaciones han tomado prestadas características una de la otra y francamente se agradece. Lo mismo que emplear un iPhone y un Android es cada vez más parecido, Sketch y Figma son casi idénticas en su uso.
Sin embargo, Figma está mucho más orientado a trabajo en equipo, lo que permite que varias personas trabajen y comenten sobre el mismo archivo.
Esto nos permite hacer una copia rápida sobre un lienzo, aplicar cambios rápidos y comentarlos. De esa manera podemos hacernos una idea in situ de lo que nos están proponiendo. Y no sólo a nivel visual, sino que cualquier otra persona pueda aportar. Me refiero a gente de márketing, producto o desarrollo incluso.
Antes de tener los diseños finales, se comparten los archivos de Figma con gente de desarrollo para que nos faciliten un feedback temprano y ver las posibles dificultades.
Este acceso permite a desarrollo coger cualquier elemento visual que pueda necesitar incluso si el diseño no está finalizado del todo. No es necesario subir la versión “final” a Zeplin para obtener los assets ya que teniendo acceso al archivo, pueden cogerlos cuando los necesiten.
Además, Figma integra un control de versiones, con lo que puedes modificar los archivos que quieras con la tranquilidad de poder volver a una versión previa en cualquier momento. Esto permite hacer crecer las bibliotecas de componentes de una manera mucho más dinámica, ya que somos menos puntillosos a la hora de validar componentes teniendo esa red de seguridad que proporciona el control de versiones.
Otro factor muy interesante es la escalabilidad de Figma a la hora de crear componentes. Es muy versátil y flexible, permitiendo crear y reutilizar componentes de una manera más dinámica.
Por resumir un poco e ir acabando, en mi opinión lo que nos hace decantarnos por el trabajo con Figma son las siguientes características:
- Control de versiones - Especialmente importante en las bibliotecas de componentes.
- Acceso desde navegador - Toda la empresa puede acceder desde cualquier sitio y ver lo que se está haciendo en UX/Producto, obteniendo una visibilidad enorme.
- Diseño colaborativo - Los cambios y ajustes se hacen a la vez que se están discutiendo, con lo que las reuniones de diseño son especialmente productivas.
El final del camino
Como hemos comentado al principio, la mejor herramienta es la que te resulta más práctica en tu trabajo. Y si ves que las herramientas que empleas no terminan de hacer lo que quieres de la manera que buscas, entonces explora otras alternativas para ver cómo puedes mejorar tu flujo de trabajo.
Ten en cuenta que lo mismo que hace unos años cambiamos de Photoshop a Sketch, y luego a Figma, dentro de un tiempo estaremos hablando de lo bien que funciona Dee-Saint-Ool™!
Espero que el viaje haya sido de ayuda, pero en cualquier caso, no dudes en preguntar o comentar lo que creas oportuno.
Muchas gracias.