Adobe XD, Figma y otras aplicaciones como opciones a Sketch para usuarios de Windows

Vamos a centrarnos en estas últimas dos para el análisis de sus principales características y haremos un recorrido por otras opciones que enriquecen el abanico de este nicho.

Un poco de historia

Antes cuando debíamos diseñar un sitio web pero estas aplicaciones aun no existían recurríamos a lo que los diseñadores estábamos acostumbrados de usar: Photoshop, Fireworks, Illustrator, CorelDraw, etc. De estas, la mejor orientada al diseño de pantallas fue sin duda Fireworks, una herramienta super versátil y con funciones especialmente pensadas para tal fin. Por eso, cuando adobe decide suspender el desarrollo de Fireworks muchos nos quedamos rengos porque no había una alternativa en Windows. Personalmente continué usándola hasta que en 2016 apareció Adobe XD y migré hacia la nueva propuesta de Adobe.

Desde ese momento (y desde antes) han aparecido un sinfín de nuevas aplicaciones, cada una de ellas con algún aspecto atractivo que resuelve mejor alguna parte del flujo del trabajo, pero sólo algunas han logrado diferenciarse del resto, las principales son Adobe XD y Figma, aunque también encontramos como alternativas sólidas: Invision Studio y Gravit.

XD tiene versiones para Mac y Windows. Figma es compatible con Mac, Windows, Linux y Chrome OS, prácticamente cualquier sistema operativo en el que se pueda instalar y ejecutar un navegador moderno.

Adobe XD

De Adobe todos esperábamos una reacción más rápida a este nuevo escenario, pero la verdad es que han tardado bastante en crear una herramienta con las funcionalidades que se requieren. Creo que XD de a poco va estando a la altura de lo que se espera de una aplicación de esta firma. Al principio eran ridículas las falencias en funcionalidades básicas y, aunque todavía le falta bastante, ya se puede lograr una buena productividad. Se agregan nuevas funciones en cada actualización mensual, y algunas de ellas bastante potentes.

Figma

Figma es una aplicación web por lo que puede ser ejecutada en un navegador en casi cualquier sistema operativo. Este es el enfoque opuesta a Sketch que es nativa de Mac. Lo mejor de todo es que no resigna fluidez a cambio de versatilidad y funciona muy suave. Las actualizaciones son constantes y posee una enorme comunidad en franco crecimiento.

Otras opciones

InVision Studio

Comenzó siendo solo una plataforma para compartir prototipos de diseño pero de a poco ha agregado muchas funcionalidades. Con Invision Studio dieron un gran salto y hoy es una aplicación que nos puede acompañar en todo el proceso de diseño de UI: desde los primeros bocetos hasta el prototipado y las animaciones.

Gravit

Al igual que Invision Studio, Gravit es de esas aplicaciones que si bien cumplen con su tarea, están un poco más relegadas en sus capacidades. Y si bien podemos trabajar con ellas de forma segura y profesional, a mi parecer se quedan un poco cortas en productividad. De todos modos, son propuestas que hay que tener en cuenta y estar constantemente mirando como van porque tienen mucho potencial.

Comparaciones

Trabajo con Adobe XD desde que apareció y fui siguiendo su evolución hasta la actualidad. A Figma lo conozco también desde hace varios años y si bien lo probé bastante, nunca lo use en mi flujo de trabajo diario.

Interfaz de usuario

Todas estas aplicaciones de este tipo comparten el mismo concepto en este apartado: interfaces visualmente limpias y de aspecto simple. Por eso todos, cuando comenzamos con ellas, teníamos la sensación de que nos faltarían funciones, pero luego nos dimos cuenta que justamente su potencia se basa en el ahorro de recursos y la selección correcta de sus características. Con ninguna de ellas te van a faltar herramientas.

Todas coinciden en un panel de capaz a la izquierda, un espacio central con las mesas de trabajo y en el extremo derecho de la pantalla encontramos el panel de propiedades. El panel de herramientas puede estar arriba o a la izquierda.

