Figma vs. Sketch vs. Axure: una revisión basada en tareas

En una infografía reciente de Toptal: "Las mejores herramientas de UX", examinamos la amplia gama de herramientas de diseño digital en el mercado, la mayoría de las cuales son capaces de ayudar en las tareas diarias del diseñador de UX individual.

Tres de las herramientas presentadas, Sketch, Figma y Axure, han generado seguidores leales porque se destacan en trabajos específicos dentro del flujo de trabajo de diseño de UX.

Sin embargo, el rendimiento de estas herramientas varía según la tarea de diseño en cuestión . En lugar de enumerar todas sus características en una tabla de comparación, determinaremos su efectividad con una revisión basada en tareas.

Aquí hay una descripción general rápida de los competidores:

• Boceto de Bohemian Coding con sede en La Haya, Países Bajos. Sketch es una aplicación solo para Mac.
• Figma por Figma con sede en San Francisco, California. Figma se ejecuta en cualquier sistema operativo a través de un navegador.
• Axure de Axure Software Solutions con sede en San Diego, California. Axure tiene una versión para Windows y Mac.

Calificaremos cada herramienta en función de qué tan bien realiza las tareas de diseño cotidianas desde el primer momento, sin complementos, complementos o aplicaciones de terceros. Las tareas incluyen:

1. Ideación de conceptos
2. Creación de entregables de baja fidelidad
3. Creación de entregables de alta fidelidad
4. Creación de prototipos interactivos
5. Creación de un sistema de diseño
6. Entregando al Desarrollo

Nota: Cuando las herramientas tienen características casi idénticas necesarias para completar una tarea, la victoria será para la herramienta que sea más fácil de usar y proporcione una entrega más rápida. Si esa determinación parece demasiado reñida, el apoyo de terceros es el desempate.

Tarea: Ideación de concepto

La ideación es un proceso creativo para generar nuevas ideas y, por lo general, lo realizan grupos interdisciplinarios que consisten en diseñadores, desarrolladores, propietarios de productos y gerentes de proyectos.

El objetivo es crear nuevas ideas para usar en un producto después de considerar los requisitos básicos y cualquier trabajo que ya esté en construcción. Por ejemplo, un equipo puede someterse a una sesión de ideación de concepto para crear un conjunto de funciones MVP para una nueva aplicación o funciones de próxima generación en una aplicación existente.

Muchos diseñadores hacen ideas de conceptos en una pizarra o papel. Sin embargo, la ideación también se realiza digitalmente, especialmente en oficinas distribuidas. La generación de conceptos es un deporte de equipo e incluye personas que no son diseñadores, como propietarios/gerentes de productos y desarrolladores front-end. Las herramientas que fomentan la colaboración y son fáciles de usar son las mejores para esta tarea.

Ganador: Figma

Sketch y Axure ofrecen servicios para compartir en la nube, pero no hay forma de compartir pantallas en tiempo real con los colaboradores.

Los archivos compartidos en Figma se pueden unir en tiempo real y se muestra el cursor etiquetado de cada participante. Un clic en los avatares representativos en la barra de herramientas cambia las vistas a la perspectiva de esa persona, lo que facilita compartir una idea rápidamente. Además, Figma no requiere que quienes no son diseñadores tengan una copia; abren el enlace del archivo y comienzan a trabajar.

Otras herramientas de colaboración de pizarra pueden ser más adecuadas para la ideación de conceptos que Figma, como Mural y Realtimeboard, pero para una herramienta de diseño, Figma es mucho mejor que Sketch y Axure.

Tarea: Creación de entregables de baja fidelidad

Los entregables de baja fidelidad generalmente se producen como estructuras alámbricas o bocetos digitales que otros diseñadores y propietarios de productos pueden distribuir y revisar. Según el proceso de UX, los desarrolladores y otras partes interesadas también pueden verlos.

Los wireframes están destinados a mostrar la estructura básica de una aplicación para que el modelo de interacción se pueda definir antes de dedicar tiempo a crear maquetas de alta fidelidad.

La creación de estructuras alámbricas de baja fidelidad se puede realizar mediante herramientas específicamente dedicadas a la tarea, incluidas Balsamiq Mockups, Moqups y FluidUI. Sin embargo, Sketch, Axure y Figma pueden hacer la misma tarea, especialmente cuando los usuarios crean bibliotecas de componentes de estructura alámbrica.

Dado que los wireframes suelen servir como diseño de interfaz de usuario inicial para una aplicación o página, son cortes monocromáticos que cambian con frecuencia. Esto ayuda a mantener bajo control las expectativas de las partes interesadas.

Para los wireframes, la facilidad de uso, la velocidad de entrega y la modificación son esenciales porque permiten a los diseñadores producir variantes de diseño de manera eficiente.

