El color en iOS funciona como una herramienta de comunicación visual que guía la atención, refuerza la jerarquía y conecta tu app con el sistema operativo. Aquí vas a descubrir cómo aplicar las mejores prácticas de color en iOS según Apple, cómo trabajar con colores semánticos y cómo configurar variables en Figma para que tu paleta sea accesible y adaptable.

¿Cuáles son las mejores prácticas de color en iOS?

Apple documenta en su sección de Foundations > Color una serie de criterios que vale la pena interiorizar antes de tocar Figma. La idea central es usar el color con intención, no como decoración.

• Usa el color de forma intencional. Saturar la interfaz con muchos tonos genera ruido visual y dificulta la lectura, salvo que diseñes un juego.
• Mantén coherencia. Si el azul representa una acción interactiva como guardar un formulario, consérvalo en toda la app. Reserva el rojo para acciones destructivas como eliminar.
• Aplica color inclusivo. Personas con daltonismo no deben depender solo del color para entender la información, así que acompaña con textos e iconos.
• Cuida el contraste. Un texto sobre fondo claro necesita diferencia tonal suficiente para ser legible, y iOS ofrece herramientas para validarlo. En Figma existen plugins que facilitan esa revisión [02:05].

¿Qué es el color inclusivo en diseño de interfaces? Es el principio de no depender únicamente del color para transmitir información. Se complementa con texto, iconos y contraste suficiente para que personas con daltonismo o baja visión entiendan la interfaz.

¿Qué son los colores semánticos del sistema en iOS?

Apple proporciona colores dinámicos que se adaptan automáticamente a light mode, dark mode y a distintos niveles de brillo. En lugar de valores RGB fijos, usan nombres semánticos como systemBackground, label o separator [02:50]. Esto garantiza apariencia nativa y compatibilidad con futuras actualizaciones del sistema.

En la sección Platform considerations > iOS de la documentación encuentras una tabla con cuatro niveles de énfasis [03:25]:

• Primario: contenido de mayor relevancia, con el tono más oscuro en light mode o más cercano al blanco en dark mode.
• Secundario, terciario y cuaternario: aportan jerarquía descendente al contenido.

Para los fondos hay dos familias clave. Los systemBackgrounds se usan en toda la pantalla cuando no hay agrupaciones, mientras que los systemGroupedBackgrounds sirven para agrupar contenido en listas o tarjetas [04:05].

¿Cuál es la diferencia entre systemBackground y systemGroupedBackground? El primero pinta toda la pantalla cuando no hay tarjetas o agrupaciones. El segundo se usa para listas y tarjetas que necesitan un fondo diferenciado del contenedor principal.

¿Cómo crear una paleta de colores con variables en Figma?

La documentación de Apple también incluye una guía con estilos donde aparece toda la gama: system red, orange, yellow, green, además de la escala system gray 2 a system gray 6 terminando en systemWhite [05:30]. También hay versiones de contraste aumentado para personas con discapacidad visual.

El problema típico del UI kit base es que los componentes vienen con el color blue aplicado como fill directo. Cambiar ese color uno por uno en cada botón es agotador, y aquí entran las variables de color de Figma [06:50].

¿Cómo renombrar el color primario sin romper componentes?

El flujo eficiente sigue estos pasos:

1. Abre las variables locales y entra a la colección System Colors.
2. Localiza la variable blue y renómbrala a primary. Así evitas reasignar el token en cada botón [07:30].
3. Guarda los valores hexadecimales del blue para light, dark y dark elevado.
4. Crea una nueva colección llamada primitive colors.
5. Dentro de primitivos, crea las variables blue light y blue dark con los valores originales de Apple.
6. Crea también pink light y pink dark con el color de tu marca, por ejemplo el pink 500 del ejercicio.

En dark mode conviene subir un poco la intensidad del rosa para que ilumine mejor sobre fondos oscuros [09:10].

¿Cómo enlazar el color primario con la paleta primitiva?

Vuelve a la colección System Colors y en la variable primary haz alias hacia pink light para light mode y pink dark para dark mode. Al instante todos los botones, navigation bars y componentes que usaban el primario adoptan el nuevo color sin tocarlos manualmente [10:00].

Queda un detalle con los rellenos tintados que viven en la colección de misceláneas. Figma todavía no permite heredar un alias y aplicarle opacidad al mismo tiempo, así que necesitas hacer detach del alias y asignar manualmente la opacidad del 15 % tanto en light como en dark [10:45]. Recuerda ese valor porque es el que mantiene la consistencia con el resto del sistema.

¿Por qué usar variables de color en lugar de estilos en Figma? Las variables permiten cambiar el color primario en un solo lugar y propagarlo a todos los componentes. Además soportan modos claro y oscuro automáticamente, algo que los estilos tradicionales no resuelven.

¿Cómo aplicar esta paleta a tu proyecto?

Define un color primario que represente la identidad de tu app, valida que funcione en modo claro y oscuro, y revisa el contraste para que sea accesible. Adapta también la escala de grises al estilo de tu marca y verifica que la aplicación del color se mantenga consistente en toda la interfaz.

Un buen manejo de color hace que tu app se sienta realmente nativa en iOS. ¿Qué color primario elegiste para tu proyecto y cómo lo adaptaste a dark mode? Cuéntalo en los comentarios.