Componente de lista para Figma: 20 variantes

Visión General del Componente

Usa patrones de lista para organizar registros relacionados, opciones de navegación y contenido repetido. Deja claro el estado y la siguiente acción para que el componente se entienda de un vistazo. Alinea las etiquetas y la jerarquía visual con la pantalla que lo contiene.

Organizando información

Alinea los elementos por su etiqueta, detalles y acción principal; usa separadores cuando faciliten la lectura. Mantén breves las etiquetas y usa el espaciado o los iconos para reforzar el mensaje sin depender solo del color.

Tipos y Variantes

Patrones flexibles de lista en Emvi UI:
- Lista Simple: filas solo con texto para contextos mínimos.
- Lista con Media: avatar/miniatura + título + texto secundario.
- Lista con Icono: iconos iniciales para reconocimiento rápido.
- Lista de Navegación: filas con chevrón, indicadores de selección o badges.
- Densa/Compacta: paddings reducidos en vistas cargadas de datos.
- Dividida/Agrupada: encabezados de sección con agrupación fija o pegajosa. Las variantes son conscientes de tema (claro/oscuro) y se rigen por tokens como list.item.gap, list.item.padding, list.divider y list.state.selected.

Tamaños, Espaciado y Escala

Las filas de lista están disponibles en SM, MD y LG:
- SM: paneles utilitarios, menús secundarios e interfaces densas.
- MD: por defecto en ajustes, directorios y feeds.
- LG: contextos táctiles, filas con media y énfasis en legibilidad. El ritmo vertical se logra con alturas de ítem consistentes, gaps internos (8–12 px) y divisores coherentes. Mantén objetivos táctiles ≥44×44 px y alinea iconos/media en una línea base común para una estabilidad visual sólida en todas las resoluciones.

Estados y Comportamiento

Estados clave: default, hover, foco visible, pressed/active, seleccionado, deshabilitado. Opcionales: no leído/nuevo (barra o punto de acento), error/advertencia (acento lateral) y esqueletos de carga para mejorar rendimiento percibido. Las listas pueden ser estáticas o interactivas: prioriza hacer clic en toda la fila o usa affordances explícitas (checkboxes, switches, menús de desbordamiento) según la prioridad de la tarea y la densidad disponible.

Integración y Uso

Compón listas con contenedores semánticos (<ul>/<ol>) y elementos (<li>). Para filas interactivas, utiliza enlaces/botones con roles adecuados. Con Tailwind (flex, items-center, gap-3, py-2, px-3) fija alineaciones y espaciados. Mantén ranuras consistentes: leading (icono/avatar) → contenido (título + secundario) → trailing (acciones/badges). Usa divisores o separadores inset al agrupar o enfatizar jerarquía.

Accesibilidad

Emplea listas semánticas para contenido estático y botones/enlaces para filas accionables. Garantiza anillos de foco visibles, navegación por teclado (Arriba/Abajo; Enter/Espacio para activar) y estados ARIA para selección (aria-selected) o página actual (aria-current). Proporciona alternativas textuales para iconos/avatares y conserva el contraste en fondos de hover/selección y en divisores. Evita usar solo color para indicar selección; añade forma o iconografía donde aplique.

Integración con Figma y Tailwind

Figma: componente con variantes por tamaño (SM/MD/LG), estados, media inicial (ninguno/icono/avatar/miniatura), densidad (una/dos líneas) y elementos finales (badge/chevrón/switch/ninguno). Auto Layout asegura gaps y paddings consistentes. Tailwind: construye filas con flex, paddings tokenizados y clases de estado (hover:bg-*, focus-visible:ring-2, aria-selected:bg-*). Los tokens unifican espaciado y tipografía con otros componentes para un theming predecible.

Buenas Prácticas de Implementación

- Haz las filas escaneables: un texto primario fuerte, una línea secundaria opcional y metadatos concisos.
- Prioriza la interacción a nivel de fila; evita múltiples objetivos pequeños.
- Mantén tamaños de media consistentes (p. ej., 40×40) y alineación en la misma línea base.
- Controla la densidad con SM/MD/LG y evita mezclar densidades en la misma lista.
- Usa esqueletos o carga progresiva en feeds extensos.
- Comunica selección con color e iconografía; conserva el foco visible para usuarios de teclado.

Presentando elementos relacionados

Las listas son perfectas para presentar elementos relacionados de manera clara y concisa. Agrupan elementos similares, facilitando que los usuarios comparen y contrasten información. Por ejemplo, una lista de características en una página de producto permite a los usuarios ver rápidamente lo que ofrece un producto sin tener que revisar párrafos de texto.

Mejorando la legibilidad

Las listas mejoran la legibilidad al crear un diseño limpio y organizado. Los puntos de viñeta o las listas numeradas proporcionan separación visual entre elementos, lo que mejora la experiencia general del usuario. Este formato es especialmente útil para resaltar puntos clave, asegurando que la información importante destaque y sea fácil de digerir. Nuestro UI KIT incluye componentes de lista personalizables que pueden adaptarse a cualquier diseño, garantizando claridad y coherencia al presentar información.