Figma es impresionante ... pero tiene un defecto fundamental

Actualización: Figma abordó muchos de estos problemas a partir de la versión 3.6.4.

La semana pasada comencé a usar Figma para construir un sistema de diseño desde cero. Figma es increíblemente rápido y bien pensado. Su sistema de componentes es superior al Sketch en muchos aspectos. Pero, me encontré trabajando muy lentamente. Tomó un tiempo diagnosticar el problema; resultó ser el panel de capas! Estoy pasando demasiado tiempo buscando en las capas.

Figma ha empaquetado mucha funcionalidad en su Panel de capas. Y el panel parece estar colapsando bajo presión. Aquí hay algunas sugerencias para fortalecer la base.

No cambie el color del texto para capas de componentes

Cuando todo es morado, nada es morado.

Figma (izquierda) tiene poco contraste y legibilidad en comparación con Sketch (derecha)

Figma usa texto morado para las capas de componentes. Cuando eres un fanático del sistema de diseño como yo, usas muchos componentes anidados. Esto significa que la mayoría de los nombres de sus capas son morados. Esto hace que el panel sea muy difícil de leer. Compare con Sketch y sienta cómo se relajan sus ojos.

Además, observe cuánto mejor se destacan los íconos de los símbolos morados en Sketch junto al texto negro. Los iconos de componentes en forma de diamante de Figma son demasiado ligeros e insustanciales.

Diferenciar visualmente las filas

Las capas pueden tener cualquier nombre y difieren mucho entre proyectos. En Figma, es difícil analizar visualmente las filas cuando escanea verticalmente. Para solucionar esto, simplemente alterne el color de la fila. Es obvio, pero efectivo. Este problema fue resuelto por hojas de cálculo hace años. No hay necesidad de innovar aquí.

Los grupos son carpetas

Esto debería ser sencillo. Los grupos son básicamente carpetas. Dales un ícono de carpeta. Mirando Sketch and Invision Studio, es fácil encontrar los grupos. Es un modelo probado y verdadero que todos ya han aprendido.

Pero, debido a la capacidad única de Figma para anidar marcos y manipular componentes directamente, el concepto de grupos se ha vuelto complicado. Se han indexado en exceso en la publicación de anuncios para estas funciones, lo que dificulta la diferenciación de grupos de otras capas. En su lugar, optimice para un reconocimiento rápido y use una capacidad sutil para indicar cuándo es un componente.

Por cierto, ¿alguna vez notaste cómo los grupos de Sketch se contraen automáticamente cuando no los estás usando? Esto facilita el escaneo y reduce dinámicamente la altura vertical del Panel de capas.

Haga que el marco superior se destaque

En el panel Capas, es difícil saber dónde termina una pantalla y comienza otra. Esto se debe a que los marcos se pueden anidar. El marco del contenedor principal tiene un sutil fondo gris, pero esto no ayuda mucho cuando escanea a través de docenas de pantallas. Para el marco superior, perdería el ícono y lo haría destacar más visualmente.

Color de resaltado consistente

Otra opción extraña es cambiar el color de resaltado cuando selecciona una capa Componente. Su resaltado es púrpura en lugar del azul predeterminado. El problema es que el resto de la aplicación te ha entrenado para buscar el azul. Esto significa que cuando tiene un símbolo seleccionado, no parece que haya nada resaltado. Y nunca se vuelve intuitivo. Quédese con el azul predeterminado para todo y elimine los resaltados secundarios.

¿Más fácil de analizar?

Esperemos que esta sea una retroalimentación útil para las personas inteligentes en Figma. Me doy cuenta de que es mucho más fácil criticar desde el exterior sin comprender completamente la audiencia, la estrategia y las limitaciones. Me ha impresionado mucho el producto y me encanta el modelo.