Figma vs. Adobe XD en el 2020

() translation by (you can also view the original English article)

Figma y Adobe XD han estado compitiendo desde el lanzamiento de XD en el 2016. Al principio, la competencia no era tan fuerte, ya que los primeros lanzamientos de XD carecían de muchas características clave, pero las cosas han cambiado en los últimos años. La competencia entre las dos aplicaciones ahora es mucho más feroz, y ya no es tan fácil detectar cuál será la más adecuada para ti y tu flujo de trabajo.

En este enfrentamiento vamos a repasar y a comparar profunda y completamente Figma vs Adobe XD, también descubriremos dónde es mejor cada uno, cuál es mejor en general y cuál es mejor en algún conjunto específico de circunstancias.

¡Comencemos!

Tabla de contenidos

Sección 1. Precio (en USD)
Sección 2. Plataformas de Soporte
Sección 3. Colaboración, Compartir y Vistas Previas
Rección 4. Diseño
Sección 5. Sistemas de Diseño
Sección 6. Prototipos
Sección 7. Manos Libres
Sección 8. Miscelánea & Extras
Sección 9. Puntaje Final

Sección 1. Precio (en USD)

Vamos a entrar en los precios como nuestra primera comparación, así que a medida que analicemos las características de ambos programas tendrás un contexto para evaluar cuánto valor obtendrás en cada caso.

Figma: Gratis / $12 / $45

Figma tiene un nivel gratuito con almacenamiento ilimitado hasta dos editores y tres proyectos. Los proyectos pueden contener un número ilimitado de documentos que pueden ser guardados en línea y fuera de línea. Tiene dos niveles de pago con características centradas en el equipo denominadas "Profesional" y "Organización", a un precio de 12 y 45 dólares respectivamente por editor, por mes.

XD: Gratis / $9.99 / $22.99 / incluido CC $52.99

XD también tiene un nivel gratuito sin límite de proyectos, sin embargo los archivos no pueden ser guardados localmente y deben ser guardados en la nube, con una capacidad de almacenamiento de 2 GB. El nivel pagado es de 9,99 dólares al mes, o incluido con una suscripción a Creative Cloud actualmente de 52,99 dólares al mes. El nivel de pago permite el ahorro local y también aumentar el almacenamiento en la nube a 100 GB.

Nota: En el momento de este artículo las cuentas gratuitas incluyen documentos compartidos ilimitados y enlaces compartidos, además de ahorro local. Sin embargo, a partir de abril de 2020 los documentos y enlaces compartidos estarán limitados a uno de cada uno, y se requerirá un nivel de pago para el ahorro local.

Ganador: Figma

Por qué gana Figma

Consigues más en el nivel gratuito de Figma que en el de XD.
Los niveles de pago de XD son más baratos, pero los niveles pagados de Figma tienen considerablemente más características.

Veamos un análisis detallado de por qué gana el precio de Figma, nivel por nivel.

Nivel gratuito

Si no fuera por las próximas restricciones de abril a la colaboración y el ahorro local con XD, la competencia en el nivel gratuito que es más convincente habría sido mucho más estrecha. Sin embargo, tal como está, se obtiene más de la versión gratuita de Figma que de XD:

Almacenamiento en la nube: Figma, ilimitado vs. XD, 2GB
Documentos compartidos: Figma, ilimitado vs. XD, 1
Enlaces compartidos: Figma, ilimitado vs. XD, 1

Primer nivel de pago

En el primer nivel de pago, XD es 2,01 dólares más barato por usuario, lo que debe tenerse en cuenta.

Sin embargo, mucho de lo que se obtiene en el nivel de pago de XD ya está disponible en el nivel gratuito de Figma, es decir, documentos compartidos ilimitados, enlaces compartidos ilimitados, mayor cantidad de almacenamiento en la nube.

En cuanto al resto de las características de pago en el primer nivel, el principal punto de diferencia de Adobe es que incluye el acceso a su biblioteca de fuentes completa, de lo contrario solo está disponible a través de Creative Cloud. Para comparar, Figma proporciona acceso a Google Fonts, sin una biblioteca de fuentes propia.

En cambio, el primer nivel de pago de Figma añade permisos personalizados de archivo/usuario, documentos solo para invitados y bibliotecas de equipo compartidas.

Por lo tanto, el valor que se le ofrece en el primer nivel de pago de estas aplicaciones se reduce a si las fuentes o las funciones para la colaboración y demostración a los clientes valen más para ti en tu flujo de trabajo.

En términos generales, los diseñadores web tendrían más probabilidades de encontrar valor en las funciones de colaboración, permiso y uso compartido del primer nivel de pago de Figma que en la biblioteca de fuentes del primer nivel de pago de Adobe.

Nota: El nivel "Profesional" de Figma también extiende el historial de versiones de 30 días a ilimitado.

XD acaba de añadir el historial de versiones en noviembre de 2019, y tiene un límite de 30 días por defecto, con la opción de marcar versiones específicas para mantenerlas indefinidamente. Esto parece ser lo mismo tanto en los niveles gratuitos como en los de pago.

Segundo nivel pagado

De nuevo, el segundo nivel de pago de XD es más barato que el de Figma, esta vez por 22,01 dólares.

Sin embargo, parece que XD no ofrece tantas adiciones en este nivel como lo hace Figma.

El nivel "XD para equipos" añade:

Seminarios web en línea
Consola de administración basada en la web
Soporte técnico avanzado

El nivel de "Organización" de Figma añade:

Sistemas de diseño de toda la organización
Equipos centralizados
Plugins privados
Administración del plugin
Fuentes compartidas
Un solo registro + seguridad avanzada
Análisis de sistemas de diseño

También en este caso, aunque el segundo nivel de XD es más barato, Figma's parece ofrecer más valor en forma de características que serán prácticamente útiles para las grandes organizaciones.

Sección 2. Plataformas soportadas

XD

Escritorio:

Windows y Mac.

Navegadores para equipos de escritorio y dispositivos móviles:

XD puede generar vistas previas de tus diseños que se pueden ver en el navegador para que los clientes puedan dar su opinión.

Aplicación para dispositivos móviles:

Aplicación de Adobe XD en iOS o Android. Emula los dispositivos móviles para obtener vistas previas en directo

Figma

Escritorio:

Windows y Mac (oficial).

