1. Introducción
Última actualización: 08/04/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
- Conocimiento de los diferentes tipos de íconos de apps y 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: Diseño del ícono de la app (en primer plano, en 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
Ve al archivo Plantilla del selector de Android o busca "Plantilla del selector de Android" 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 ícono de Android consta de dos páginas:
- La portada abarca brevemente los conceptos relevantes y cómo usar la plantilla.
- La página de plantillas incluye todo lo que necesitas para crear los recursos obligatorios, divididos en tres marcos (Color, Forma y Play Store).
Nota: En el panel Capas de la izquierda, la mayoría de las capas y los grupos están bloqueados, y deben permanecer así. (Podrás colocar material gráfico dentro de los grupos de material gráfico desbloqueados).
Pero antes de comenzar a crear recursos, veamos qué crearemos…
3. Íconos del sistema Android
Íconos de selector
Los íconos de selector, o íconos de la app, son una parte esencial de la experiencia de inicio de tu app, ya que aparecen en la pantalla principal como punto de entrada a ella.
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 Recientes.
Un ícono adaptable puede mostrar diferentes formas en distintos modelos de dispositivos. Por ejemplo, puede mostrar una forma circular en un dispositivo OEM y un cuadrado con esquinas redondeadas en otro. Cada OEM de dispositivos debe proporcionar una máscara, que el sistema usa para renderizar todos los íconos adaptativos 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
Ahora los íconos adaptables pueden usar el color dinámico para permitir íconos de apps temáticos personalizados.
Si un usuario habilitó los íconos de app temáticos (en otras palabras, activó el botón de activación Íconos temáticos en la configuración del sistema) y el selector es compatible con esta función, el sistema usará el color del fondo de pantalla y el tema que haya elegido 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 fondo. Solo se debe proporcionar un recurso de ícono monocromático en primer plano. El sistema se encargará del fondo 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 la versión 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 diseño final de la 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 con el ícono de la app, el material gráfico puede ocupar todo el espacio del recurso, o bien puedes diseñar y colocar elementos de material gráfico, como logotipos, en la cuadrícula de líneas guía.
Para publicar la ficha de Play Store, debes proporcionar un ícono de la app cuadrado de 512 x 512 px. Si usas la plantilla del ícono de la app para Android, se proporciona en la exportación con el diseño 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. A continuación, se incluyen algunas prácticas recomendadas para garantizar estas cualidades en el ícono de la app.
Usa un diseño sencillo. 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. Si es posible, usa un logotipo simplificado o considera la simbología con la que los usuarios conectan 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 notificaciones). 
Usa una cuadrícula. Aprovecha las cuadrículas o las líneas clave para asegurarte de que el material gráfico en primer plano funcione cuando se recorte, incluido el material gráfico de ilustración con sangrado completo. 
Ten en cuenta el contraste. En el caso de los íconos heredados y con forma adaptable, asegúrate de que el primer plano y el segundo plano del ícono tengan un contraste legible. Evita usar sombras paralelas intensas, que se pueden confundir con la sombra del sistema. 
Mantén el diseño dentro de las zonas seguras. Mantén los recursos en primer plano dentro de 72 x 72 px (a menos que uses un diseño sin márgenes). Mantén los fondos en 108 x 108 px. Nota: El marco del material gráfico de la plantilla de ícono es más grande que 72 x 72 px para permitirte crear el material gráfico del ícono. Los recursos cambiarán de tamaño para ajustarse a las especificaciones.
Formato de vector. Intenta usar ilustraciones en formato vectorial (como archivos SVG, AI, PDF y EPS) en lugar de un formato de raster (como archivos PNG, JPG y GIF). Esto garantiza que tu diseño sea compatible con las funciones más recientes y que sea más fácil de editar. 
5. Íconos de color y notificaciones adaptables
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 frame Color adaptable. En el panel de capas de la izquierda, busca Color adaptable > Componentes > arte > Área de arte del ícono > Arte del ícono temático < agrega tu ícono. Si tienes un ícono monocromático listo, cópialo aquí para reemplazar el ícono de muestra de Bugdroid y avanza 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í las ilustraciones que se usan en la app se simplifican 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 clave. Aquí configuramos el cambio de tamaño en Scale y nos aseguramos de que el material gráfico esté dentro de la zona segura de primer plano. La plantilla está configurada con el diseño en 4x y se cambia de tamaño automáticamente para la exportación, por lo que puedes diseñar tus íconos a una escala mayor.
- El archivo está configurado para funcionar con Material Theme Builder y ayudar a obtener una vista previa del color dinámico. Conecta el 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á en diferentes resoluciones o en la pantalla principal? La plantilla está configurada de modo que el diseño que se coloca dentro de los marcos de diseño aparezca en los distintos 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 adaptables y heredados
Ahora, crearemos la forma adaptable y los íconos heredados para garantizar una amplia compatibilidad con el ícono.
- Dentro del archivo, busca el Shape frame. Busca Icon background < add your icon* en el panel de capas de la izquierda. Si tienes un ícono listo, cópialo aquí para reemplazar el ícono de muestra de Bugdroid y continúa con el paso 5.* Si no tienes un ícono, comienza con un logotipo o un ícono relacionado con tu app, o bien reutiliza el ícono monocromático.
- Actualiza el ícono de primer plano teniendo 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 clave. Aquí, configuramos el cambio de tamaño en Scale y nos aseguramos de que la ilustración esté dentro de la zona segura de primer plano.
- Los íconos de apps con forma adaptable 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 durante 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 los fondos juntos, en la pantalla principal, con 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. Ahora actualizaste la plantilla con los íconos de tu app. Exportémoslos para la implementación.
- Asegúrate de que no haya nada seleccionado en el lienzo.
- Ve al menú de Figma > Archivo > Exportar (Mayúsculas + Cmd + E).
- En el menú de exportación, confirma la exportación. Esta acción 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 fondo para los íconos de forma adaptable.
- Figma también proporciona íconos heredados en diferentes directorios mipmap organizados por resolución.
Eso es todo. Tu ícono está listo para enviarse al equipo de desarrollo.
Como alternativa, si quieres obtener una vista previa de tus íconos en Android Studio y convertir esos SVG a su formato de recursos final, continúa con el siguiente paso.
8. Cómo usar Image Asset Studio
Cómo comenzar a usar Android Studio
- Descarga e instala Android Studio.
- Inicia Android Studio.
Android Studio te solicita que elijas entre iniciar un proyecto nuevo o seleccionar proyectos existentes.
- Por el momento, selecciona un proyecto nuevo. En las siguientes pantallas, se te guiará para que configures tu proyecto nuevo.
- Selecciona cualquier plantilla de las plantillas de inicio, ya que solo veremos los íconos de lanzamiento.
- Luego, ponle un nombre al proyecto nuevo y selecciona Finalizar. La creación del proyecto nuevo tardará unos minutos.
Cómo usar Image Asset Studio
Ahora podemos agregar tus íconos al proyecto con una herramienta útil, Asset Studio.
- Para acceder a esta herramienta, selecciona File menu > New > Image Asset.
- Cuando se abra Image Asset Studio, selecciona el ícono de carpeta en Ruta de acceso para agregar la capa de primer plano. Elige el archivo SVG exportado como drawable-anydpi/ic_launcher.svg
- Selecciona la pestaña Background Layer y, de manera similar, elige la capa de fondo que se exportó. Como alternativa, elige Tipo de recurso: Color para tener un color sólido como fondo del Launcher.
- Vuelve a la capa en primer plano y verifica que la imagen esté dentro de la zona segura. Cambia el tamaño del ícono al que mejor se vea.
- Cuando termines, haz clic en Siguiente. Se te preguntará dónde deben ir los íconos dentro de tu proyecto (deja la opción predeterminada o cambia a Main). Luego, haz clic en Finalizar. Podrás encontrar los recursos del 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 bien importa manualmente la capa monocromática haciendo clic con el botón derecho en la carpeta res y seleccionando New > Vector Asset.
- En res/mipmap-anydpi-v26/ic_launcher.xml y res/mipmap-anydpi-v26/ic_launcher_round.xml, agrega o cambia el atributo 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 un emulador. Veamos cómo se verán nuestros íconos en la realidad.
Deberías tener un emulador configurado 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 final de producción. Pero, ¿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 control de calidad 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 equipo de 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, fuiste más allá y te sumergiste en Android Studio para obtener una vista previa de los recursos y convertirlos 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.