Los componentes de UI son los bloques básicos y reutilizables con los que construyes cualquier interfaz digital.
Era martes por la tarde. Sofía, diseñadora junior en una startup de CDMX, recibió un encargo urgente: rediseñar el flujo de compra de la app en 48 horas. Abrió Figma, miró la pantalla en blanco y sintió algo extraño. Tenía el color, la tipografía y la paleta perfecta, todo lo que había aprendido. Pero no sabía por dónde empezar a construir. Le faltaban los ladrillos.
El secreto que separa a los diseñadores principiantes de los profesionales
La mayoría de las personas creen que diseñar una interfaz es como pintar un cuadro: crear algo desde cero, con libertad total. Esa idea es hermosa, pero en la práctica es un camino al caos. Los diseñadores profesionales no inventan cada pantalla. La ensamblan.
Según el reporte de herramientas de diseño de Nielsen Norman Group, más del 78% de los equipos de producto usan sistemas de componentes reutilizables para construir sus interfaces. No porque sean flojos. Sino porque funciona. Un componente bien diseñado puede aparecer cientos de veces en una app, siempre coherente, siempre predecible. Eso reduce errores, acelera el trabajo y mejora la experiencia del usuario.
Eso es exactamente lo que Sofía no tenía: un vocabulario visual estructurado. Y ese vocabulario tiene nombre: componentes de UI.
¿Qué es exactamente un componente de UI?
Un componente de UI es un elemento visual independiente con una función específica dentro de una interfaz. Tiene forma, comportamiento y propósito propios. Puedes pensar en ellos como piezas de LEGO: cada una tiene su forma particular, pero encajan entre sí para construir algo más grande.
Hay tres características que definen a un componente real:
Primero, es reutilizable. El mismo botón "Agregar al carrito" que ves en la página de un televisor en Liverpool.com.mx aparece también en la página de ropa, de juguetes y de electrodomésticos. Es el mismo componente, aplicado en distintos contextos.
Segundo, es consistente. Si el botón es azul con texto blanco y esquinas redondeadas, así debe verse en toda la app, sin excepciones. La consistencia genera confianza en el usuario.
Tercero, tiene estados. Un botón no siempre se ve igual: tiene un estado normal, un estado al pasar el cursor (hover), un estado activo cuando se presiona, y un estado desactivado cuando no está disponible. Esos estados comunican información al usuario sin necesidad de palabras.
Los cuatro componentes que construyen el 90% de cualquier interfaz
Existen docenas de componentes catalogados en sistemas de diseño como Material Design de Google o el Human Interface Guidelines de Apple. Pero cuatro de ellos aparecen en prácticamente cualquier producto digital mexicano, desde la app de OXXO Pay hasta el sitio de Mercado Libre.
El botón es el componente de acción más importante. Su trabajo es invitar al usuario a hacer algo: comprar, enviar, confirmar, cancelar. Un botón bien diseñado tiene jerarquía visual clara. El botón primario (la acción principal) debe ser el más visible: color sólido, texto directo. El botón secundario es más discreto: puede tener solo borde, sin relleno. En la app de Mercado Libre, el botón "Comprar ahora" usa el color amarillo de la marca con texto oscuro. No es casualidad: ese contraste cumple con el estándar de accesibilidad que estudiaste en la lección anterior.
El formulario es el componente que recoge información del usuario. Está formado por varios sub-componentes: el campo de texto (input), la etiqueta que lo describe (label), el mensaje de error y el botón de envío. Un formulario de login en el SAT o en el portal del IMSS tiene todos estos elementos. El error más común es omitir el mensaje de error. Cuando el usuario escribe su RFC incorrecto y no pasa nada, se desorienta. El mensaje de error, aunque pequeño, es uno de los componentes más importantes para reducir la frustración.
La tarjeta (card) es un contenedor visual que agrupa información relacionada. La reconoces inmediatamente en las apps de delivery o en los resultados de búsqueda de Mercado Libre: imagen, nombre del producto, precio y botón de acción, todo dentro de un rectángulo con sombra suave. La tarjeta funciona porque crea una unidad perceptual: el cerebro del usuario la lee como "una cosa", no como partes sueltas. Un estudio de Baymard Institute encontró que los usuarios escanean páginas de resultados hasta tres veces más rápido cuando el contenido está organizado en tarjetas que cuando está en listas de texto plano.
El menú de navegación es el componente que permite moverse entre secciones. En móvil suele aparecer como una barra inferior con iconos (bottom navigation bar), que es el patrón que usan apps como BBVA México o Rappi. En escritorio aparece como una barra lateral o una barra superior horizontal. La regla de oro del menú: nunca más de cinco opciones. Cuando hay más de cinco, el usuario deja de leer y empieza a ignorar. Las opciones adicionales deben ocultarse en un submenú o en un menú tipo hamburguesa.
Cómo se combinan los componentes para formar pantallas
Aquí está el salto conceptual que transforma a un diseñador principiante en uno competente: los componentes no viven solos. Se combinan en estructuras llamadas patrones de diseño.
Un patrón es una combinación probada de componentes que resuelve un problema común. Por ejemplo, el patrón de "pantalla de inicio de sesión" combina: un logotipo, dos campos de formulario (usuario y contraseña), un botón primario, un enlace de texto para recuperar contraseña y, opcionalmente, un botón secundario para registrarse. Ese patrón lo ves en el SAT ID, en la app de IMSS Digital y en prácticamente cualquier servicio bancario mexicano. No es coincidencia: es que el patrón funciona y los usuarios ya lo conocen.
Cuando combinas componentes en patrones, y patrones en pantallas, y pantallas en flujos, estás construyendo un producto digital completo. Es exactamente la metodología que usan los equipos de Bimbo Digital, FEMSA Comercio y cualquier empresa con un producto tecnológico serio.
Errores comunes al usar componentes por primera vez
El primer error es crear variantes innecesarias. Una diseñadora principiante puede terminar con 12 versiones distintas del mismo botón porque cada vez que necesitaba uno nuevo, lo recreaba desde cero. El resultado: una interfaz visualmente inconsistente que confunde al usuario.
El segundo error es ignorar los estados. Diseñar solo el estado "normal" de un componente es como escribir una historia con solo un tiempo verbal. Los estados hover, activo, desactivado y de error son parte del componente, no extras opcionales. Si tu botón de "Pagar" no tiene un estado de carga (loading) mientras procesa el pago, el usuario va a presionarlo tres veces pensando que no funcionó.
El tercer error es mezclar sistemas. Usar iconos de Material Design junto con componentes del estilo iOS junto con elementos inventados produce una experiencia visualmente rota. Elige un sistema de referencia y mantén consistencia dentro de él.
El vocabulario que Sofía necesitaba
Sofía regresó a su proyecto con una perspectiva diferente. En lugar de intentar diseñar cada pixel desde cero, identificó los componentes que necesitaba: tres tipos de tarjeta para los productos, un formulario de dirección de envío, un botón primario de confirmación y un menú de navegación inferior. Los ensambló, verificó los estados de cada uno y en seis horas tenía un flujo funcional listo para pruebas de usuario.
No fue magia. Fue vocabulario. Cuando sabes cómo se llama cada pieza y para qué sirve, construir se vuelve un proceso claro y eficiente. Los componentes de UI son ese vocabulario. Y ahora tú también lo tienes.