Componentes Pagination y Avatar

diseño de paginación y avatar de usuario

Hoy liberamos la versión 2.0 del UX fomo Design system, contiene varios ajustes y mejoras, una nueva propiedad booleana que permite mostrar u ocultar el bloque “header” del componente Text field, y la primera versión de los componentes Pagination y Avatar.

A continuación te daré más detalles de los nuevos elementos de inferfaz que podrás usar en tus diseños de Figma.

Antes te diré que la actualización que hicimos en el componente Text field la hicimos para reutilizar el INPUT en el componente Pagination.

Pagination

Es una paginación de toda al vida, pero la vamos a iterar bastante, por lo pronto contiene:

Variantes Desktop, Tablet y Mobile.

Tiene botones First page, Previous, Numbers, Next y Last page.

Campo “Go to” para que el usuario pueda introducir el número de página al que quiere ir.

Para seleccionar la cantidad de ítems por página que se quieren mostrar se incluye también un campo “Item per page” .

Ambos campos son propiedades booleanas presentes -por ahora- en la variante Desktop, es decir, los puedes mostrar u ocultar desde el panel para controlar el comportamiento del componente.

Avatar

La primera versión del componente avatar cuenta con:

Tamaños Large, Medium y Small.

Por el momento sólo puedes incrustar una fotografía o ilustración con comportamiento Fill.

Este componente también recibirá mejoras en próximas versiones.

Te invito a explorar esta nueva versión y a buscar bugs y posibles mejoras.

Te lo digo siempre, tu feedback es oro puro.

Gracias.

Acerca de Juanpol

Product Designer en Magnific. Combino diseño, código e IA para crear mejores experiencias y agentes que transforman la forma en que diseñamos y construimos.

¿Te lo mando por correo?

Las siguientes notas de trabajo, en tu bandeja. Una o dos veces al mes.

Ver la newsletter