Linux a través de la aplicación Figma-linux mantenida por la comunidad - proporciona soporte para fuentes instaladas localmente

Navegadores de escritorio:

Figma puede ser usado para editar en cualquier navegador que soporte WebGL. Esto también permite la edición a través de ChromeOS y otros sistemas basados en Linux / BSD.

Además, los diseños pueden ser vistos por los clientes en los navegadores de escritorio.

Navegadores de dispositivos móviles:

El modo de sólo visualización permite previsualizar los diseños en iOS y Android. Oficialmente soportado en Safari y Chrome pero también funciona en Firefox en mis pruebas.

Aplicación para dispositivos móviles:

Figma Mirror app en iOS o Android. Emula más estrechamente los dispositivos móviles que el navegador para la vista previa

Ganador: Figma

Por qué gana Figma

En la actualidad, Adobe no proporciona ninguna forma de acceder a XD fuera de Windows o Mac, mientras que a Figma también se puede acceder a través de ChromeOS y Linux.

Un poco más de un cuarto de los encuestados en la encuesta de desarrolladores de Stack overflow 2019 informaron de que utilizan un sistema basado en Linux como sistema operativo principal, y es una plataforma de uso común entre las personas involucradas en la fase de codificación del desarrollo web. El hecho de que Figma sea accesible en Linux y ChromeOS a través del navegador o de la aplicación de escritorio mantenida por la comunidad, lo convierte en la herramienta elegida por cualquier equipo que no esté 100% basado en Mac / Windows.

A little over a quarter of respondents to the 2019 Stack overflow developer survey reported using a Linux based system as their primary operating system

Dicho esto, si tu equipo funciona completamente en Mac y Windows, no experimentarás ninguna diferencia significativa en términos de soporte de plataforma.

Sección 3. Colaboración, Compartir y Previsualización

3a. Colaboración

Figma

Multijugador

Con la función "multijugador" de Figma, cualquier número de personas puede conectarse y editar un documento simultáneamente. Cada uno tendrá un avatar que aparecerá en la barra de herramientas superior, y el cursor de cada persona se mostrará con un color diferente y su nombre unido a él.

Modo de observación

También puedes activar el modo de observación haciendo clic en el avatar de cualquier otro usuario conectado y en el mismo documento que tú. Una vez activado, tu pantalla reflejará la de ellos, mostrándote cada acción que realicen mientras se mueven por el documento. Puedes usar esto tanto para mostrar un documento a otra persona, como para ver a una persona moverse a través de un prototipo con el fin de probar sus debilidades.

Bibliotecas de equipo

Una característica muy útil son las bibliotecas de equipo. No solo puedes crear sistemas de diseño compuestos por componentes reutilizables, esquemas de color y estilos de texto para tu propio trabajo, sino que puedes hacer que dichos sistemas de diseño estén disponibles para todo tu equipo, de modo que todos trabajen con los mismos elementos comunes.

Guardar y sincronizar automáticamente

Es importante destacar que Figma guarda y sincroniza automáticamente cualquier cambio en los documentos y sistemas de diseño de los mismos. Si una persona está trabajando en un proyecto compartido y se produce un cambio, se le notificará y podrá actualizar lo que está viendo inmediatamente para que todos los miembros del equipo estén al día en todo momento, sin necesidad de subir o bajar archivos o de hacer fusiones manuales.

Adobe XD

Coedición (beta)

A partir de noviembre de 2019, Adobe XD tiene un diseño de "coedición" colaborativa en beta, que se comporta de manera muy parecida a las características "multijugador" de Figma. En la actualidad la única diferencia visual destacable entre los dos es que no se ve el cursor de otros diseñadores trabajando en el documento.

Recursos vinculados

XD también tiene " Recursos Vinculados", por lo que si un documento se guarda en la nube, se puede acceder a sus componentes y estilos desde otros documentos mediante la vinculación de los mismos. Si se modifica el componente original y luego se guarda en el documento de origen, el documento vinculado recibirá una notificación de que puede actualizarse para ver los cambios.

Más información:

https://helpx.adobe.com/xd/help/linked-assets.html

Bibliotecas de Creative Cloud

También puedes organizar y acceder a los recursos a través de las Bibliotecas de Creative Cloud. Esto comienza a acercarse a la funcionalidad que se encuentra en las Bibliotecas de Equipo de Figma, pero las características para facilitar los tipos de estructuras de equipo que la gente usa en los proyectos no son tan fuertes.

Si los recursos originales de una Biblioteca CC se actualizan, no cambiarán en otros documentos que los estén utilizando.

Más información:

https://helpx.adobe.com/xd/help/cc-libraries-xd.html

Ganador: Figma

Por qué gana Figma

La colaboración es la funcionalidad central en torno a la cual se construye una gran parte de Figma, y se muestra. Estar basado en la web significa que las características de colaboración son muy rápidas y de fácil acceso, el modo multijugador es actualmente más avanzado que la beta de edición de XD, incluye un modo de observación, bibliotecas de equipo, y un proceso fluido para sincronizar y actualizar los cambios en los recursos compartidos.

3b. Compartir

Figma

Invitaciones

En Figma puedes enviar invitaciones a personas específicas y establecer si pueden ver, editar y añadir comentarios. También es posible, en lugar de invitar a individuos uno a uno, crear equipos, agregar personas a esos equipos y luego compartir con el equipo requerido. Además, puedes compartir todos los documentos de un proyecto con un equipo en lugar de tener que compartir un documento a la vez.

Permisos

También hay cuatro niveles de permisos que una persona puede tener: observar, editor, administrador o propietario. Estos permisos pueden establecerse en cuanto a equipo, proyecto y documento.

Enlaces

Puedes compartir un documento enviando el mismo enlace que utilizas para editar el documento en el navegador. Una vez más, puedes controlar lo que permite el acceso a través del enlace, ya sea editando o simplemente observando. Esto facilita un entorno de intercambio entre diseñadores, similar a GitHub o CodePen, y que va a ser impulsado por las próximas páginas de la comunidad Figma.

Más información:

Adobe XD

Enlaces compartidos

Es posible en XD generar un enlace a una versión web de un documento. Estos enlaces pueden ser generados como optimizados para:

Revisión del diseño
Traspaso del desarrollador
Presentación
Prueba de usuario