Ganador: Axure

Axure obtiene la victoria aquí porque tiene componentes preempaquetados para estructurar alambres inmediatamente después de instalar el software. Sketch y Figma tienen las herramientas que le permiten crear estructuras alámbricas, pero necesita dibujar un componente de estructura alámbrica o descargar un archivo que los contenga. En cualquier caso, deben integrarse en una biblioteca de símbolos (Sketch) o componentes (Figma) para arrastrarlos y soltarlos como los componentes de Axure.

Axure tiene muchas bibliotecas de terceros para crear entregables de baja fidelidad, y Sketch tiene una multitud de archivos gratuitos y de pago que se pueden descargar, mientras que los recursos públicos de Figma aún son incipientes.

Una vez que un diseñador ha creado bibliotecas de componentes de estructura alámbrica, las tres herramientas se igualan de manera uniforme. Tenga en cuenta que los componentes de Axure poseen propiedades paramétricas y ajustables, pero para estructuras alámbricas estáticas, las tres herramientas funcionan bien cuando las bibliotecas están disponibles.

Tarea: Creación de entregables de alta fidelidad

Los entregables de alta fidelidad nacen de los comentarios y aprendizajes recopilados a partir de estructuras de alambre de baja fidelidad. Son maquetas que muestran color, detalles visuales y diseños finales propuestos para una aplicación.

La alta fidelidad también significa maquetas de pantalla que están listas para su presentación y se muestran a clientes, ejecutivos internos y otras partes interesadas que no son diseñadores. Las herramientas de diseño que sobresalen en esta tarea tienen todas las características necesarias para agregar el pulido necesario para crear una representación de los entregables finales de cara al cliente.

Esto incluye el control sobre los rellenos y trazos de objetos, la adición de efectos como sombras y rellenos degradados y la exportación de arte a un formato fácil de digerir (png, pdf, jpg).

Ganador: Figma

Sketch y Figma tienen conjuntos de herramientas casi idénticos que pueden crear maquetas de alta fidelidad, pero el modelo de interacción de Figma es más refinado y la herramienta es más fácil de usar desde el principio. Ambas herramientas tienen fácil acceso a edición avanzada y comandos booleanos como Unir, Intersecar, Unión y Restar. Si bien la compatibilidad con complementos de Sketch permite que terceros creen funciones adicionales, estas herramientas no están disponibles inmediatamente después de la instalación.

Las tres herramientas tienen funciones que permiten la creación de objetos personalizados, pero Axure dificulta un poco el acceso a los comandos. Las ediciones mencionadas anteriormente no están disponibles en la barra de herramientas. El acceso solo se obtiene a través del menú contextual cuando se seleccionan varios objetos.

Además, las redes vectoriales de Figma hacen que trabajar con las herramientas de línea sea muy sencillo.

Tarea: Creación de prototipos interactivos

Los prototipos interactivos pueden ser tan toscos como un prototipo en papel o tan detallados como una versión ramificada de una aplicación existente que se modificó para explorar nuevas funciones. Por lo general, los prototipos interactivos permiten a los usuarios navegar de una pantalla a otra y utilizar funciones como menús y listas.

Para muchos diseñadores, una presentación de diapositivas interactiva básica será suficiente para presentar su trabajo. Esto es especialmente cierto para las aplicaciones móviles, ya que las transiciones simples brindan suficiente interacción con el dispositivo para explicar el diseño.

El modelo de creación de prototipos de Figma está bien integrado y es fácil de usar, y debido a que es una aplicación basada en la nube en tiempo real, no es necesario actualizar las páginas HTML cuando se actualiza un archivo.

Ocasionalmente, las partes interesadas quieren conexiones de datos en vivo para cargar un prototipo con datos del mundo real para probar la escalabilidad de un diseño, pero la gran mayoría de los diseñadores ahora tienen poca necesidad de prototipos complejos.

Ganador: Figma

Sketch y Figma admiten la creación de prototipos simples con enlaces de "objeto a mesa de trabajo" y un conjunto limitado de transiciones. Los complementos ayudan a reforzar las capacidades de creación de prototipos simples de Sketch, pero Axure es el más poderoso cuando se trata de proporcionar un modelo de interacción sólido para prototipos.

Tarea: Creación de un sistema de diseño

Los sistemas de diseño, si bien son relativamente nuevos en el dominio del diseño de UX, existen desde hace décadas. Incluyen un lenguaje de diseño compartido, componentes, recursos y pautas que permiten a los equipos colaborar y tomar mejores decisiones. Una biblioteca de sistema de diseño generalmente se implementa como un sitio web y actúa como la única fuente de información para un producto en toda la empresa.

Ganador: Figma

