Un vocabulario compartido es la parte más barata de un sistema de diseño. Cuando una diseñadora dice popover y un desarrollador construye un tooltip, uno de los dos tiene que rehacerlo. Estos son los nombres en los que coinciden la mayoría de los sistemas de diseño, agrupados por lo que hace el componente.
Superposiciones y mensajes
- Tooltip: una etiqueta de texto corta que aparece al pasar el cursor o enfocar y señala un elemento. Explica, y nunca contiene nada en lo que hacer clic.
- Popover: un panel flotante anclado a un disparador. Puede contener elementos interactivos, como un menú corto o un formulario pequeño.
- Toast: un mensaje breve en el borde de la pantalla que desaparece solo. Confirma algo sin interrumpir.
- Banner: un mensaje de ancho completo en una página o sección que se queda hasta que se cierra o se resuelve el problema.
- Diálogo modal: una ventana sobre la página que bloquea todo lo que hay detrás hasta que respondes. Úsalo para decisiones que no pueden esperar.
- Panel lateral (drawer): un panel que entra desde un borde de la pantalla para contenido secundario, filtros o navegación.
Navegación y estructura
- Migas de pan (breadcrumb): un rastro de enlaces que muestra dónde está la página actual dentro del sitio.
- Paginación: controles numerados que dividen una lista larga en páginas.
- Pestañas (tabs): una fila de etiquetas que cambian entre vistas de contenido distinto en la misma zona.
- Stepper: una secuencia numerada que muestra los pasos de un proceso, cuáles están hechos y en cuál estás.
- Control segmentado: un grupo compacto de dos a cinco opciones unidas donde exactamente una está seleccionada.
- Acordeón: encabezados apilados que se expanden para revelar su contenido.
Estado y visualización
- Insignia (badge): un marcador pequeño, a menudo un número o un punto, unido a otro elemento para mostrar una cuenta o un estado.
- Chip: una píldora compacta para un filtro, una etiqueta o un valor ingresado, a menudo seleccionable o removible.
- Pila de avatares: fotos de perfil superpuestas que terminan en un número para quienes no caben.
- Skeleton: un relleno gris con la forma del contenido que se está cargando.
- Barra de progreso: una barra que se llena a medida que avanza una tarea.
- Tecla (keycap): una pequeña etiqueta con forma de tecla que muestra un atajo de teclado.
Campos
- Interruptor (toggle): enciende o apaga un ajuste y tiene efecto de inmediato.
- Casilla (checkbox): una casilla cuadrada para elegir cualquier cantidad de opciones de una lista, o para aceptar una sola cosa.
- Botones de opción (radio): botones redondos donde elegir uno quita los demás, para exactamente una opción de una lista corta.
- Deslizador (slider): una pista con una manija que se arrastra para elegir un valor dentro de un rango.
Los pares que se confunden
- Tooltip o popover: si contiene un enlace o un botón, es un popover.
- Toast o banner: un toast desaparece solo, un banner te espera.
- Pestañas o control segmentado: las pestañas cambian el contenido de una zona, un control segmentado cambia cómo se muestra el mismo contenido.
- Casilla o interruptor: una casilla espera un Guardar, un interruptor actúa al instante.
- Modal o panel lateral: un modal pide una decisión, un panel lateral guarda más cosas para mirar.
💡 Elige un nombre por componente y escríbelo en tu documentación, con los alias que usa la gente. La búsqueda encuentra dropdown más rápido que menú de selección, aunque la biblioteca use el segundo.
Para practicar
Nombra el componente muestra diez dibujos con cuatro nombres cada uno, dos de ellos parecidos. Cada respuesta trae una definición de una frase, y al final del juego se listan los que fallaste.