También puedes aplicar ajustes personalizados a los enlaces generados.

Es posible permitir el acceso abierto a tu enlace compartido, o requerir una contraseña de tu elección.

Invitaciones privadas

A partir de junio de 2019, XD tiene la posibilidad de enviar por correo electrónico a las personas invitaciones privadas para ver los enlaces compartidos. Este sistema te permitirá garantizar aún más, más allá de la protección por contraseña, que solo las personas invitadas puedan ver un prototipo publicado en línea.

Si el acceso se restringe únicamente a la invitación, las personas invitadas necesitarán una cuenta en Creative Cloud.

Ganador: Figma

Por qué gana Figma

XD hizo un gran avance cuando añadió las invitaciones privadas, sin embargo, sigue siendo significativamente detrás de la gestión avanzada del equipo de Figma y el sistema de permisos, y la facilidad de permitir el intercambio abierto a través del navegador.

3c. Previsualización

Figma

Figma te da la posibilidad de simplemente enviar a un cliente o gerente un enlace para mostrarle una maqueta en vivo en el navegador. Puedes configurar el enlace para que solo sea "ver" para que la persona no pueda hacer inadvertidamente cambios no deseados, o puedes darle la capacidad de "editar" para que pueda interactuar directamente y mostrarte lo que le gustaría que ocurriera en el diseño, o hacer cambios como añadir una copia que haya preparado.

También puedes usar el "modo de observación" descrito anteriormente para mostrar a alguien a través de la maqueta.

También es posible incrustar documentos para que se puedan mostrar dentro de una página web si prefieres hacer una vista previa de esta manera. Para hacer una comparación con el CodePen de nuevo, esto es similar a incrustar un bolígrafo en una página, pero en este caso mostrando el diseño en lugar del código.

XD

Como se mencionó anteriormente, puedes generar un enlace a tu diseño XD que, al ser compartido con un cliente o gerente, les permitirá ver la maqueta y dejar comentarios sobre ella. Sin embargo, si quieres permitir que la persona se involucre más, es decir, darle privilegios de edición, esto no es posible actualmente.

Un punto fuerte que XD tiene sobre Figma, sin embargo, es la capacidad de añadir narración de voz para guiar a tu cliente a través de una demostración, una característica excelente si estás trabajando con personas en diferentes zonas horarias o que tienen horarios ocupados:

Ganador: Empate

Por qué un Empate

Ambas aplicaciones tienen características muy fuertes para la vista previa de documentos, especialmente para los clientes, incluyendo la capacidad de enviar un enlace que permite la inspección en el navegador.

Por un lado, Figma permite que otras partes interesadas interactúen directamente con el documento, y si hacen una demostración en vivo pueden ver el cursor moviéndose alrededor, o pueden mirar a través del modo de observación. También tiene la capacidad de incrustar documentos en los sitios web.

Y por otro lado XD te da la capacidad de grabar un recorrido de voz para un cliente, algo que podría ser súper útil cuando una conversación en tiempo real no es una opción. Especialmente para diseñadores web independientes, esta característica podría ahorrar mucho tiempo y potenciales problemas de comunicación cuando se usa en lugar de explicaciones escritas de maquetas.

Sección 4. Creación de Diseño

4a. Marcos de Figma vs. Mesas de trabajo de XD

Figma usa "marcos" mientras que XD usa "mesas de trabajo". Son similares en funcionalidad, así que ¿cuál es mejor y por qué?

Las mesas de trabajo de XD

Las mesas de trabajo de XD actúan como contenedores que representan ventanas gráficas que contienen diseños, p. Ej. una pantalla de teléfono frente a la pantalla de una tableta. Puedes crear tantas mesas de trabajo como desees y, al crear prototipos, puede vincular las mesas de trabajo para emular el flujo que un usuario podría seguir a través de un sitio o aplicación.

Marcos de Figma

Los marcos de Figma también actúan como contenedores de la misma manera que las mesas de trabajo, pero estos contenedores pueden representar tanto los puntos de vista como los sub-elementos de diseño, tales como botones, secciones de contenido, elementos de navegación y así sucesivamente.

Cuando se utilizan en el nivel superior para representar un puerto de visualización, los marcos tienen toda la funcionalidad que tienen las mesas de trabajo. Pero como pueden anidarse y usarse para crear botones, barras de navegación, etc., también aportan una mayor funcionalidad a estos elementos, como las cuadrículas y el diseño automático.

Ganador: Marcos de Figma

Por qué gana Figma

En pocas palabras, los marcos pueden hacer todo lo que las mesas de trabajo pueden hacer, pero las mesas de trabajo no pueden hacer todo lo que los marcos pueden hacer.

4b. Cuadrículas y guías

Guías

Tanto XD como Figma tienen guías.

Durante un buen tiempo XD no tenía guías y tendrías que emular torpemente su funcionalidad agregando rectángulos o líneas a tu página a las que otros objetos podrían ajustar su alineación. Puede que hayas encontrado este obstáculo en el flujo de trabajo en el pasado, pero desde entonces se han añadido guías, así que ten por seguro que la funcionalidad es ahora igual entre XD y Figma en este sentido.

Ambas aplicaciones también tienen cuadrículas, pero hay algunas diferencias en su funcionamiento, que se describen a continuación.

Cuadrículas de Adobe XD

En XD se pueden agregar cuadrículas a las mesas de trabajo. La cuadrícula de una mesa de trabajo puede ser establecida en una cuadrícula cuadrada o en un conjunto de columnas verticales. Una vez que se crea una cuadrícula, puede ser establecida como la cuadrícula por defecto para tu documento, de manera que pueda ser fácilmente aplicada a otras mesas de trabajo.

Cuadrículas de Figma

En las cuadrículas de Figma, también conocidas como "cuadrículas de diseño", pueden añadirse a cualquier marco, ya sea un marco de nivel superior que actúa como una mesa de arte, o un marco anidado que actúa como un sub-elemento de diseño. Esto significa que se pueden tener cuadrículas de diferente configuración anidadas dentro del mismo diseño.

Figma también te permite utilizar múltiples cuadrículas a la vez en un marco, con cada una superpuesta en la otra. Como tal, puedes tener una cuadrícula cuadrada y columnas y filas.