Si bien las bibliotecas de componentes se pueden construir en cualquiera de los programas, ninguno de ellos permite a los diseñadores activar un interruptor y producir una biblioteca de componentes viable desde el principio. Axure puede generar una página HTML con componentes personalizados, pero no hay forma de consultar el componente único para averiguar el valor del color, el tamaño y otras propiedades.

La construcción de un sistema de diseño utilizando cualquiera de estas herramientas sigue siendo un proceso manual. Sin embargo, hay complementos para Sketch (como el complemento Material Design recientemente lanzado por Google) y al menos una herramienta de terceros en proceso para Figma.

Figma obtiene la victoria porque la colaboración es el corazón de un buen sistema de diseño. Los empleados de la empresa de varias disciplinas (diseño, desarrollo, calidad, contenido) necesitan acceder a una biblioteca del sistema de diseño y muchos agregarán al archivo del componente de diseño que se sincroniza con la biblioteca compartida. Figma puede ser utilizado por cualquier persona, no solo por el titular de la licencia, lo que hace que sea fácil acceder y agregar a un archivo compartido.

Tarea: Entregar al Desarrollo

Cuando los diseñadores de UI terminan de crear una interfaz, es su responsabilidad entregar los archivos de diseño a los desarrolladores para que el proyecto pueda completarse. Pero una transferencia es más que un simple intercambio de datos, es una oportunidad para que los diseñadores comuniquen la razón de su trabajo y, por lo tanto, ayuden a los desarrolladores a combinar la forma con la función.

Hay docenas de métodos de transferencia e incluso más herramientas de terceros para facilitar las consultas de información de objetos y líneas rojas de los archivos Sketch y Figma (consulte Avocode y Zeplin). Sin embargo, en esta comparación, observamos la herramienta de diseño original antes de complementarla con complementos u otras aplicaciones.

Curiosamente, el auge de los sistemas de diseño de UX mitiga la necesidad de esta forma de transferencia, ya que las bibliotecas de componentes publicadas son la única fuente de información para el desarrollador. Pueden extraer la información exacta del diseño y el diseño de los componentes sin esperar una consulta de entrega o UX.

Además, obtener información de los objetos en un archivo de diseño puede ser útil durante la construcción de un sistema de diseño, por lo que alguna vista del CSS es algo bueno.

Sketch le permite seleccionar objetos y usar un menú contextual para "Copiar atributos CSS", pero no es lo ideal. Figma hace un buen trabajo al proporcionar una pestaña de "Código" en el panel de propiedades que produce valores CSS, iOS o Android para los objetos seleccionados (los desarrolladores pueden usar esta función en modo de solo vista o prototipo).

Ganador: Axure

En este momento, solo Axure tiene poderosos "generadores" que producen archivos HTML completamente publicables, especificaciones de Word e incluso informes con formato CSV para importar a una hoja de cálculo. Si bien los resultados no son una biblioteca de diseño, la aplicación proporciona materiales útiles para el desarrollador.

El ganador general de la herramienta de diseño: Figma

Según los números, Figma es el ganador de esta comparación, principalmente por su naturaleza colaborativa y su disponibilidad multiplataforma. A medida que más equipos utilizan sistemas de diseño que exigen una integración más estrecha en el desarrollo y diseño front-end, la función de integración en vivo y colaboración en tiempo real de Figma le da una gran ventaja. En el lado negativo, Figma es una aplicación en línea cuyo uso podría estar prohibido en una empresa por razones de seguridad.

Axure ocupa el segundo lugar debido a su fuerza lista para usar con componentes prediseñados, potentes funciones de creación de prototipos interactivos y generación de documentos. En el caso más raro de que una empresa necesite acceder a almacenes de datos del mundo real para ver cómo se comporta una función en particular, Axure es la mejor o la única opción.

Es posible que Sketch haya quedado en último lugar, pero una vez que los usuarios aprovechan los numerosos complementos y recursos disponibles para la herramienta, es extremadamente potente y se puede adaptar para satisfacer las necesidades de un grupo de diseño. La advertencia aquí es que los complementos deben actualizarse después de cada actualización de Sketch, y como una aplicación solo para Mac, las empresas que usan PC con Windows no pueden usarla.

Las tres herramientas revisadas en este artículo son poderosas por derecho propio. Sin embargo, cada uno tiene limitaciones. Depende de los diseñadores y equipos individuales identificar sus necesidades de flujo de trabajo, sopesar los pros y los contras de cada programa y tomar la decisión adecuada.

Lectura adicional en el blog de diseño de Toptal:

• Deshazte de los MVP, adopta prototipos mínimos viables (MVPr)
• El poder de Figma como herramienta de diseño
• Cómo crear una guía de estilo de boceto, una biblioteca y un kit de interfaz de usuario
• Comprender los sistemas y patrones de diseño
• Muerte al Wireframe. ¡Directo a la alta fidelidad!