1. Introducción
Última actualización: 18/4/2022
Las apps pueden adoptar una variedad de colores de esquemas de referencia, colores dinámicos generados por el usuario o colores de la marca.
En el lab de colores de Material You anterior, se exploró cómo visualizar colores dinámicos en maquetas de diseño, pero también puedes usar 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, se creará un esquema de colores accesible que podría adoptar más funciones dinámicas.
Qué aprenderás
- Cómo crear un tema personalizado con Material Theme Builder
- Cómo 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
- Un 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 hasta el archivo Customizing Material o busca Visualizing dynamic color in your app with 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 colores.
El color se usa 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 matiz y la croma proporcionan una base para la aplicación de colores flexibles.
El espacio de color proporciona una forma de generar esquemas de colores claros y oscuros accesibles extraídos de un color de origen mediante la generación de 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 proporciona 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 colores 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 mediante la configuración de los tokens necesarios (ranuras de color) y creará una experiencia más personalizada.
Cómo agregar colores de marca en Material Theme Builder
4. Esquema de colores: Colores de contraste
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 una IU. Para comenzar, abre el complemento Material Theme Builder y configura nuestro primer color de contraste: Primary.
Si ingresas solo el color primario, se usará como fuente para generar un esquema de colores completo.
- En la ventana modal del complemento, haz clic en Custom. De esta forma, se cambia a un tema personalizado. Para este lab, usaremos el tema de Material que ya se generó, pero también se puede crear un tema nuevo si lo deseas. Obtén más información en visualizar el color dinámico.
- A continuación, estableceremos el color de clave primaria. El primario puede ser el color principal de tu marca o el color principal más utilizado de los elementos destacados. 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 primario se usa para generar el tema, pero es posible que tengas colores de contraste para admitir el color principal de la marca.
- En la ventana modal del complemento, agrega un color secundario haciendo clic en el color secundario. Los roles secundarios se usan para los componentes menos destacados de la IU, mientras que se amplía la oportunidad de expresión de color. El color secundario se actualizará en el esquema de colores y en la IU de la app.
- Haz lo mismo para 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 para que los creadores lo usen a su discreción y está destinado a admitir una expresión de color más amplia en los productos.
- Ahora, los roles neutros se usan para superficies y fondos, y texto e íconos de é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 que se cambió para que coincida con el espacio de color de M3, sea completamente accesible y se pueda exportar e implementar en el 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 contraste, el color, el contenedor y el contenedor.
Los roles neutros se usan para superficies y fondos, y texto e íconos de énfasis alto.
Los tokens de diseño representan las decisiones de diseño pequeñas y repetidas que componen el estilo visual del sistema de diseño. Los tokens reemplazan los valores estáticos, como los códigos hexadecimales de color, por 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, luego, ingresa tus propios colores de origen en forma de estilos de Figma para conectarse con maquetas existentes, guías de estilo de marca e incluso 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 de un usuario primero. Por este motivo, los componentes de rol de color primario se asignan a los componentes que se centran más en la llamada 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 primario. Considera el orden en el que deseas que tus usuarios interactúen con la IU y el contenido para asignar roles de color. No todos los componentes deben usar el color primario.
El color saturado sólido atrae la mayor atención.
7. Cambiar al tema
Para aplicar el tema personalizado que creaste a tus diseños, deberemos configurar la maqueta en los tokens del tema de Material existente.
Los componentes de Material vienen con roles preasignados y funcionarán automáticamente con Material Theme Builder.
Cambia al tema desde la ventana modal de Material Theme Builder.
- Para usar este tema, selecciona el marco del diseño y haz clic en Swap para configurar todos los tokens (estilos de Figma) en el diseño a la derecha. 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, deberán aplicar primero el estilo de Figma. Selecciona el contenedor de sugerencias para el cuidado. Con el contenedor seleccionado, haz clic en el ícono de 4 puntos para asignar un estilo y elige contenedor terciario. Haz lo mismo con el contenido de la tarjeta de sugerencias para el cuidado, excepto que debes asignar un contenedor terciario. 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. Tómate un momento para jugar con diferentes jerarquías de colores 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 maquetas 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. “Get started” generará el tema de referencia predeterminado “material-theme” como un grupo de estilos de Figma para conectarse a tus maquetas o usarlo con el kit de Material Design.
8. Extensión más allá del esquema principal
Ahora tienes un tema de colores de marca asignado a componentes y maquetas 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 cambiados 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 una 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 más precisos y de mayor impacto 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 como colores semánticos o de marca adicionales.
Esquema personalizado con colores personalizados agregados.
- En la ventana modal del complemento, en los colores clave, haz clic en Add a Color.
- El tema actual se actualizará con una nueva fila Custom0. Para actualizar este color, haz clic en el color y selecciona un color nuevo.
- Estos colores extendidos se pueden encontrar como un estilo dentro de los estilos de solo lectura como Custom0. Su paleta tonal y su esquema están presentes. Asignemos algunas de las etiquetas de la lista con el color nuevo. Para ello, selecciona el fondo de la etiqueta y asigna uno de los roles de color agregados (contenedor on-custom0).
Cómo configurar el 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 se seleccione nada). Luego, busca Custom0 dentro del subgrupo de origen. 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 pueden encontrar en el panel de estilos.
- Para borrar el color agregado, puedes hacer clic con el botón derecho y borrar el estilo de manera similar. La próxima vez que se abra el complemento, se quitará el color agregado. Es posible que el cambio de nombre y la eliminación no se reflejen en el diagrama de colores.
10. Felicitaciones
Excelente trabajo por aprender a crear un tema de colores personalizado con Material Theme Builder, aplicarlo a maquetas de diseño y agregarlo al esquema de colores. El nuevo sistema de colores de Material 3 ofrece colores accesibles, flexibles y coherentes para los diseños, y estamos ansiosos por 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.