Una vez que se crea una cuadrícula puede ser guardada como un estilo de cuadrícula y aplicada a cualquier marco o componente. Puedes guardar tantos estilos de cuadrícula como quieras.

Ganador: Figma

Por qué gana Figma

Ambas aplicaciones tienen cuadrículas y guías, pero Figma te permite combinar tipos de cuadrículas, usarlas en elementos anidados y guardar múltiples estilos de cuadrículas.

4c. Diseño y emulación responsiva

Restricciones

Ambas aplicaciones tienen restricciones, que te permiten decir a los componentes que permanezcan en posición o que cambien de tamaño en relación con ciertos lados de su marco padre / mesa de arte. Proporcionan esencialmente los mismos ajustes, por lo que son equivalentes en función a todos los intentos y propósitos.

Sin embargo, hay funciones de emulación de diseño responsivo en cada aplicación que son bastante diferentes, así que echemos un vistazo a ellas.

XD

Repetir cuadrícula

XD tiene la función "Repetir cuadrícula", que es una excelente función de ahorro de tiempo. Para utilizarla puedes seleccionar cualquier elemento, o varios elementos, presiona el botón "Repetir cuadrícula" y tu selección se configurará automáticamente para que se repita tantas veces como quieras, en horizontal y/o en vertical. El elemento de la cuadrícula de repetición puede entonces cambiar de tamaño y hacer que el espacio entre los elementos se modifique según sea necesario.

Más información:

https://helpx.adobe.com/xd/help/create-repeating-elements.html

Redimensionamiento responsivo

XD también tiene la función de redimensionamiento responsivo, que trata de adivinar lo que es probable que necesites en un elemento dado. Luego aplicará las restricciones al elemento en consecuencia.

Como ocurre con muchas características, la utilidad de esto dependerá de tu flujo de trabajo particular. Es posible que se alinee con tu forma de trabajar y, por lo tanto, te ahorre mucho tiempo, o que a menudo tengas que anular las restricciones aplicadas automáticamente. La mejor manera de averiguarlo es hacer una prueba y ver cómo te ajustas.

Nota: Los componentes XD (también conocidos como símbolos) anteriormente no podían ser redimensionados, sin embargo ya no es así: https://helpx.adobe.com/au/xd/help/components.html#resize_component

Figma

Diseño automático

El autodiseño es la nueva característica de Figma y es muy avanzado e increíblemente útil para las maquetas de diseño web.

Permite cosas como:

Los botones se redimensionan automáticamente para adaptarse al ancho de tu texto interno
Contenedores que se expanden o contraen cuando se añaden o se quitan elementos infantiles
Aplicación de ajustes de relleno horizontal y vertical
Aplicando el "espaciado entre elementos", que se comporta efectivamente como márgenes
Arrastrar y soltar para ordenar los elementos de la lista, ya sea horizontal o verticalmente
Arrastrar y soltar elementos entre listas separadas

Además, puedes anidar un marco de diseño automático dentro de otro marco de diseño automático de configuración diferente.

Esto significa que puedes crear cuadrículas de manera efectiva usando marcos de diseño automático horizontales para las filas, con un marco de diseño automático vertical principal para cada columna. También puedes usar la anidación para crear diseños complejos como espacios de contenido multipost.

Estas características de autodiseño le dan a Figma la emulación más cercana al comportamiento real del navegador que aún no he visto en una aplicación de diseño / maqueta.

Más información

Selección inteligente

La selección inteligente puede que no sea necesaria tan a menudo ahora que Figma tiene un diseño automático, pero lo que te permite hacer es seleccionar múltiples elementos y ajustar rápidamente el espacio alrededor de ellos.

He visto esta función descrita como la respuesta de Figma a la función de cuadrícula de repetición de XD, sin embargo diría que, aunque te permite modificar el espaciado de forma similar, no se compara directamente. ya que no maneja la replicación automática de los elementos en una cuadrícula para ti.

Más información:

Ganador: Figma

Por qué gana Figma

Esta comparación es mucho más difícil de llamar, porque la función de cuadrícula de repetición de XD es fantástica, y el redimensionamiento de la respuesta puede ser útil en ciertos casos.

Sin embargo, la funcionalidad de selección inteligente de Figma ya era excelente, y ahora su funcionalidad de auto-diseño es el sistema más avanzado de su tipo que hemos visto en el diseño de interfaz de usuario / software de maqueta. Va a ser necesario que cualquier otra aplicación se ponga al día con el diseño automático, y mucho menos que lo supere.

4d. Creación de gráficos vectoriales

Adobe XD

Las herramientas de dibujo vectorial de XD incluyen herramientas de forma y una herramienta de lápiz. Sin embargo, no hay forma de editar los nodos de las formas predefinidas y la edición de los vectores dibujados con lápiz es limitada.

La idea general de la edición de vectores en XD es que se utiliza para el wireframing, y se cambia a Illustrator si se desea crear gráficos.

Figma

Figma también tiene herramientas de forma y una herramienta de lápiz, pero añade una herramienta de lápiz a mano alzada, y además de las formas predefinidas disponibles en XD tiene formas de estrellas y flechas.

Puedes editar los nodos de cualquier forma, ya sea predefinida o dibujada con el lápiz / bolígrafo, haciendo doble clic para entrar en el modo de edición de nodos. Figma también tiene la funcionalidad única de "red de vectores" por la que cualquier número de segmentos puede ramificarse desde un solo nodo, no solo uno o dos.

Las herramientas de edición vectorial de Figma te permiten crear muchos de los tipos de gráficos utilizados en el diseño de páginas web, como iconos, logotipos e ilustraciones.

Ganador: Figma

Por qué gana Figma

Si quieres crear gráficos desde cero puedes hacerlo dentro de Figma, mientras que XD no está equipado para esta tarea, requiriendo en su lugar una segunda pieza de software.

4e. Fuentes

Figma se integra con las fuentes de Google, mientras que XD se integra con las fuentes de Adobe. Ambos pueden usar fuentes instaladas localmente.

Ganador: Figma

Por qué gana Figma

Dado que esta es una comparación para los diseñadores web, y que Google Fonts es la biblioteca de fuentes web más utilizada, hace que la biblioteca de fuentes de Figma sea generalmente más útil en este sentido.

