1. Introducción
Última actualización: 18/4/2022
Las apps pueden adoptar una variedad de colores de esquemas básicos, colores dinámicos generados por el usuario o colores de la marca.
El laboratorio de color de Material You anterior exploró cómo visualizar los colores dinámicos en las maquetas de diseño, pero también puedes usar los temas de Material para personalizar tu app con los colores de tu marca. Si utilizas el nuevo sistema de colores con los colores de tu marca, crearás un esquema de colores accesible que podría adoptar funciones más dinámicas.
Qué aprenderás
- Cómo crear un tema personalizado con Material Theme Builder
- Aplicar un tema personalizado a las maquetas de diseño
- Posibilidades de combinar colores dinámicos y personalizados
Requisitos previos
Para este lab, compilaremos sobre algunos conceptos de diseño básicos.
- Conocimiento de los conceptos básicos de diseño: paletas de colores
- Conocimiento de los roles y esquemas de colores actuales de Android
- Conocimiento de Figma
- Opcional: Visualizar color dinámico en el codelab de tu app
Requisitos
- Una cuenta de Figma
- Archivo de Designlab de Figma
- Complemento de Figma Material Theme Builder
2. Primeros pasos
Configuración
Para comenzar, debes acceder al archivo de Designlab de Figma. Todo lo que necesitas para el lab está en él. Puedes descargar e importar el archivo, o duplicarlo desde la comunidad de Figma.
Primero, accede a Figma o crea una cuenta.
Duplicado de la comunidad de Figma
Navega al archivo Personaliza Material o busca Visualiza el color dinámico en tu app con Material Design en la Comunidad de Figma. En la esquina superior derecha, haz clic en Duplicate para copiar el archivo a tus archivos.
Diseño de archivo
Observa que el archivo es independiente y que comienza con una introducción. Cada sección se divide en una fila de mesas de trabajo que están vinculadas entre sí, con algunos conceptos básicos para la sección, seguidos de ejercicios. Las secciones y ejercicios se complementan entre sí y deben completarse de forma secuencial.
En este codelab, se explican esos conceptos y ejercicios con mayor detalle. Lee el codelab para obtener más información sobre las nuevas funciones de Material You.
Comenzando por la mesa de trabajo Intro, hay botones que vinculan las mesas de trabajo en orden. Para acceder al vínculo, haz clic en el botón.
Instala el complemento de Figma
Este codelab depende en gran medida de un nuevo complemento de Figma para generar tokens y esquemas de colores dinámicos. Instala el complemento de Figma directamente desde la página de la comunidad de Figma o busca “Material Theme Builder” en la Comunidad de Figma.
3. Esquema de colores de Material
Primero, una descripción general de cómo se usa el color en Material y cómo funciona el nuevo sistema de color.
El color se utiliza para expresar el estilo y comunicar un significado, ya sea personal para el usuario, de marca o semántico. El sistema de color controla la variabilidad de los esquemas de color que cambian dinámicamente y surgen como cambios de entrada del usuario. La lógica de las relaciones tonales y los cambios en el tono y el croma proporcionan una base para la aplicación flexible del color.
El espacio de color proporciona una forma de generar esquemas de colores claros y oscuros accesibles extraídos de un color fuente. Para ello, se generan 5 colores clave y, luego, paletas tonales, en las que se seleccionan ciertos pasos tonales.
Esta técnica de cambio de color no solo proporciona un esquema de colores accesible, sino que también ofrece métodos para crear esquemas de marca que sean accesibles y coherentes con los esquemas de colores generados por el usuario.
Los esquemas de colores se generan a partir de 5 colores clave en paletas tonales para crear esquemas accesibles
Tema de marca
M3 admite aplicaciones sistemáticas de parámetros personalizados para ayudar a definir y mantener los estilos que comunican tu marca.
Un esquema personalizado es un esquema de color que no se deriva del fondo de pantalla del dispositivo del usuario, sino del creador de la app. El sistema de colores de M3 y los esquemas personalizados son la base para habilitar el color dinámico en las apps.
El esquema personalizado cerrará la brecha entre M2 y M3 para facilitar la migración configurando los tokens necesarios (ranuras de color) y creando una experiencia más acorde con la marca.
Cómo agregar colores de la marca a Material Theme Builder
4. Esquema de colores: Colores de los elementos destacados
La base de un esquema de colores es el conjunto de cinco colores clave que se relacionan individualmente con paletas tonales separadas con 13 tonos. Se asignan tonos específicos de cada paleta tonal a los roles de color en toda la IU. Comencemos por abrir el complemento Material Theme Builder y configurar nuestro primer color de énfasis: Principal.
Si solo ingresas el color principal, se usará como fuente para generar un esquema de colores completo.
- En la ventana modal del complemento, haz clic en Personalizada. De esta forma, se cambiará a un tema personalizado. En este lab, usaremos el tema de Material que ya se generó, pero también puedes crear uno nuevo si lo deseas. Obtén más información en cómo visualizar un color dinámico.
- A continuación, estableceremos un color de clave primaria. El color principal puede ser el color principal de tu marca o el color principal de los elementos destacados que más se utiliza. El resto de los colores clave se propagarán según el color principal. Es decir, no es necesario agregar colores adicionales si no los necesitas.
5. Crea el resto del tema
El color principal se usa para generar el tema, pero es posible que tengas colores de acento para complementar el color principal de la marca.
- En la ventana modal del complemento, haz clic en el selector de color secundario para agregar un color secundario. Los roles secundarios se usan para los componentes menos destacados de la IU, a la vez que amplían la oportunidad de expresión del color. El color secundario se actualizará en el esquema de colores y en la IU de la app.
- Haz lo mismo con el color terciario. Los roles terciarios se usan para contrastar los acentos que pueden utilizarse para equilibrar los colores primarios y secundarios, o dirigir la atención hacia un elemento. El rol de color terciario se deja a discreción de los creadores y está diseñado para admitir una expresión de color más amplia en los productos.
- Ahora neutros, los roles neutros se usan para superficies y fondos, y para texto e íconos con un énfasis alto.
Proporciona colores secundarios, terciarios y neutros para personalizar por completo tu esquema de colores.
Los colores de tu marca ahora se incluirán en el esquema de colores principal, se desplazarán para que coincidan con el espacio de color de M3, serán completamente accesibles y se podrán exportar e implementar dentro del código como un tema.
6. Cómo aplicar tu tema
Roles y tokens
Cada color de contraste (primario, secundario y terciario) se proporciona en un grupo de cuatro colores compatibles de diferentes tonos para crear una vinculación, definir el énfasis y lograr una expresión visual. El grupo está formado por el color de énfasis, el color de énfasis sobre un color, el contenedor y el color de énfasis sobre un contenedor.
Los roles neutros se usan para las superficies y los fondos, y para el texto y los íconos con un énfasis alto.
Los tokens de diseño representan las pequeñas decisiones de diseño repetidas que componen el estilo visual de un sistema de diseño. Los tokens reemplazan los valores estáticos, como los códigos hexadecimales de color, con nombres evidentes. Los tokens de diseño conectan de manera significativa las opciones de estilo que, de otro modo, carecerían de una relación clara.
El complemento de Figma crea tokens y te permite ingresar tus propios colores de origen en forma de estilos de Figma para conectarte con maquetas existentes, guías de estilo de la marca y hasta sistemas de diseño.
Los tokens de diseño crean un lenguaje común entre los roles de color y la implementación.
Jerarquía de colores
Cuando apliques roles de color a tus simulaciones, ten en cuenta el orden de importancia, o la jerarquía, de tus elementos. Este concepto te ayudará a asignar los colores de la marca a sus respectivos roles, pero también a asignarlos dentro de la IU. Por lo general, los colores más saturados o concentrados captarán la atención del usuario primero. Por eso, el rol de color principal se asigna a componentes que se enfocan más en los llamados a la acción. Si bien Material Theme Builder usa el sistema de colores de M3 para generar colores adecuados, proporcionar colores secundarios o terciarios con mayor saturación creará colores que superen a su color principal. Considera el orden en el que quieres que tus usuarios interactúen con la IU y el contenido para asignar roles de color. No todos los componentes deben usar el color principal.
Los colores saturados sólidos son los que más llaman la atención.
7. Cambiar al tema
Para aplicar el tema personalizado que creaste a tus diseños, deberemos configurar la simulación para los tokens en el tema de Material existente.
Los componentes de Material incluyen roles preasignados y funcionarán automáticamente con Material Theme Builder.
Cambia al tema desde la ventana modal de Material Theme Builder.
- Establezcamos todos los tokens (estilos de Figma) en el diseño a la derecha para utilizar este tema. Para ello, selecciona el marco del diseño y haz clic en Intercambiar. Verás que el prefijo de estilo se actualiza en los colores de selección.
- ¿No se actualizó todo? Los componentes personalizados, como la tarjeta de sugerencias para el cuidado de las plantas, primero deberán aplicar el estilo de Figma. Selecciona el contenedor de sugerencias de cuidado y, con el contenedor seleccionado, haz clic en el ícono de 4 puntos para asignar un estilo y elige contenedor secundario. Haz lo mismo con el contenido de la tarjeta de sugerencias de cuidado, excepto que debes asignar un contenedor secundario. Las etiquetas pequeñas de la lista también son componentes personalizados, pero volveremos a ellas más adelante.
- Los componentes de Material Design usan asignaciones predeterminadas, pero puedes experimentar con las asignaciones de estilo para que se adapten mejor a la IU. Dedica un momento a experimentar con diferentes jerarquías de color y expresiones de marca.
(Solo el tema se incluye en el archivo de exportación para el código. Si trabajas con un ingeniero, comparte simulaciones para comunicar las asignaciones de tokens, ya que no se incluirán en la exportación.
Si abres el complemento sin un tema, se mostrará una pantalla de configuración para comenzar. La opción "Comenzar" generará el "material-theme" de referencia predeterminado como un grupo de estilos de Figma para conectarlo a tus simulaciones o usarlo con el kit de Material Design.
8. Extensión más allá del esquema principal
Ahora tienes un tema de color de la marca asignado a los componentes y a la simulación de diseño, pero es posible que tengas colores adicionales que deban incluirse. Ahí es donde entra en juego un esquema extendido para permitir la adición de colores personalizados.
Pueden ser colores semánticos, específicos de la marca o incluso específicos del producto, que deben tener roles asignados y cambiarse a través del algoritmo de color o permanecer como se ingresaron.
El esquema de colores extendido también presenta la posibilidad de combinar colores dinámicos (generados por el usuario) con los colores de tu marca. Permite que el esquema principal tenga influencia personalizada del usuario, mientras que los colores de la marca se establecen en el esquema extendido. Esto significa que los elementos de la IU pueden ser más personales para tus usuarios y que los colores de tu marca pueden tener momentos de impacto más precisos en la app.
El esquema principal se puede extender para incluir colores personalizados. 
9. Extensión y personalización
Extender el esquema con colores personalizados permite agregar colores semánticos o colores adicionales de la marca.
Esquema personalizado con colores personalizados agregados.
- En la ventana modal del complemento, debajo de los colores clave, haz clic en Agregar un color.
- El tema actual se actualizará con una nueva fila Custom0. Para actualizar este color, haz clic en el selector y elige uno nuevo.
- Estos colores extendidos se pueden encontrar como un estilo dentro de los estilos de solo lectura como Custom0. Su paleta y esquema de tonos están presentes. Asignemos algunas de las etiquetas de la lista con el nuevo color. Para ello, selecciona el fondo de la etiqueta y asigna uno de los roles del color agregado (en el contenedor custom0).
Cómo establecer un color personalizado en los colores seleccionados
- Material Theme Builder genera automáticamente los colores como Custom#. Para cambiar el nombre de un color personalizado agregado, expande el grupo de estilos del tema en el panel de estilos (aparecerá cuando no haya nada seleccionado). Luego, busca Custom0 dentro del subgrupo de la fuente. Si cambias el nombre de la fuente aquí, se cambiará el nombre del color en la ventana modal del complemento.
Los estilos de color personalizados se encuentran en el panel de estilos.
- Para borrar el color agregado, haz clic con el botón derecho y borra el estilo. La próxima vez que se abra el complemento, se quitará el color agregado. Es posible que los cambios de nombre y las eliminaciones no se reflejen en el diagrama de colores.
10. Felicitaciones
Hiciste un gran trabajo aprendiendo a compilar un tema de color personalizado con Material Theme Builder, aplicarlo a simulaciones de diseño y agregarlo al esquema de colores. El nuevo sistema de color de Material 3 aporta color accesible, flexible y cohesivo a los diseños, y no podemos esperar a ver cómo los usas.
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.