Componente de indicador de pasos para Figma: 196 variantes

Visión General del Componente

Usa patrones de indicador de pasos para organizar procesos de bienvenida, pago y otras tareas por pasos. 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.

Guía de los usuarios a través de pasos secuenciales

Nombra cada paso, diferencia las etapas completadas y pendientes y facilita localizar la acción requerida. Mantén breves las etiquetas y usa el espaciado o los iconos para reforzar el mensaje sin depender solo del color.

Mejora de la navegación y la interacción

En Figma, compara las variantes del componente dentro de una pantalla real del producto. Revisa el espaciado, el contraste y las etiquetas en los estados relevantes y adapta el patrón al sistema de diseño del equipo. Documenta la variante y los estados elegidos para mantener la coherencia entre pantallas.

Personalización y adaptabilidad

Los componentes de pasos modernos ofrecen opciones de personalización como etiquetas de pasos, iconos, animaciones e indicadores de progreso. Esto permite a los diseñadores adaptar la apariencia y el comportamiento de los pasos para que coincida con la identidad visual y los requisitos de usabilidad de su aplicación.

Tipos y Variantes

Variantes comunes:
- Horizontal (Lineal): pasos secuenciales con conectores; patrón principal Siguiente/Anterior.
- Horizontal (No lineal): navegación libre entre pasos visitados/validos.
- Vertical: etiquetas y contenido apilados; ideal para formularios largos.
- Compacto/Denso: paddings reducidos para UIs estrechas.
- Con Números / Con Íconos: contadores numéricos o íconos semánticos por paso.
- Ubicación Alternativa de Etiqueta: debajo, lateral o solo tooltip en anchos reducidos.
- Estados: actual, completado (check), error (badge), opcional (subtexto). Tokens de coherencia: stepper.step.size, stepper.icon, stepper.connector, stepper.state.current, stepper.state.complete, stepper.state.error, stepper.label.

Tamaños, Espaciado y Escala

Escalas SM/MD/LG:
- Indicadores: 20–24–28 px con conectores de 2 px por defecto.
- Espaciado de etiqueta: 6–8–10 px; conectores 12–16–20 px.
- Áreas táctiles: ≥44×44 px en pasos y controles clicables.
- Responsive: colapsar etiquetas a tooltips o cambiar a vertical bajo cierto ancho. Truncar etiquetas largas con elipsis y exponer el texto completo en title o tooltip. Las líneas base consistentes entre indicadores, etiquetas y ayudas mantienen el ritmo visual a través de breakpoints y temas.

Estados y Comportamiento

Estados clave: incompleto, actual, completado, error, deshabilitado y opcional. Los steppers lineales controlan el avance con validación; los no lineales permiten saltos a pasos visitados/validos. Mantén transiciones sutiles; confirma completado tras éxito del servidor cuando aplique. En operaciones asíncronas, muestra feedback y desactiva navegación hasta terminar. Teclado: flechas para moverse, Home/End para saltar, Enter/Espacio para activar. En móvil, desplaza el contenido actual a la vista al cambiar de paso.

Accesibilidad

Expón semántica de progreso con aria-current="step" en el disparador activo y enlaza disparadores y paneles con aria-controls/aria-labelledby. Usa role="tabpanel" en el contenido y alterna hidden/aria-hidden. Proporciona resúmenes de error por paso, no solo color. Respeta reducción de movimiento y gestiona foco de forma determinista: tras cambiar de paso, mueve el foco al encabezado o al primer campo del panel. Garantiza contraste suficiente en conectores, indicadores y etiquetas.

Integración con Figma y Tailwind

Figma ofrece variantes por orientación (horizontal/vertical), densidad (compacta/cómoda), indicador (número/ícono) y estado (actual/completado/error/deshabilitado). Auto Layout mantiene gaps y conectores consistentes; las propiedades del componente alternan etiquetas, ayudas y banderas de opcional. En Tailwind, compón con utilidades flex/gap, estilos de foco visible y variables CSS (p. ej., --step-connector, --step-current-bg, --step-complete-bg) para sincronizar temas entre claro/oscuro y paletas premium.

Buenas Prácticas de Implementación

- Mantén entre 3–7 pasos; fusiona micro-pasos en secciones inline cuando sea posible.
- Etiquetas concisas y orientadas a la acción; usa marcadores opcional/obligatorio con cuidado.
- Bloquea el avance solo en validaciones esenciales; permite Guardar y continuar.
- Persiste estado (local o servidor) en cada transición; protege contra recargas.
- Prefiere steppers verticales para formularios; horizontales para tareas breves.
- En móvil, auto-scroll al contenido actual y agrega un paso de revisión antes de enviar.