Dicho esto, si utilizas Figma para trabajos de diseño no web, puede que te resulte más útil tener acceso a las fuentes de Adobe. Además, Adobe tiene algunas fuentes web, por lo que podría valer la pena echar un vistazo a su colección para ayudarte a decidir si te aporta valor.

4f. Estilo

Hagamos un rápido repaso de las diferencias entre las opciones de estilo en Figma y XD

Figma tiene múltiples rellenos y trazos. XD tiene solo un relleno y un trazo.
Ambas te permiten controlar los ajustes de trazos avanzados como los extremos, los ingletes y la alineación de trazos.
Ambos tienen esquinas curvas y modos de fusión.
Ambos tienen efectos, y ambos tienen sombras paralelas, desenfoque de objeto/capas y desenfoque de fondo, pero solo Figma tiene un efecto de sombra interior.
Figma tiene ajustes de tipo avanzados adicionales que XD no tiene.

Ganador: Figma

Por qué gana Figma

La competencia en cuanto a estilo está muy reñida, pero Figma se destaca por sus múltiples trazos y rellenos, sombra interior y ajustes de tipo avanzados. Para trabajos no web esto sería menos significativo, pero solo Figma te permitirá diseñar los tipos de múltiples rellenos o múltiples sombras que son posibles a través de CSS.

Sección 5. Sistemas de diseño

Tanto XD como Figma tienen las tres piezas esenciales de funcionalidad necesarias para hacer sistemas de diseño:

Componentes (antes símbolos en XD)
Color / estilos de efecto
Texto / Estilos de caracteres

Veamos las formas en que estas tres funciones difieren, o son las mismas, entre XD y Figma.

Más información:

5a. Componentes

Tanto XD como Figma utilizan un sistema maestro e instancia con sus componentes, con la capacidad de anular las propiedades en las instancias de los componentes. Ambos también permiten componentes anidados.

Ambos pueden permitir el acceso a los componentes de un documento en otro. Con Figma esto se hace mediante la publicación de los componentes en la "Biblioteca del equipo", y en XD se hace con "recursos vinculados", por lo que los componentes pueden ser extraídos de los documentos de la nube.

Como se mencionó anteriormente, antes había un problema con los componentes en XD que no se podía hacer responsivo, pero con la introducción de restricciones eso ya no ocurre.

Ganador: Empate

Por qué un empate

Los componentes de Figma solían ser más avanzados que los símbolos de XD, pero Adobe realmente cerró la brecha en este caso. Los dos están ahora tan cerca el uno del otro en cuanto a la funcionalidad de los componentes que ninguno tiene grandes ventajas sobre el otro.

5b. Color / Estilos de efecto

XD

Los colores se guardan en XD seleccionando un objeto y luego haciendo clic en el botón + en la sección Recursos > Colores de la interfaz. Esto añadirá tanto los colores de trazo como los de relleno a la paleta. Serán nombrados de acuerdo a sus códigos de hexcodificación pero pueden ser renombrados, y pueden ser arrastrados y soltados para su clasificación.

XD no tiene una forma de guardar los efectos, como las sombras, como estilos.

Figma

Los colores se guardan en Figma seleccionando un objeto y luego haciendo clic en el botón que parece cuatro cuadrados cerca de las secciones de Relleno, Trazo o Efectos de la barra lateral derecha. Un nombre de tu elección puede ser proporcionado en este momento. Si utilizas la sintaxis categoría / nombre tus estilos se ordenarán automáticamente en grupos, por ejemplo, botones / nav. También se pueden arrastrar y soltar para su clasificación.

Figma también puede guardar efectos como estilos, como sombras o desenfoques.

Ganador: Figma

Por qué gana Figma

Este está muy cerca, casi lo suficiente como para llamar a un empate. Pero el hecho de que Figma tenga la capacidad de guardar efectos como estilos es muy útil para un sistema de diseño, así como la capacidad de elegir individualmente si guardar el trazo y los colores de relleno. La clasificación automática en grupos también es una característica útil.

5c. Texto / Estilos de caracteres

Tanto Figma como XD te permiten guardar nuestro estilo de letra, llamado estilo de texto en Figma o estilo de carácter en XD. La forma de guardar estos estilos es la misma que se utiliza para guardar los colores en cada programa.

Ambas aplicaciones te permiten guardar todas las opciones de estilo de fuente que ofrecen. La única diferencia significativa es que XD te permite también guardar un color por defecto para el estilo de caracteres. Puede ser anulado pero se usará cuando el estilo se aplique por primera vez.

Ganador: XD

En igualdad de condiciones, el hecho de que XD te permita establecer un color predeterminado para los estilos de los personajes es bastante útil, y en este caso le da ventaja.

Sección 6. Creación de prototipos

6a. Interacciones

Apoyo a las interacciones múltiples

En Figma se puede tener una interacción por cada artículo, por ejemplo, una interacción de vuelo o una interacción de clic.

En XD puedes tener múltiples interacciones por artículo, por ejemplo, una interacción de vuelo y una interacción de clic.

Veamos una lista de los disparadores de interacción, acciones, transiciones y opciones de facilitación disponibles en cada aplicación.

Figma

Disparadores

Al hacer clic
En el arrastre
Mientras navega
Mientras se presiona
El ratón entra
El ratón sale
Ratón hacia abajo
Ratón hacia arriba
Después de la demora

Acciones:

Navegar a (marco - usar para moverse entre marcos de tipo mesa de trabajo)
Abrir la superposición (marco)
Intercambiar con (cuadro - se usa para intercambiar en cuadros de tipo de componente alternativo, por ejemplo, botones, ver la siguiente sección para más información)
Volver
Cerrar la superposición
Abrir URL

Transiciones

Instantánea
Disolver
Animar inteligente (ver sección después de la siguiente)
Mover dentro
Mover fuera
Empujar
Deslizar hacia adentro
Deslizar hacia afuera

Aceleración

Acelera entrada
Acelera salida
Acelera entrada y salida
Lineal

XD

Disparadores:

Pulsa
Arrastra
Navegar por
Tiempo
Voz
Llaves
Gamepad

Acciones:

Transición (véase los tipos en la lista que figura a continuación)
Auto-animar (ver sección después de la siguiente)
Superposición
Reproducción del discurso
Mesa de trabajo previa
Cambio de estado (véase la siguiente sección)

Transiciones