Mesas de trabajo y páginas

Figma permite trabajar con páginas y mesas de trabajo. Cada página puede contener varias mesas de trabajo y estas pueden ser anidadas. De hecho, desde Figma promueven el usa de mesas de trabajo anidadas.

La mesa de trabajo “Home” anida a Header, Banner, Contant, Options, Footer

XD es más limitado porque solo permite generar mesas de trabajo. En caso de proyectos muy grandes esto puede ser una limitación y habrá que encontrar artilugios para sortear este faltante. Una característica particular de Adobe XD es que podemos ampliar hacia abajo la mesa de trabajo sin perder la referencia del alto de pantalla que se muestra con na línea de puntos.

Altura de ventana definida en 640 px (Móvil Android) y mesa de trabajo de 874 px.

En ambos casos las opciones predefinidas de tamaños de mesas de trabajo son enormes y cubren todas las posibilidades. Además, podemos crearlas de forma personalizada y darle el formato que queramos.

Grillas de diseño

Ambas aplicaciones permiten superponer cuadriculas y grillas de columnas y configurar grillas diferentes para cada mesa de trabajo. Adobe XD permite intercambiar entre cuadricula o columnas, pero no ver ambas a la vez.

En Figma esto es mucho más potente por varias razones. Primero porque, además de las mencionadas, ofrece la posibilidad de configurar columnas horizontales, muy útiles para gestionar el ritmo vertical de los diseños. Además, permite colocar a la misma vez todos los tipo y configuraciones de grillas que queramos. Y si a esto le sumamos que podemos anidar mesas de trabajo, nos encontramos con un abanico de opciones que seguro complacen todas las necesidades. Imaginemos que cada componente del diseño podría tener su propia grilla.

Comportamiento de Redimensionado (Constraints)

Una de las funcionalidades que proporciona mayor productividad es la posibilidad de definir el comportamiento de los elementos cuando los redimensionamos (Constraints). Es un estándar de todas las aplicaciones de diseño de UI.

Las interfases son muy similares.

Adobe XD lo hace correctamente y su interfase es simple e intuitiva y funciona como se espera que lo haga. Para la mayoría de los casos podremos lograr un buen control.

Figma, como en la mayoría de los apartados, va más allá. La diferencia principal radica en que los constraints funcionan solo dentro de mesas de trabajo, no en grupos (como en XD). Esto lo hace menos intuitiva y confunde un poco, pero cuando entendemos la lógica, se abren muchísimas más opciones. Otra ventaja de Figma es que cuando se utilizan cuadrículas de diseño, se aplican restricciones a la columna o celda en la que se encuentra el elemento.

Las restricciones en Figma funcionan con la grilla del marco.

Herramientas de dibujo

Como ya comenté, estas aplicaciones nos proporcionan las herramientas elementales, no vamos a encontrar funciones especializadas como en Adobe Illustrator, CorelDraw o Affinity Designer. Para la mayoría de los casos de diseño UI con esto bastará: rectángulo, elipse, polígono, forma libre y línea. Más las típicas funciones para combinar formas (unir, sustraer, intersección, etc).

