Apple definió un conjunto de principios llamados Human Interface Guidelines (HIG) que aseguran que cada app dentro de su ecosistema se sienta coherente, predecible y natural. Si diseñas para iOS, conocer estas guías te ayuda a crear interfaces que los usuarios entienden sin esfuerzo, reduciendo la fricción y aumentando la retención dentro de la aplicación.

Lo interesante es que estas reglas no son exclusivas de iOS: cubren todo el ecosistema, desde iPadOS hasta macOS, tvOS, watchOS y visionOS, e incluso videojuegos.

¿Dónde encontrar la documentación oficial de las Human Interface Guidelines?

Apple publica toda su documentación de diseño en su sitio web oficial, organizada por secciones que facilitan la consulta según lo que estés diseñando [1:21].

La estructura principal se divide así:

• Getting Started: introducción a los principios básicos para cada plataforma del ecosistema.
• Fundamentos: claridad, profundidad, expresividad, íconos, branding, color y dark mode.
• Patrones: modelos de interacción comunes como drag and drop, manejo de archivos, colaboración o pantalla completa.
• Componentes: botones, listas, tarjetas, barras de navegación, menús y elementos de búsqueda.
• Inputs: métodos de entrada más allá de la pantalla, como botones físicos, gestos, teclados o detección de ojos.
• Tecnologías: integraciones nativas como AirPlay, realidad aumentada, HomeKit, Apple Pay, Face ID y Wallet.

¿Qué son las Human Interface Guidelines? Son las reglas oficiales de Apple para diseñar interfaces coherentes en iOS, iPadOS, macOS, tvOS, watchOS y visionOS. Definen cómo deben verse y comportarse los componentes, patrones e interacciones.

¿Por qué importa que una app se sienta nativa en iOS?

Cuando una aplicación rompe los patrones esperados, el usuario tiene que reaprender cómo navegarla. Eso genera fricción, percepción de incomodidad y, en muchos casos, abandono [6:52].

Un ejemplo claro: si una app financiera oculta su barra de navegación al cambiar entre secciones, los usuarios la perciben como confusa. Las apps que ignoran las guías de Apple no solo afectan la percepción, también reducen la frecuencia de uso.

¿Qué factores debo considerar al diseñar para iPhone?

Diseñar para iOS no es solo estética, también es funcionalidad. Hay cuatro factores clave:

1. Ergonomía: el iPhone se usa con una sola mano, así que los controles importantes van en la parte inferior, al alcance del pulgar.
2. Métodos de entrada: además del táctil, considera gestos, comandos de voz y reconocimiento facial.
3. Intermitencia: muchas apps se usan en sesiones cortas, como revisar un mensaje o pagar, así que la interfaz debe permitir acciones rápidas sin fricción.
4. Integración con el sistema: aprovecha Apple Pay, Face ID y Dynamic Island cuando aporten valor real al flujo.

¿Qué principios debe seguir toda aplicación bien diseñada en iOS?

Más allá del propósito de cada app, hay principios universales que mejoran la experiencia [9:30].

• Simplicidad: menos elementos en pantalla. Safari oculta su interfaz al hacer scroll para dejar solo el contenido visible.
• Adaptabilidad: la app debe responder a dark mode y a tamaños dinámicos de texto, como lo hace Apple Music.
• Coherencia visual: respetar la estructura del sistema, por ejemplo usar tab bar inferior en lugar de menús laterales.
• Aprovechar funciones del sistema: integraciones como Apple Pay o Face ID hacen la experiencia más segura e intuitiva.

¿Qué hace que una app se sienta nativa en iOS? Que respete los patrones de navegación del sistema, use los componentes estándar, se adapte a configuraciones del usuario como dark mode, y aproveche tecnologías nativas como Face ID o Apple Pay.

¿Qué herramientas oficiales ofrece Apple para diseñar en Figma?

Apple pone a disposición recursos descargables que aceleran el proceso de diseño. Los encuentras en la sección de Resources del sitio oficial [11:30].

¿Cómo descargo el UI Kit de iOS para Figma?

Dentro de Resources entras a iOS and iPadOS, sección Templates, y eliges la versión de Figma. Te redirige a la comunidad de Figma, donde verás el kit oficial marcado con un badge de Figma Partner que confirma su autoría.

El flujo es directo:

1. Click en Open in Figma.
2. Elige Make a copy of this file para poder modificar colores, tipografías y componentes.
3. Selecciona el equipo donde quieres guardarlo.
4. Renombra el archivo a algo práctico como iOS 18 Kit.

Dentro del archivo encuentras un changelog, ejemplos de uso de cada componente y enlaces directos a las guías de diseño. Recuerda que al hacer una copia, las actualizaciones no llegan automáticamente: revisa la comunidad de Figma de vez en cuando.

¿Qué son las SF Symbols y cómo las instalo?

SF Symbols es la librería oficial de íconos de Apple, con más de 6.000 símbolos coherentes entre todas las plataformas del ecosistema [15:48]. Solo está disponible para macOS.

Para instalarla:

• Entra a la sección Resources del sitio de Apple.
• Busca SF Symbols y descarga la versión más reciente (SF Symbols 6).
• Abre el archivo .dmg e instala como cualquier app nativa.

Dentro de la app puedes buscar íconos por categoría (clima, comunicación, mapas, dispositivos, casa) o usar el buscador. Para usarlos en Figma, basta con seleccionar el ícono, copiar con comando + C y pegarlo en tu lienzo.

La fuente San Francisco Pro, SF Compact y New York también están disponibles para descarga en la misma sección de recursos, y conviene tenerlas listas antes de empezar a maquetar.

Ejercicio práctico para identificar diseño nativo

Captura pantallas de varias apps en tu iPhone y compáralas. Analiza cómo usan tipografía, color y navegación. Pon lado a lado una app nativa de Apple y una de un tercero, y detecta las diferencias.

Ese contraste te entrena el ojo para reconocer qué hace que una app realmente se sienta parte del ecosistema. ¿Cuál es la primera diferencia que notaste? Cuéntame en los comentarios.