Disolver
Deslizar a la izquierda
Deslizar a la derecha
Deslizar hacia arriba.
Deslizar hacia abajo
Empuja a la izquierda

Aceleración

Ninguno (alias lineal)
Acelerar salida
Acelerar entrada
Acelerar entrada y salida
Ajustar
Wind up
Rebote

Ganador: XD

Por qué XD gana

XD tiene una colección de disparadores que puedes usar para interacciones que Figma no tiene, en particular: voz, teclas y gamepad. También tiene reproducción de voz y acciones de cambio de estado que Figma no tiene. Como tal, XD facilita más tipos de diseños de interfaz de usuario como aplicaciones controladas por voz u orientadas o interfaces de juegos web.

Además, permite más de una interacción por elemento, lo que permite lograr prototipos con una funcionalidad más similar a su comportamiento en el navegador.

6b. Estados / Intercambio

Adobe XD

XD tiene una función de "estados" para facilitar el diseño de cosas como botones o interruptores.

En XD solo tienes que crear un componente, añadir un estado de flotador, y luego reestilizar el estado de flotador del componente maestro justo en su lugar. Cuando previsualices tu mesa de trabajo, automáticamente tendrás la interacción del flotador funcionando. Además, cada vez que añadas un componente a una mesa de trabajo, sus estados de vuelo, estados de conmutación, etc., ya estarán listos para funcionar.

Además, puedes crear tantos estados como necesites, más allá de los predeterminados y los que se mantienen flotando.

La única desventaja es que solo puedes usar un disparador de flotador para iniciar un estado de flotador, y no puedes usar uno para disparar otras acciones como moverse entre las mesas de trabajo.

Figma

En Figma no hay una función de "estado" explícita. Puedes crear cosas como efectos de flotar y cambiar de posición, pero para ello tendrás que crear dos componentes separados y animar entre ellos, ya sea cambiando con otro cuadro o abriendo una superposición.

Si intercambias entre cuadros puedes usar la animación inteligente para manejar las transiciones, pero tendrías que hacer un cuadro duplicado estilo mesa de trabajo para cada efecto de desplazamiento o de conmutación que quisieras crear. Por ejemplo, para mostrar tres estados de botones al pasar el ratón por encima necesitarías tres marcos duplicados, uno por cada estado al pasar el ratón por encima.

Si quieres trabajar dentro de un solo marco, puedes abrir una superposición, en la que la superposición es un marco que representa el nuevo estado, como un botón de estilo flotante. Sin embargo, con esta opción solo puedes usar transiciones de disolver o "mover dentro", y no animar de forma inteligente, lo que significa que no puedes crear algo como un efecto de diapositivas de conmutación.

También tendrías que cablear estos estados de conmutación cada vez que añadas una instancia de componente, a diferencia de los componentes de XD donde los estados están incorporados.

Ganador: Adobe XD

Por qué XD gana

Ahora mismo Figma no tiene un sistema de estados, sino más bien una solución alternativa que utiliza el intercambio para crear algo similar. El sistema de estados de XD por otro lado es robusto y proporciona más métodos para crear interacciones y emular la funcionalidad del navegador. También es más rápido y más conveniente de usar, ya que los estados pueden ser guardados en componentes y están presentes cuando se agregan dichas instancias de componentes.

6c. Animación

La disponibilidad de animaciones en XD fue una característica fuertemente diferenciadora entre ella y Figma durante algún tiempo, sin embargo Figma también ha añadido recientemente en las animaciones, reduciendo la brecha en esta categoría.

Ambas aplicaciones tienen una funcionalidad similar, por lo que se puede hacer la transición entre dos mesas de trabajo / marcos de estilo de mesa de trabajo de nivel superior, y cualquier capa con nombres coincidentes a través de esos marcos puede tener animaciones aplicadas automáticamente a ellos.

Sin embargo, con XD una diferencia clave es que también puedes usar auto-animación para hacer la transición entre los estados de los componentes, no solo entre marcos.

Además, XD soporta la interpolación entre más propiedades que Figma. Echemos un vistazo a la interpolación disponible en cada una de ellas:

Propiedades interpoladas de Animación Inteligente de Figma

Escala
Posición
Opacidad
Rotación
Relleno sólido
Relleno de degradado

Ver: https://help.figma.com/article/365-smart-animate#how

XD Auto-Animado Propiedades Interpoladas

Tamaño del borde
Opacidad
Esquina redondeada
Posición (X/Y)
Tamaño (W/H)
Rotación
Tamaño del texto
El espacio entre caracteres
Espaciado de los párrafos
Espaciado entre líneas
Trazos

Ver: https://helpx.adobe.com/xd/kb/supported-auto-animate-features-in-xd.html#main-pars_text

Más información

Ganador: XD

Por qué XD gana

XD permite animar entre los estados de los componentes así como las mesas de trabajo / marcos, y soporta la interpolación en más propiedades en el proceso. Nótese en particular su capacidad de interpolar trayectorias, lo que significa que puedes hacer una morfología entre una forma y otra. Estos factores lo hacen el más fuerte en la animación en este momento.

Sección 7. Transferencia

7a. Generación de código

Adobe XD

XD puede generar código CSS. Para ver este código tienes que generar un enlace de desarrollo y luego visitar dicho enlace en un navegador. Si hay algún cambio en el documento tendrás que regenerar este enlace y actualizarlo.

Figma

Figma puede generar CSS, Swift para iOS y XML para Android.

Para ver el código generado solo tienes que abrir la pestaña Código en la barra lateral derecha. Si hay un cambio en el documento, el código se regenerará en tiempo real, automáticamente.

Figma también te permitirá copiar directamente el código CSS o SVG haciendo clic con el botón derecho del ratón en un objeto, eligiendo copiar / pegar, y luego seleccionando Copiar como CSS o Copiar como SVG.

Ganador: Figma

Por qué gana Figma

Figma puede generar código para iOS y Android, así como CSS. Ese código es mucho más fácil de acceder en línea en la aplicación Figma que el proceso de XD de generar un enlace y luego visitarlo en el navegador. El código de Figma se actualiza en tiempo real, y el CSS y el SVG pueden ser copiados directamente del lienzo. Estas características se suman para hacer de Figma un claro ganador en la generación de código.

7b. Exportación de imágenes

Formatos

Tanto XD como Figma pueden exportar imágenes como PNG, SVG, PDF y JPG.

