Sistemas de iconografía SF Symbols y Material Symbols

Crear aplicaciones móviles efectivas implica usar iconografía adecuada para cada plataforma. Con SF Symbols en iOS y Material Symbols en Android, puedes lograr una interfaz intuitiva que mejora notablemente la experiencia del usuario y mantiene coherencia visual acorde a cada sistema operativo.

¿Qué es SF Symbols y cómo funciona?

SF Symbols es el sistema de iconografía oficial de Apple para iOS, caracterizado por integrarse perfectamente con la tipografía San Francisco. Esta integración permite que los íconos:

• Se ajusten automáticamente al tamaño y peso del texto utilizado.
• Mejoren la accesibilidad visual.
• Se alineen fluidamente con los elementos tipográficos.

Existen más de 4 mil íconos disponibles categorizados en diferentes rubros como transporte, cámaras, videojuegos, entre otros. Estos se usan copiándolos directamente desde la aplicación SF Symbols e insertándolos en herramientas como Figma.

¿Qué recomendaciones seguir al usar SF Symbols?

Para un uso correcto considera lo siguiente:

1. Utiliza íconos en contextos adecuados para preservar su significado.
2. Respeta las variantes y pesos tipográficos naturales del ícono.
3. No alteres la estructura original del ícono.
4. Asegura su accesibilidad visual en diferentes tamaños y colores.
5. Usa la aplicación SF Symbols para adaptarlos a las necesidades específicas de tu diseño.

¿Cómo incorporar SF Symbols en tus diseños?

Usar SF Symbols en proyectos es tan sencillo como copiar desde la aplicación macOS SF Symbols y luego pegarlos directamente en los campos adecuados en Figma. Por ejemplo, al diseñar una tab bar en una app de cine puedes:

• Copiar el símbolo correspondiente desde SF Symbols.
• Utilizar opción con relleno para íconos activos y sin relleno para los inactivos.
• Adaptar hasta cinco íconos diferentes claramente relacionados a las acciones principales del usuario como cartelera, boletos, alimentos, perfil, entre otras.

¿Qué ofrece Material Symbols en Android?

Material Symbols es el sistema oficial para Android fundamentado en Material Design. Permite personalizar atributos como peso, grosor y opacidad, ajustándose a las pautas visuales para mantener una experiencia fluida y consistente.

¿Cómo acceder e implementar íconos Material Symbols?

La implementación en Android es algo distinta, se basa en utilización de vectores disponibles mediante el plugin oficial de Material Symbols dentro de Figma:

• Elige y personaliza íconos específicos desde el plugin.
• Guárdalos como componentes para reutilizarlos fácilmente.
• Asegúrate de incluir versiones con y sin relleno para activar y desactivar estados en componentes interactivos.

¿Cómo personalizar y extender tu biblioteca de íconos?

Para agregar nuevos íconos en Material Symbols:

• Usa el plugin y selecciona el ícono deseado.
• Ajusta colores y propiedades de acuerdo al sistema Material Design.
• Convierte estos íconos en componentes y agrégalos a la biblioteca para uso posterior.

¿Qué factores considerar para usar iconografía correctamente en Android?

Es primordial:

• Revisar la documentación oficial de los íconos en Material Design.
• Cumplir con especificaciones técnicas como grid modelos y ajustes ópticos.
• Validar la claridad visual al usar en distintos componentes e interfaces.

Practica con tu aplicación y mejora tus habilidades

Te invitamos a seguir practicando estos conocimientos directamente en tus proyectos digitales para continuar perfeccionando tus habilidades en diseño de interfaces móviles. Si tienes dudas o deseas retroalimentación, no olvides compartir tu trabajo en los comentarios.