Animación de carga con Dynamic skeleton

Ya está disponible la versión la versión 1.9 del UX fomo Design system, centrada especialmente en la aplicación de estados dynamic skeleton a muchos de los componentes del sistema de diseño.

Te cuento…

En el segundo directo de la semana pasada nos dedicamos a completar y pulir varios de los elementos que hicimos en versiones anteriores.

Primero afinamos el componente dropdown button.

Realizamos ajustes en las conexiones de sus variantes para asegurarnos que todo funcionará correctamente a la hora de hacer prototipos.

La accesibilidad fue otro de los temas que tocamos durante el directo.

Creamos nuevos tamaños y cambiamos el color del componente progress bar.

No fueron cambios estéticos; lo que buscábamos es hacer un diseño más accesible y fácil de usar.

Qué es un Dynamic skeleton

Después hicimos magia aplicando el componente dynamic skeleton.

¿Suena rimbombante?

Un pelín.

Pero es la mejor forma de explicar que a partir de esta versión del sistema de diseño, los estados skeleton se ajustan al ancho del contenido que hayamos definido y configurado en otros estados del componente, como Enabled, Hovered, Focused. etc.

Esto aplica a los componentes button, chips, dropdown-button, icon-button, text-field, textarea y tabs.

De verdad te lo digo.

Si quieres prototipar y obtener una experiencia más real, tienes que usar dynamics skeleton.

Puede que las mejoras que te comento sean “menores”, pero aunque puedan parecer pequeñas en un principio, son las que realmente elevan la calidad y funcionalidad de nuestros diseños.

Cada ajuste está pensado y ejecutado con el objetivo de hacer nuestra experiencia de usuario más integrada y agradable.

Compartido bajo licencia Creative Commons 4.0

Y tranquilidad, que en la versión 2.0 liberaremos nuevos componentes.

Mientras tanto dime pls…

¿Qué te parecen los cambios?

¿Hay algo en particular que te gustaría ver en futuras versiones?

Recuerda, este design system lo construimos juntos y tu feedback es oro puro.

Muchas gracias.