Densidad de píxeles

Figma puede exportar PNGs y JPGs en: 0,5x, 0,75x, 1x, 1,5x, 2x, 3x, 4x

XD puede exportar JPGs a 1x o 2x. Puede exportar PNGs a 1x, 2x, 3x, o si exporta para Android, 75% ldpi, 100% mdpi, 150% hdpi, 200% xhdpi, 300% xxhdpi, 400% xxxhdpi.

Ajustes de calidad

XD tiene la capacidad de establecer la calidad de la imagen como un porcentaje en la exportación de JPG, mientras que Figma no lo hace, lo que significa que después de exportar desde Figma es probable que tenga que re-exportar para conseguir que el tamaño del archivo se reduzca a una cantidad adecuada para la web.

Ganador: XD

Por qué XD gana

Mientras que Figma tiene un poco más de flexibilidad con los ajustes de exportación de la densidad de píxeles, XD incluye ajustes de calidad, y para los diseñadores web eso es muy importante. Por esta razón, y para los diseñadores web específicamente, XD es el ganador en la exportación de imágenes.

Sección 8. Misceláneas y extras

8a. Guardar archivos

Nota: Aquí estamos hablando de guardar tu archivo de documento, no de guardar archivos de imagen como se ha explicado en la sección anterior.

Figma

Los archivos Figma se guardan automáticamente en línea y pueden ser guardados localmente como archivos .fig. Ambos tipos de guardado están disponibles en todos los niveles de precios.

Figma también le permite mantener una extensa colección de historial de archivos, permitiéndote volver a las versiones anteriores en cualquier momento. El nivel gratuito tiene 30 días de historia mientras que los niveles pagos tienen una historia ilimitada.

XD

Los archivos XD pueden ser guardados en documentos de la Creative Cloud en el nivel gratuito. En los niveles de pago también pueden ser guardados localmente como archivos .xd.

XD también permite mantener historiales de documentos. Por defecto estas versiones duran 30 días, con la opción de marcar versiones específicas para guardar. No pude confirmar si hay una diferencia entre los niveles gratuitos y pagos para el historial de documentos en Figma, pero por la información disponible parece ser la misma en ambos.

Ganador: Figma

Por qué gana Figma

Tanto Figma como XD tienen almacenamiento local y en línea / en la nube, sin embargo Figma proporciona ambas opciones en su nivel gratuito mientras que XD requiere el pago por el almacenamiento local y tiene topes de almacenamiento en la nube. Además, la función de auto-guardar de Figma es muy conveniente y ayuda a prevenir la pérdida de trabajo.

8b. Trabajar sin conexión

XD

XD te permite trabajar sin conexión en cualquier momento, sin embargo, necesitarás una cuenta de pago para tener guardados tus archivos localmente antes de estar sin conexión.

Figma

Figma permite trabajar sin conexión, pero es necesario tener una conexión a Internet cuando se inicia la sesión para poder cargar correctamente el software. Después de eso puedes seguir trabajando sin conexión.

Ganador: XD

Por qué XD gana

XD es la única opción de las dos que permite el trabajo completamente fuera de línea. Si vives o viajas en un área con conectividad intermitente a Internet, XD será la mejor opción.

8c. Interoperabilidad

Tanto XD como Figma tienen interoperabilidad con Sketch, ya que permiten abrir los archivos de Sketch y seguir trabajando en ellos. Veamos con qué otro software puede interoperar cada uno.

Adobe XD

Photoshop

Puedes hacer clic con el botón derecho del ratón en una imagen PNG, JPG, BMP o GIF que haya sido añadida a un documento XD y seleccionar Editarlo en Photoshop. La imagen se abrirá en Photoshop, y después de hacer tus ediciones puedes guardar el archivo y tus cambios se reflejarán en XD.

También puedes abrir directamente un PSD en XD, una función muy útil si deseas trabajar con los recursos de plantillas que hayas adquirido de otros diseñadores que fueron hechas en Photoshop.

After Effects

XD ya tiene una fuerte funcionalidad de animación con auto-animación, pero se pueden crear animaciones aún más sofisticadas y micro-interacciones trayendo After Effects al flujo de trabajo. Solo tienes que seleccionar una mesa de trabajo de la capa que quieres animar y luego exportarla a After Effects, donde puedes montar tus animaciones.

Illustrator

Se mencionó anteriormente que la ilustración vectorial no se puede hacer realmente en línea en XD porque en su lugar la idea es que se utiliza Illustrator como parte de su flujo de trabajo. Para usar Illustrator para editar vectores ya en tu documento puedes seleccionarlos y luego copiar y pegar vectores directamente en un lienzo en Illustrator, y luego copiar y pegar de nuevo cuando hayas terminado de editar. Del mismo modo, puedes copiar vectores que hayas creado en Illustrator directamente en XD.

Más información:

https://helpx.adobe.com/au/xd/help/working-with-external-assets.html

Figma

Figma no está diseñado para interoperar con otros programas de diseño como XD. Sin embargo, lo que puedes hacer es copiar los vectores creados en Figma como SVG, y luego la mayoría de los programas de edición de vectores, (como Affinity Designer o Inkscape), te permitirán pegar esos vectores en su lienzo para su posterior edición.

Ganador: XD

Realmente no hay ninguna competencia significativa entre Figma y XD en cuanto a la interoperabilidad. Figma no está diseñado para ello, mientras que XD trabaja con otro software en la suite Creative Cloud. Es cierto que Figma ya tiene herramientas de edición vectorial incorporadas, pero XD definitivamente tiene la ventaja de poder facilitar una edición más avanzada a través de Illustrator, Photoshop y After Effects.

8d. Integraciones

Las integraciones con software de terceros es algo que estoy clasificando por separado a la interoperabilidad, donde la primera facilita una parte del flujo de trabajo fuera de la creación de la maqueta, mientras que la segunda se utiliza durante el proceso de diseño. Echemos un vistazo a una lista de las integraciones de soporte de XD y Figma.

Nota: En algunos casos puede haber plugins que permiten integraciones adicionales, pero nos estamos centrando en las integraciones oficiales.

Adobe XD

Vitrina

Behance

Transferencia

Zeplin
Avocode
Sympli

Animación avanzada y creación de prototipos

ProtoPie
Kite Compositor

