Cuando construyes una aplicación móvil, los componentes visuales que eliges no son decoración: son parte de un sistema de diseño que define cómo se ve y se siente tu app. En Android ese sistema se llama Material Design, en iOS se llama Cupertino, y entender sus reglas te ayuda a programar interfaces coherentes, accesibles y escalables.

¿Qué es Material Design y en qué se diferencia de Cupertino?

Material Design es el sistema de diseño creado por Google y orientado a Android, mientras que Cupertino es el lenguaje visual de Apple para iOS. Aunque un mismo componente cumpla la misma función en ambas plataformas, su apariencia cambia porque cada ecosistema tiene su propia filosofía.

La filosofía de Material gira alrededor de los materiales físicos: hay sombras, texturas, superficies limpias y luz que se refleja sobre los elementos. Esa es la razón por la que un botón en Android se ve distinto al mismo botón en iOS.

Y no se queda ahí. Empresas como Mercado Libre, Facebook o Airbnb tienen su propio sistema de diseño, porque la identidad visual también es parte de su filosofía de marca.

¿Qué es un sistema de diseño en mobile? Es un conjunto de reglas, componentes y guías visuales que define cómo se ven y comportan los elementos de una app. Material Design y Cupertino son los dos más usados en mobile.

¿Qué es el FAB o floating action button y cuándo usarlo?

El FAB es el floating action button, un botón flotante en la esquina inferior derecha de la pantalla pensado para Material Design y Android [02:00]. Su ubicación no es casual: cuando sostienes el teléfono, esa zona es la más cómoda para hacer tap con el pulgar, y por eso es el lugar donde el usuario interactúa con mayor probabilidad.

El FAB representa la acción principal de la pantalla. Si estás mostrando un feed de publicaciones, ese botón te lleva a crear un nuevo post. Una sola acción, la más importante, siempre visible.

¿Cuántos tamaños de FAB existen?

Material Design 3 define tres variantes que puedes usar según el contexto visual de tu pantalla:

• FAB normal, el tamaño estándar.
• Small FAB, para interfaces más compactas.
• Large FAB, cuando necesitas más prominencia visual.

Cada variante incluye un icono, un contenedor, sombra y elevación, además de reglas específicas de color y comportamiento.

¿Qué reglas debe seguir el icono de un FAB?

La guía oficial recomienda iconos simples y fáciles de interpretar. Si el usuario duda sobre qué hace el botón, el icono está mal elegido. Material Design incluso documenta ejemplos de qué hacer y qué evitar para mantener la claridad de la acción.

¿Cómo consulto las reglas de UX en Material Design 3?

La fuente oficial es Material Design 3, la tercera versión de la librería de Google y la que está vigente hoy [05:00]. Ahí encuentras las reglas para crear aplicaciones móviles y web, recursos para desarrolladores y para diseñadores UX, y la documentación de cada componente.

Dentro del sitio puedes navegar a la sección de componentes, buscar el FAB y revisar:

• Los specs o especificaciones técnicas: contenedor, icono, sombra, elevación y colores.
• Ejemplos de implementación en Jetpack Compose y Flutter.
• Las guidelines de uso correcto e incorrecto.
• Las pautas de accesibilidad para que todos los usuarios puedan interactuar con el componente.

Lo mismo aplica para botones, bottom sheets, app bars, listas, tabs y barras de navegación. Cada componente tiene su ficha con reglas específicas.

¿Para qué sirve revisar las guidelines siendo desarrollador? Para validar si el diseño que propone el equipo de UX tiene sentido con lo que vas a programar y para detectar inconsistencias antes de escribir código.

¿Cómo organizo el sistema de diseño en mi proyecto mobile?

La recomendación es crear un repositorio aislado que contenga únicamente las vistas del sistema de diseño, y luego importarlo como librería en tu proyecto principal [10:30]. Esta separación tiene ventajas concretas que se notan apenas el proyecto crece.

• Mantienes la capa visual separada de la lógica de negocio.
• Reutilizas la librería en otras aplicaciones que compartan el mismo sistema.
• Actualizas versiones de Material Design sin tocar el código de tu app principal.
• Aportas fixes y nuevos componentes en un solo lugar, y todas las apps que usan la librería se benefician.

Esto también te prepara para los cambios entre versiones. Material Design ya va por su tercera iteración, y un mismo botón puede comportarse distinto entre versiones. Si tu librería está aislada, esa migración es transparente para el resto de la aplicación.

¿Cómo se prueba el sistema de diseño en producción?

Una práctica común en equipos mobile es manejar dos aplicaciones en paralelo: una para el modelo de negocio y otra exclusivamente para probar el ecosistema visual [12:00]. Así puedes validar el comportamiento de cada componente de forma aislada antes de integrarlo a la app real, y mantener el sistema robusto, escalable y soportable a largo plazo.

¿Ya tienes un sistema de diseño en tu proyecto actual o todavía mezclas la capa visual con la lógica de negocio? Cuéntalo en los comentarios.