Existen muchas herramientas dedicadas al diseño web y al prototipado. Hoy vamos a hablar de tres de las más utilizadas: Sketch, Figma y Adobe XD. Como suele ocurrir en casi todas las comparativas, independientemente del tema que sean, cada opción cuenta con sus ventajas e inconvenientes. Por ello, este artículo no trata de elegir la “mejor” y la “peor”. En cambio, vamos a explicar y comparar determinados factores y a aportar nuestra visión, ayudando a cada uno a entender qué aspectos considerar y cómo saber cuál se adapta mejor a sus necesidades.
Durante bastante tiempo, se recurría a herramientas como Illustrator y Photoshop para crear prototipos y diseños web, lo cual no era muy favorable en términos de experiencia de usuario e interacción. Esto cambió con la llegada de aplicaciones específicas para diseño web, como ocurrió con Sketch en 2010. Su potencial era mucho mayor y se simplificaba el
trabajo para los profesionales, con lo que abarcaba casi toda la cuota de mercado y se empezó a posicionar como “mejor programa de diseño”. Esto fue una revolución en el panorama de diseño web, pero no ha sido la única. La llegada de Figma no fue menos relevante: introdujo la parte colaborativa, que modificó la forma de trabajar y que ha sido especialmente valorada durante estos dos últimos años, con motivo del teletrabajo. A estas dos sumamos la llegada de Adobe XD.
Características más relevantes: comparativa de Sketch, Figma y Adobe XD
1. Compatibilidad
Comenzamos con esta característica, porque puede ya descartar opciones para muchos usuarios: Sketch solo está disponible para Mac (OS X). Con esto, todos los usuarios de otros sistemas operativos no podrán utilizar esta aplicación y reducen sus opciones a las dos siguientes.
Figma está basado en el navegador, por lo que usuarios de cualquier sistema operativo pueden acceder a él, incluido Linux. Esto es una gran ventaja, pero hay que considerar que el acceso sin conexión es un detalle negativo respecto a las demás aplicaciones.
Por su parte, Adobe XD está disponible para Mac y Windows. Al igual que Sketch, al ser una aplicación que descargas en tu escritorio, no presenta por lo general problemas para el trabajo offline.
2. Opciones y precios
Precio de Sketch
En cuanto a la compra, existen dos formas de acceder a Sketch y se diferencian principalmente en la forma en que lo vayamos a utilizar.
La primera es la compra de una licencia para descargar la aplicación en nuestro Mac. En este caso, se trata de un único pago de 99$ por dispositivo (unos 85€). Con esta compra, se consigue la aplicación de forma indefinida, pero solo con actualizaciones durante el primer año. Si deseas recibir nuevas actualizaciones, tendrás que pagar otros 99$ una vez pasados los primeros 12 meses. De cualquier modo, esta opción tiene determinadas limitaciones, como la imposibilidad de compartir documentos con un link y de sincronizar librerías y documentos. Tampoco ofrece una prueba gratuita, cosa que sí ocurre en el
siguiente caso.
La otra opción que nos ofrece Sketch constaría de un espacio de trabajo, una web app y una aplicación de Mac exclusiva para editores.
- Espacio de trabajo: en él, se pueden gestionar los accesos de usuarios (e invitados) en un dashboard al que se accede desde cualquier navegador. Permite organizar, guardar y sincronizar documentos y librerías, manteniendo también un historial de cambios en ellos.
- Aplicación para Mac: exclusiva para editores, pero permite el trabajo colaborativo en tiempo real y compartir los prototipos de forma sencilla con un link.
- Web app: permite ver diseños en cualquier navegador, compartirlos con un link, dejar feedback y responder generando hilos (con la opción de hacer menciones), revisar cambios, etc.
Todas estas herramientas, que se asemejan más a Figma que a lo que inicialmente era Sketch, tienen un coste de 9$ mensuales o 99$ anuales por usuario. Como adelantamos antes, en este caso sí se permite una prueba gratuita de 30 días.
Precio de Figma
Figma tiene tres planes, de los cuales el primero, denominado Starter, es gratuito. Este incluye un proyecto de equipo con historial de 30 días atrás, almacenamiento ilimitado en la nube, comentarios e invitados (viewers) también ilimitados y acceso a todos los editores que se desee en tres archivos del equipo.
El segundo plan es el Profesional y su coste es de 15$ mensuales o 144$ anuales por editor. La diferencia con el Starter es que se agregan proyectos ilimitados, historial completo, permisos personalizados (de usuario o archivo), proyectos privados,
conversaciones por audio y la posibilidad de compartir librerías. Es muy importante mencionar que esta versión es gratuita para estudiantes y educadores.
Por último, el plan más completo de Figma es el de Organización. Solo permite el pago anual, que asciende en este caso a 540$. Mantiene las funcionalidades de los niveles inferiores y agrega nuevas, como SSO y seguridad avanzada, gestión de datos o analíticas de los sistemas de diseño, entre otras.
Precio de Adobe XD
Adobe XD funciona por suscripción, pero no tiene un sistema de niveles como Figma. Lo que sí ofrece es la posibilidad de comprar XD de forma aislada por 12,09€ al mes o el conjunto de aplicaciones de Creative Cloud (en las que se incluyen, por ejemplo, Photoshop e Illustrator) por 60,49€ al mes. Para empresas pequeñas y medianas, existe otro plan en el que Adobe XD supondrá un coste mensual de 24,19€, mientras que organizaciones más grandes tendrán que ponerse en contacto con Adobe para recibir más información.
Existe también una versión básica gratuita vinculada a la cuenta de Creative Cloud, pero solo permite tener un prototipo activo y en la nube.
3. Trabajo colaborativo
En cuanto a trabajo colaborativo, la mayoría coincide en situar a Figma en primera posición. Figma permite a varios usuarios trabajar de forma simultánea en un mismo diseño, estando al tanto de qué hacen sus compañeros y viendo cambios en tiempo real. Gracias a que está en la web, no se necesitan crear versiones de archivos o recurrir a servicios de terceros para compartirlos, sino que con el sencillo gesto de enviar el link, cualquiera que lo reciba podrá acceder. También hay herramientas de inspección y para añadir comentarios, lo que hace que la comunicación con el cliente, los desarrolladores o cualquier compañero sea mucho más fluida.
De forma nativa, Sketch se quedaba muy atrás en este aspecto. Cada persona trabajaba en su dispositivo y subía el archivo una vez terminada la versión. Este proceso podía hacerse más pesado y complejo para equipos de diseñadores y también a la hora de enviarlo al cliente. Sin embargo, ahora cuenta con un plan de suscripción en el que se favorece el trabajo colaborativo gracias a su web app. Los diseños son accesibles desde el navegador, y se pueden dejar comentarios, hacer cambios, revisar el historial, etc.
Por su parte, Adobe XD cuenta con la función “Coediting” para el trabajo colaborativo en tiempo real, basado en la creación de documentos en la nube. También permite compartir enlaces, por lo que en este aspecto es bastante similar a la versión por suscripción de Sketch.
Sobre este tipo de funciones, nuestra Head of UI, Gisela Jiménez Lee, mantiene que «las herramientas tienden ahora hacia una colaboración en tiempo real que facilita el trabajo en equipo. Esto es muy beneficioso para las empresas, pero es necesario llevar un control de la evolución del diseño para evitar incoherencias en el mismo».
4. Interfaz
Las interfaces de estas aplicaciones son bastante similares y entendemos que esto favorece su carácter intuitivo. Además, de este modo, el paso de una a otra no supondrá una curva de aprendizaje muy marcada. La interfaz es simple y limpia y basa la mayoría de opciones en un panel en la parte izquierda, si bien en el lado derecho se ubica el de propiedades. No solo visualmente, sino que incluso las funciones y los atajos de teclado son bastante parecidos.
Sobre cada herramienta
Sketch
Sketch es uno de los más demandados, en parte gracias a ser el primero en el mercado con estas características. Aunque a primera vista puede parecer simple, es una herramienta bastante potente y cuenta con el apoyo de numerosos plugins para ampliar su funcionalidad.
Además, tiene integraciones con InVision para la parte de prototipado y con Zeplin para simplificar la entrega de especificaciones del diseño a los desarrolladores.
Sketch tiene también documentación muy completa. Esta se complementa con webs como Sketch App Resources o Sketch Repo, desde donde es sencillo descargar otros diseños para tener una base sobre la que empezar.
Ya lo adelantábamos en el apartado de precio, pero debemos recordar que, más allá de la versión nativa, Sketch tiene otra que facilita la colaboración. Con ella, lograremos:
- Trabajo colaborativo en tiempo real.
- Compartir diseños con enlace y visualizarlos en cualquier navegador.
- Gestionar accesos de usuarios al diseño.
- Dejar comentarios y sugerencias.
- Revisar el historial de cambios.
La barrera que supone que la app nativa solo sea para Mac, si bien no se elimina, se difumina en parte gracias a esta opción. Con ello, Sketch vuelve a ser una opción bastante interesante para el diseño web.
Figma
Figma fue lanzada en 2016 y está basada en el navegador. Esta característica le permite adoptar un enfoque colaborativo y bastante flexible, pues se puede acceder de forma sencilla, rápida, en cualquier momento (siempre que haya conexión) y con cualquier sistema operativo.
Como veníamos diciendo, el punto fuerte de Figma es la oportunidad de colaborar en tiempo real de forma sencilla y de compartir los proyectos con enlaces, ahorrando tiempo de exportación. Para que esto no suponga ningún tipo de problema, existe el historial de versiones, que permite deshacer los cambios si es necesario. Todos los archivos se guardan en la nube de forma automática, lo cual asegura que el trabajo no se pierda y, además, ayuda a ahorrar espacio, pues no hay que descargar nada.
De cualquier forma, Figma sí que ofrece la posibilidad de descargar una aplicación de escritorio, en cuyo caso los diseños se guardarían de forma local. Esta aplicación se sincroniza con la web cuando hay conexión a internet.
Otras funcionalidades y aspectos a considerar son:
- Tiene plantillas de wireframes, diagramas de flujo e incluso webs completas, de forma que es más sencillo comenzar a diseñar y editar.
- Posibilita crear prototipos animados e interactivos.
- Cuenta con una biblioteca de recursos de búsqueda y otra de plugins.
- Permite copiar CSS desde el diseño, facilitando el desarrollo.
- Se pueden gestionar los permisos y accesos de los usuarios.
- Tiene una comunidad amplia y recibe actualizaciones de forma habitual.
Adobe XD
La plataforma Adobe XD permite diseñar y prototipar desde un mismo lugar. Esto supone una gran ventaja frente a las combinaciones a las que tenían que recurrir previamente los diseñadores, como el uso conjunto de Sketch e InVision.
Estos prototipos se pueden hacer de forma interactiva sin necesidad de plugins adicionales. Botones, menús desplegables, transiciones… Estas y muchas más opciones permitirán simular una navegación real, materializando todavía más el proyecto y logrando que otras personas comprendan mejor en qué consistirá. A este fin también contribuye la aplicación para móviles. Con ella, se puede ver el diseño desde este tipo de dispositivos, aunque también es accesible desde un enlace.
No debemos olvidar que, al formar parte de Adobe, las actualizaciones son bastante habituales y las mejoras entre una versión y otra suelen ser notables. Además, esto asegura una interacción fluida con otros programas de la familia, como Photoshop o Illustrator.
Su interfaz es bastante similar a las anteriores y, aunque es mucho más sencilla que la de otras aplicaciones de Adobe, no por ello es menos potente. De hecho, XD también ofrece un sistema de “Coedición” y la posibilidad de compartir el diseño mediante enlace. Así, se pueden aportar comentarios y, en función de los permisos, hacer modificaciones. Las opciones para compartir son Invitar para editar, Compartir para revisión, Compartir para desarrollo e incluso Grabar vídeo. Con esta última se hace muy sencillo mostrar una característica concreta del prototipo.
También hay que mencionar el papel que tienen los plugins en Adobe XD, de los cuales muchos coinciden con los de Sketch. Además, se puede integrar con otras aplicaciones, como con Hojas de Cálculo, de Google.
Otros aspectos a considerar:
- Cuenta con un historial para revisar versiones anteriores y recuperar cambios.
- Permite reutilizar los componentes y da la posibilidad de que al editar uno de ellos, todas sus copias reciban los mismos cambios.
- La función de estados permite determinar modificaciones en el diseño en base al comportamiento del usuario (clicks, hover, deslizar…).
- Permite abrir archivos de Sketch y de Photoshop.
Conclusión
Aunque existen bastantes similitudes entre las aplicaciones, cada una tiene características únicas, que serán las determinantes a la hora de decidir. Aun así, a modo de resumen podemos tocar algunos puntos.
Los usuarios de Windows o cualquier otro sistema operativo no podrán usar Sketch. Esto sitúa en posición de desventaja a esta herramienta, aunque es importante considerar que su cuota de mercado es bastante amplia y que sus archivos se pueden abrir desde Adobe XD. Así, si es, por ejemplo, el cliente quien usa Adobe XD, en principio no habría gran problema
con que el diseñador trabaje sobre Sketch.
En cuanto a Adobe, su compatibilidad con Mac y Windows sale ganando respecto a Sketch aunque muchas personas consideran que todavía necesita más actualizaciones. De cualquier modo, Adobe está muy extendido en el entorno empresarial, por lo que puede ser la mejor opción para aquellos que utilicen otras plataformas del paquete.
Por último, Figma queda como la mejor opción para usuarios de Linux, para todos aquellos que prefieran trabajar desde navegador y para quienes busquen una opción gratuita y bastante completa. Además, no se queda atrás en cuanto a actualizaciones, pues recibe nuevas características y tiene una comunidad bastante activa.
La elección dependerá de varios aspectos: cómo y dónde se usará, para qué tipo de proyectos y qué preferencia tiene el diseñador en concreto o su equipo.