Equipo y gestión de proyectos

Jira
Microsoft Teams
Slack

Figma

Vitrina

Figma Community (beta)
Dribbble

Transferencia

Zeplin
Avocode

Animación avanzada y creación de prototipos

ProtoPie
Principle
Flinto

Equipo y gestión de proyectos

Jira
Trello
Recibir notificaciones de comentarios en Slack

Guías de estilo

Zeroheight

Compartir archivos

Dropbox

Ganador: Empate

Por qué un empate

Figma puede tener más integraciones que XD, con 12 vs. 9, pero eso en sí mismo no es inherentemente significativo. Más bien, es si las aplicaciones que utiliza en su flujo de trabajo están soportadas lo que determina el valor de estas integraciones. Como tal, dado que ambas tienen una sólida oferta de integraciones en múltiples categorías, llamaremos a esta un empate.

8e. APIs

Figma tiene una API que permite que los archivos de diseño se impriman como datos JSON, puedes leer y escribir comentarios, y generar archivos de imagen. Esto permite el desarrollo de todo tipo de integraciones en un flujo de trabajo de diseño basado en Figma. Por ejemplo,

Uber usó el API para mostrar diseños en progreso en los televisores de su oficina, y permitir al personal examinarlos a través de un navegador interna basada en una vitrina.
Microsoft utilizó el API para facilitar un proceso automatizado de entrega de diseños que, según estimaron, redujo su flujo de trabajo en un 70%.
GitHub construyó un sistema que permite que todo su sistema de iconos sea administrado desde un único archivo de diseño.

El API es accesible abiertamente a cualquier persona con una cuenta gratuita o de pago de Figma.

Ganador: Figma

Por qué gana Figma

XD no tiene ningún tipo de API. Figma sí, y se ha utilizado para fines muy beneficiosos hasta ahora.

Más información:

8f. Plugins

Durante un tiempo solo XD tenía plugins y era una ventaja bastante significativa sobre Figma. Sin embargo, ahora tanto XD como Figma tienen plugins, por lo que la fuerza de cada uno en esta categoría probablemente se reducirá a cuán aplicables son los plugins de cada aplicación a su flujo de trabajo específico.

Examina los plugins de XD: https://www.adobe.com/products/xd/resources.html

Examina los plugins de Figma: https://www.figma.com/c

Ganador: Empate

Tanto Figma como XD tienen un saludable ecosistema de plugins en este momento con muchas herramientas útiles hechas por la comunidad.

Nota: Figma tiene la característica adicional de que en el nivel de las organizaciones se pueden crear y utilizar plugins privados, sin embargo, dado que solo está en el nivel más alto, probablemente no sea suficiente característica diferenciadora para decir que el sistema de plugins de Figma será más valioso para la mayoría de los diseñadores.

Sección 9. Puntuaciones finales

Figma gana: 14

1. Precios
2. Plataformas soportadas
3a. Colaboración
3b. Compartir
4a. Marcos vs. Mesas de trabajo
4b. Cuadrículas y guías
4c. Diseño y emulación responsiva
4d. Creación de gráficos vectoriales
4e. Fuentes
4f. Estilo
5b. Color / Efecto de estilos
7a. Generación de código
8a. Guardar archivos
8e. APIs

Adobe XD gana: 7

5c. Texto / Estilos de caracteres
6a. Interacciones
6b. Estados / Intercambio
6c. Animación
7b. Exportación de imágenes
8b. Trabajar sin conexión
8c. Interoperabilidad

Empates: 4

3c. Previsualización
5a. Componentes
8d. Integraciones
8f. Plugins

Ganador general: Figma, 14 a 7

En esta etapa Figma sigue siendo un ganador bastante dominante sobre Adobe XD con 14 victorias a 7, y los 4 puntos restantes de consideración un empate. Sin embargo, todavía hay condiciones en las que podrías preferir Adobe XD, y es que si las 7 áreas que gana son más importantes para ti que las 14 áreas que gana Figma.

Las fuerzas de cada una

Fortalezas de XD: Prototipos, Creative Cloud, fuera de línea

XD tiene una buena oportunidad de ser mejor para ti si ya estás trabajando en el ecosistema de Adobe. Si estás en el software de Adobe y quieres algo mejor para el diseño de la interfaz que AI o el PS, pero aun así estás en la familia de la Creative Cloud, XD es tu solución.

Adicionalmente, el área de fuerza de XD en este momento es el prototipado, habiendo ganado en nuestras tres subsecciones de prototipado: Interacciones, Estados y Animación.

XD también puede ser una mejor opción para ti si no tienes acceso a internet fiable o quieres usar software de escritorio nativo / no basado en la web.

Fortalezas de Figma: Colaboración, diseño, plataforma cruzada

Si la colaboración es una alta prioridad para ti y tu equipo, Figma no tiene rival en este espacio. Ha sido construida desde cero pensando en la colaboración y como tal, será difícil para cualquier otra aplicación eliminarla del primer lugar en un futuro próximo.

También actualmente supera a XD de manera considerable como herramienta de diseño, llevándose los triunfos en las seis subsecciones de diseño: Marcos vs. Mesas de trabajo, Cuadrículas y Guías, Diseño y Emulación reesponsiva, Creación de gráficos vectoriales, Fuentes, Estilo.

Y finalmente, si tienes miembros del equipo que utilizan Linux o ChromeOS, Figma tiene el soporte multiplataforma para proporcionarlo a estas plataformas.

La carrera continúa

Cuando Adobe XD salió por primera vez, no era realmente una competencia significativa para Figma, actuando más como una mejor opción para los diseñadores de interfaces basados en la Creative Cloud de lo que era Photoshop o Illustrator. Sin embargo, desde entonces, mientras que Figma puede estar todavía por delante en este momento, XD ciertamente ha cerrado la brecha bastante.

La competencia entre Figma y XD continúa, y cada programa está ciertamente empujando al otro a seguir avanzando en su juego. Vemos que las características que estaban exclusivamente en uno aparecen en el otro de forma bastante regular. La presión que se aplican unos a otros para innovar está dando excelentes resultados para nosotros como diseñadores.

Así que cualquiera que decidas usar en 2020, mantente atento a lo que hace el otro, ya que, quién sabe, podría convertirse en tu nuevo favorito en cualquier momento.