Ilustraciones realizadas por Arjun Makwana (https://dribbble.com/shots/7014038-Figma-Illustration) y Matej Novak (https://www.youtube.com/watch?v=wl54rpeHhOo).

Una vez que haya agregado elementos a su diseño, las tres aplicaciones le permiten agruparlos, organizarlos uno encima del otro, alinear y distribuir los objetos seleccionados de manera uniforme, y así sucesivamente.

Se pueden agrupar, ordenar, alinear y distribuir elementos, como en cualquier aplicación de diseño. Pero también tenemos otras herramientas más potentes. En Adobe XD contamos con la función de repetir cuadrícula (https://theblog.adobe.com/exploring-repeat-grid-in-adobe-xd/), que permite crear un elemento y repetirlo en una lista o cuadrícula, cada uno con propiedades similares, pero contenido único.

En Figma casi todo es una lista y los elementos se puede intercambiar, esto combinado con algo que veremos ahora que son los componentes de los que podemos crear instancias y editar su contenido, obtenemos una herramienta nuevamente un poco menos intuitiva pero extremadamente más potente.

Con marcos anidados podemos intercambiar los elementos, redimensionarlo y espaciarlos.

Los componentes

Las dos aplicaciones admiten componentes, elementos que comparten las mismas propiedades y se pueden actualizar de una vez. Sin embargo, la forma en que los implementan cambia drásticamente de una aplicación a otra.

En Figma, con la creación de un componente se genera un “Componente maestro”. Cuando es copiado en otro lugar del documento, este mantiene las propiedades de su maestro. Además, las instancias pueden ser editadas (con restricciones lógicas) para cambiarle ciertas propiedades, por ejemplo, texto, imágenes, colores, etc. Cuando se edita una propiedad de la instancia, esos cambios no impactan en el maestro y se desactiva la herencia de esa propiedad en particular.

Las instancias pueden ser parte de otro maestro. Esto genera herencias en cascada y permite diseñar componentes de manera molecular. La combinación de propiedades editables y restricciones permiten un control total y lógico de estas estructuras.

Comportamiento de herencias en componentes en Figma.

En Adobe XD es similar, la gran diferencia es que (por ahora) no permite las herencias en cascada. O sea, la herencia es de un solo nivel, lo que no permite generar una estructura molecular completa y potente.

Prototipos, interacciones y animaciones.

Ambas aplicaciones permiten vincular pantallas para crear prototipos y compartirlos.

Figma se limita principalmente a vincular elementos individuales a otras mesas de trabajo con un clic, toque o desplazamiento, con una selección limitada de de efectos de transición. Además permite la superposición para generar prototipos de menus, cuadros de diálogo, etc.

Adobe XD hace todo lo que mencioné anteriormente, pero incluye dos características más potentes:

Animación automática

Funciona moviendo automáticamente elementos con el mismo nombre al pasar de una pantalla a otra. Esto puede sonar simple, pero el tipo de efectos que puede generar son bastante espectaculares.

Prototipos de voz

XD permite activar interacciones mediante comandos de voz e incluso incluir respuestas de voz a los activadores. Esta es una gran adición que facilita la creación de prototipos de interfaces de usuario conversacionales en XD, algo que no es posible en Figma o cualquiera de las principales aplicaciones de creación de prototipos.

Una aplicación a tener en cuenta para la animación es InVision Studio. Tiene un flujo de trabajo de animación basado en la línea de tiempo, algo de lo que ninguna de las otras aplicaciones en esta lista puede presumir.

Compartir

Adobe XD es una aplicación de escritorio tradicional, creada para que los diseñadores trabajen de forma aislada y compartan sus diseños cuando estén listos. Figma, por otro lado, fue creado para la colaboración en mente.

En Figma, varios usuarios pueden trabajar en el mismo documento al mismo tiempo. Puedes ver cursores de colores moviéndose alrededor del diseño cuando otros están viendo o editando el diseño en el que estás. Esto puede llevar un tiempo acostumbrarse, pero en situaciones en las que tenemos varios diseñadores trabajando en un proyecto, esto puede ser una bendición.

¿Cuál de los dos es mejor?

Respuesta obvia: depende.

Para diseñadores de interfaces de usuario no hay posibilidad de equivocarse con ninguna de las dos aplicaciones. O las otras que mencioné. Todas harán el trabajo, pero con diferentes niveles de productividad.

Si el diseño de movimiento es parte de los requisitos, Adobe XD es la mejor opción. Para la animación, InVision Studio también se puede considerar como una alternativa.

Pero si las maquetas de diseño de IU son el requisito principal, Figma hace el mejor trabajo para compartir y colaborar. Tiene un nivel gratuito muy generoso, está disponible en cualquier plataforma que pueda ejecutar un navegador moderno, y está muy activamente en desarrollo, con nuevas características y actualizaciones que llegan más rápido de lo que puedo seguir aprendiéndolos a todos.