1. Introducción
Última actualización: 04/08/22
A partir de Android 13, los usuarios pueden agregar temas a los íconos de selector adaptables. Con esta función, se ajusta el tono de los íconos de apps en los launchers de Android compatibles para heredar el color del fondo de pantalla y otros temas que eligió el usuario.
Crea fácilmente todos los recursos del sistema necesarios para tu app para Android, incluidos los nuevos íconos de color adaptables.
Qué aprenderás
- Comprender los diferentes tipos de íconos de apps y obtener sugerencias para diseñarlos
- Cómo usar la plantilla de Figma del selector de Android
- Cómo usar el generador de recursos de Android Studio
- Cómo obtener una vista previa del ícono de selector con el emulador de Android Studio
Requisitos previos
- Conocimientos básicos de Figma
- Opcional: Material gráfico del ícono de la app (primer plano, segundo plano y monocromático)
Requisitos
- Una cuenta de Figma
- Un archivo de Designlab de Figma
- Opcional: Una PC con Android Studio instalado
2. Primeros pasos
Configuración
Para comenzar, debes acceder al archivo de Figma del ícono de la app para Android.
Primero, accede a Figma o crea una cuenta.
Duplicado de la comunidad de Figma
Navega hasta el archivo de plantilla del selector de Android o busca "Migrating to Variable fonts" en la comunidad de Figma. En la esquina superior derecha, haz clic en Get a Copy para copiar el archivo a tus archivos.
Cómo usar la plantilla
La plantilla de íconos de Android consta de dos páginas:
- La página de portada abarca brevemente los conceptos relevantes y cómo usar la plantilla.
- La página de plantilla incluye todo lo que necesitas para crear los recursos obligatorios, divididos en tres marcos (Color, Shape y Play Store).
Nota: En el panel de capas izquierdo, la mayoría de las capas y los grupos están bloqueados; deben permanecer bloqueados. (Podrás colocar material gráfico dentro de los grupos de material gráfico desbloqueados).
Antes de comenzar a crear recursos, veamos lo que crearemos...
3. Íconos del sistema Android
Íconos de selector
Los íconos de selector, o íconos de apps, actúan como una parte esencial de la experiencia de inicio de tu app. Los íconos de selector aparecen en la pantalla principal como un punto de entrada a tu app.
Forma adaptable
Un ícono adaptable, o AdaptiveIconDrawable, puede mostrarse de formas diferentes en función de las capacidades de cada dispositivo individual y el uso de temas del usuario. Los íconos adaptables se utilizan principalmente en el selector de la pantalla principal, pero también pueden utilizarse en accesos directos, la app de Configuración, los diálogos de uso compartido y la pantalla de descripción general.
Un ícono adaptable puede mostrar diferentes formas en distintos modelos de dispositivos. Por ejemplo, se puede mostrar con una forma circular en un dispositivo OEM y con un cuadrado con esquinas redondeadas en otro. Cada dispositivo OEM debe proporcionar una máscara, que el sistema usa para procesar todos los íconos adaptables con la misma forma.
La capacidad de adaptarse a la forma también permite que el sistema aplique varios efectos de animación con la interacción del usuario.
Color adaptable
Los íconos adaptables ahora pueden usar color dinámico para permitir íconos de apps temáticos personalizados.
Si un usuario habilitó el ícono de app temático (es decir, activó el botón de activación Íconos temáticos en la configuración del sistema) y el selector admite esta función, el sistema usará el color del fondo de pantalla y el tema que eligió el usuario para determinar el color de tono.
Al igual que los íconos que se adaptan a la forma, los íconos de color adaptables se componen de un primer plano y un segundo plano. Solo se debe proporcionar un recurso de ícono monocromático en primer plano. El sistema se encargará del segundo plano y del color con el esquema de color extraído.
También puedes usar el mismo ícono monocromático para un ícono de notificación.
Heredada
Se deben incluir íconos heredados para admitir dispositivos que ejecutan versiones anteriores de Android o que no admiten funciones adaptables (anteriores a 8.0).
No tendrán recursos de primer plano ni de segundo plano, y pueden tener una forma libre. Si usas la plantilla proporcionada, el material gráfico final de forma adaptable se exportará en los tamaños necesarios para tu ícono heredado.
Íconos de notificaciones
Una notificación es un mensaje que muestra Android fuera de la IU de la app para proporcionar al usuario recordatorios, mensajes de otras personas o información específica de la app. El sistema muestra notificaciones en diferentes ubicaciones y formatos, por ejemplo, un ícono en la barra de estado, una entrada más detallada en el panel de notificaciones o una insignia en el ícono de la app, y en wearables sincronizados automáticamente.
Material gráfico de la tienda
Puedes usar un gráfico de funciones, capturas de pantalla, una descripción breve y videos para destacar y promocionar tu app en Google Play y otros canales promocionales de Google.
El ícono de la app no reemplaza el ícono de selector, pero debe ser una versión de mayor calidad y resolución.
Al igual que el ícono de selector, el material gráfico puede ocupar todo el espacio del recurso. También puedes diseñar y colocar elementos de material gráfico, como los logotipos, en la cuadrícula de líneas guía.
Para publicar la ficha de Play Store, debes proporcionar un ícono de app cuadrado de 512 x 512 px. Si usas la plantilla de ícono de la app para Android, se proporciona en la exportación con el material gráfico de forma adaptable.
4. Prácticas recomendadas de diseño
Los íconos de selector inician tu app para el usuario. Como entrada a tu app, deben ser reconocibles y legibles. Estas son algunas prácticas recomendadas para garantizar estas cualidades en tu ícono de selector.
Mantén el material gráfico simple. Evita usar varias capas, muchos efectos y texto. Estos detalles se perderán o serán difíciles de ver en tamaños pequeños. 
Evita las formas complejas. Esto incluye los logotipos. Usa un logotipo simplificado, si es posible, o considera la simbología que tus usuarios conectan con tu app. Una forma legible y distintiva ayuda a crear unidad para que los usuarios reconozcan fácilmente tu app en diferentes contextos (color adaptable y notificación). 
Usa una cuadrícula. Aprovecha una cuadrícula o líneas guía para asegurarte de que el material gráfico de primer plano funcione cuando se recorte, incluido el material gráfico de ilustración con sangrado completo. 
Considera el contraste. En el caso de los íconos de forma adaptable y heredados, asegúrate de que el primer plano y el segundo plano del ícono tengan un contraste legible. Evita usar sombras paralelas pesadas, que se pueden confundir con la sombra del sistema. 
Mantén el material gráfico dentro de las zonas seguras. Mantén los recursos de primer plano dentro de 72 x 72 px (a menos que uses sangrado completo). Mantén los fondos en 108 x 108 px. Nota: El marco de material gráfico de la plantilla de íconos es más grande que 72 x 72 px para permitirte crear material gráfico de íconos. Se cambiará el tamaño de los recursos para que se ajusten a las especificaciones.
Formato vectorial. Intenta usar material gráfico en formato vectorial (como archivos SVG, AI, PDF y EPS) en lugar de un formato de trama (como archivos PNG, JPG y GIF). Esto garantiza que tu material gráfico sea compatible con las funciones más recientes y que sea más fácil de editar. 
5. Íconos de color adaptables y de notificaciones
Ahora es tu turno de crear tus propios íconos del sistema Android.
- Busca el archivo de Figma de los íconos de la app para Android.
- Dentro del archivo, busca el marco Color adaptable. En el panel de capas izquierdo, busca Color adaptable > Componentes > arte > Área de material gráfico de íconos > Material gráfico de íconos temáticos < agrega tu ícono. Si tienes un ícono monocromático listo, cópialo aquí para reemplazar el ícono de bugdroid de muestra y ve al paso 6.
- Si no tienes un ícono monocromático, comienza con un logotipo o un ícono relacionado con tu app. Consulta las sugerencias de diseño para actualizar tu ícono. Primero, simplifica y evita las formas complejas. Por ejemplo, aquí se simplifican las ilustraciones que se usan en la app con formas de hojas menos complejas. Las sombras y los detalles de las líneas se simulan con espacios en blanco.
- Ahora, actualiza el tamaño con la cuadrícula de líneas guía. Aquí, configuramos el cambio de tamaño en Escala y nos aseguramos de que el material gráfico esté dentro de la zona segura de primer plano. La plantilla está configurada con el material gráfico en 4x y cambia de tamaño automáticamente para la exportación, por lo que puedes diseñar tus íconos a una escala más grande.
- El archivo está configurado para funcionar con Material Theme Builder para ayudar a obtener una vista previa del color dinámico. Conecta el estilo de color del ícono de primer plano a On-surface-variant.
- Ahora, si abres Material Theme Builder desde el panel de complementos, puedes mezclar el color fuente o agregar una imagen para actualizar los colores con el color fuente extraído.
- ¿Cómo se verá esto en diferentes resoluciones o en una pantalla principal? La plantilla está configurada de modo que el material gráfico colocado dentro de los marcos de material gráfico aparezca en los diversos contextos de vista previa.
- El sistema usa el ícono monocromático como notificación y lo muestra como tal en las vistas previas.
6. Íconos de forma adaptables y heredados
Ahora, crearemos los íconos de forma adaptables y heredados para garantizar una amplia compatibilidad con el ícono.
- Dentro del archivo, busca el marco de forma. En el panel de capas izquierdo, busca Fondo de ícono < agrega tu ícono*. Si tienes un ícono listo, cópialo aquí para reemplazar el ícono de bugdroid de muestra y ve al paso 5.* Si no tienes un ícono, comienza con un logotipo o un ícono relacionado con tu app, o bien vuelve a usar el ícono monocromático.
- Actualiza el ícono de primer plano y ten en cuenta las prácticas recomendadas para los íconos. Aquí, recuperé los colores originales de la ilustración, pero mantuve los detalles al mínimo.
- Ahora, actualiza el tamaño con la cuadrícula de líneas guía. Aquí, configuramos el cambio de tamaño en Escala y nos aseguramos de que el material gráfico esté dentro de la zona segura de primer plano.
- Los íconos de apps de forma adaptables también pueden tener un fondo distinto. Esto permite que las capas del ícono se recorten de forma segura y proporcionen efectos de movimiento sutiles en la interacción. También puedes usar y definir un fondo de color sólido en Android Studio.
- Las vistas previas se actualizan para mostrar cómo se ven el primer plano y el segundo plano juntos, en la pantalla principal, diferentes formas recortadas y como un ícono heredado.
La forma que se usa para recortar se puede actualizar en la vista previa de la pantalla principal. Para ello, selecciona los íconos y cambia la opción de variante de forma. 
7. Exportando
¡Excelente! Ya actualizaste la plantilla con los íconos de tu app. Exportémoslos para la implementación.
- Asegúrate de que no se seleccione nada en el lienzo.
- Ve al menú de Figma > Archivo > Exportar (Mayús + Cmd + E).
- En el menú de exportación, confirma la exportación. Esto descargará los recursos de la plantilla.
¿Qué se incluye en la exportación?
Los recursos exportados tienen todos los archivos necesarios para implementar el ícono de tu app, de la siguiente manera:
- Figma exporta el ícono monocromático de primer plano para el color adaptable como un archivo SVG, junto con el primer plano y el segundo plano para los íconos de forma adaptables.
- Figma también proporciona íconos heredados en diferentes directorios de mipmap organizados por resolución.
Eso es todo. Tu ícono está listo para enviarse al desarrollo.
Como alternativa, si deseas obtener una vista previa de tus íconos en Android Studio y convertir esos archivos SVG a su formato de recurso final, continúa con el siguiente paso.
8. Usa Image Asset Studio
Cómo comenzar a usar Android Studio
- Descarga e instala Android Studio.
- Inicia Android Studio.
Android Studio te solicita opciones para iniciar un proyecto nuevo o seleccionar proyectos existentes.
- Por ahora, selecciona un proyecto nuevo. Las siguientes pantallas te guiarán para configurar tu proyecto nuevo.
- Selecciona cualquier plantilla de las plantillas de inicio, ya que solo veremos los íconos de inicio.
- Luego, ponle un nombre a tu proyecto nuevo y selecciona Finalizar. El proyecto nuevo tardará unos minutos en crearse.
Usa Image Asset Studio
Ahora podemos agregar tus íconos al proyecto con una herramienta útil, Asset Studio.
- Para acceder a esta herramienta, selecciona Menú Archivo > Nuevo > Image Asset.
- Cuando se abra Image Asset Studio, agrega la capa de primer plano seleccionando el ícono de carpeta en Ruta de acceso. Elige el archivo SVG exportado como drawable-anydpi/ic_launcher.svg
- Selecciona la pestaña Capa de fondo y, de manera similar, elige la capa de fondo que se exportó. Como alternativa, elige Tipo de recurso: Color para tener un fondo de selector de color sólido.
- Vuelve a la capa de primer plano y verifica que la imagen esté dentro de la zona segura. Cambia el tamaño del ícono a lo que mejor funcione visualmente.
- Cuando hayas terminado, haz clic en Siguiente. Se te preguntará dónde deben ir los íconos dentro de tu proyecto (déjalo en el valor predeterminado o cambia a Principal). Luego, haz clic en Finalizar. Podrás encontrar tus recursos de selector en res > drawable. Si haces doble clic, se abrirá una vista previa de los elementos de diseño vectoriales finales.
- Copia y pega manualmente el recurso de capa monocromática en res/drawable o res/drawable-v24, o importa manualmente la capa monocromática. Para ello, haz clic con el botón derecho en la carpeta res y selecciona Nuevo > Image Asset.
- En res/mipmap-anydpi-v26/ic_launcher.xml y res/mipmap-anydpi-v26/ic_launcher_round.xml, agrega o cambia el android:monochrome="path/to/monochrome/asset existente para que apunte al recurso monocromático correcto.
9. Vista previa y recursos
Vista previa en el emulador
Lo hicimos para agregarlos al proyecto de la app, lo que nos permite obtener una vista previa en un dispositivo real o en un emulador. Veamos cómo se verán nuestros íconos en realidad.
Deberías tener una configuración de emulador de forma predeterminada, pero, si no es así, crea un dispositivo virtual de Android. Haz clic en el botón de reproducción verde. Esto compilará el proyecto y abrirá el emulador.
Recursos finales
Excelente. Pudiste verificar cómo se verá el ícono de selector en un dispositivo con el emulador y agregarlo a un proyecto de app. De esta manera, se convirtieron en su forma de producción final. ¿Y dónde están?
Los recursos se almacenan como recursos con una app para Android y se pueden ubicar abriendo el panel de recursos (por lo general, en el lado izquierdo). Explora la app y, luego, busca la carpeta Res. Haz clic con el botón derecho para abrir un menú y selecciona Abrir en Finder (en Mac). Se abrirá una ventana de Finder. De manera opcional, puedes ahorrar tiempo de desarrollo y QA si conviertes y pruebas el resto de los recursos de tu app con un proceso similar. Si convertiste el resto de los recursos de tu app, esta carpeta se puede compartir con el desarrollo.
10. Felicitaciones
Excelente trabajo. Aprendiste sobre los íconos del sistema Android necesarios para compilar una app para Android, diseñar tus propios íconos, explorar el recurso de plantilla de íconos y, posiblemente, ir más allá y explorar Android Studio para obtener una vista previa y convertir recursos para la producción.
Si tienes alguna pregunta, no dudes en consultarnos en cualquier momento en @MaterialDesign en Twitter.
Mira más instructivos y contenido de diseño en youtube.com/MaterialDesign.