1. Introducción
Última actualización: 21/09/2021
Las apps pueden adoptar una variedad de colores de esquemas básicos, colores dinámicos generados por el usuario o colores de la marca.
Prepárate para explorar las nuevas funciones de color dinámico que se introdujeron con Material You. En este lab, crearás paletas de colores dinámicas para aprender cómo funciona el sistema de color, los conceptos que impulsan la creación de paletas de colores accesibles y los métodos para visualizar tu app con color dinámico usando las herramientas de diseño más recientes.
Qué aprenderás
- Novedades en el color de Material Design
- Cómo aplicar el color generado por el usuario a tu app
- Herramientas de ayuda
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
Requisitos
- Cuenta de Figma
- Archivo de Designlab dinámico de colores 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 Visualiza el color dinámico en tu app con Material Design 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 el archivo. Verás que el archivo es independiente y 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 los ejercicios se complementan entre sí, por lo que debes completarlos en orden.
En este codelab, se te guiará a través de esos conceptos y ejercicios con más detalle. Te recomiendo que leas el codelab para obtener más información sobre las nuevas funciones de Material You.
Comienza con la mesa de trabajo Intro. Allí, verás botones que vinculan las mesas de trabajo en orden. Haz clic en el botón para acceder al vínculo.
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. Conceptos de color
¿Qué es el color dinámico?
Material You reinventa el color como una experiencia más individualizada. Gracias a la extracción de color dinámico, el rango de experiencias de color posibles es mucho más amplio.
El color dinámico es una parte clave de Material You en la que un algoritmo deriva colores personalizados del fondo de pantalla de un usuario para aplicarlos a las IU de sus apps y sistema.
Luminancia
El color dinámico está diseñado para funcionar en contextos impredecibles. Para administrar las relaciones de contraste en diversos contextos de visualización, los niveles de luminancia son el atributo clave que permite que los colores se combinen correctamente, incluso sin que el equipo de productos pruebe cada combinación de colores específica.
Los elementos con una luminancia similar no tendrán un contraste adecuado para la legibilidad, mientras que los elementos con diferentes valores de luminancia serán más distinguibles.
Paletas de tonos
Una paleta tonal es la traducción de un matiz (un color dinámico extraído) en un espectro de tonos relacionados. La traducción de un color en trece tonos permite aplicar un grupo de rangos tonales, llamado paleta tonal, en diferentes contextos, desde elementos individuales dentro de un componente hasta temas completos de la app.
Color traducido a un rango tonal.
4. Extracción de colores
De la semilla al esquema
Veamos cómo funciona el color dinámico con Material Theme Builder.
- Abre Material Theme Builder. Con la opción dinámica seleccionada, suelta una imagen o selecciona una en el explorador de archivos. Observa que el color semilla se actualizará según la imagen.
- Los valores de color se extraen de un fondo de pantalla y se les asigna un "tipo" que determina cómo se relacionará el color con otros colores en un esquema. Estos "colores clave" (a la derecha) se actualizaron para reflejar estos valores.
- Luego, se traducen en paletas tonales basadas en la luminancia, lo que genera cinco rangos de color con tonos claros y oscuros. Las paletas tonales se etiquetan como tales en el resultado de color.
- De los cinco rangos tonales, los tonos específicos (según la luminancia) se asignan a los roles predefinidos que componen un esquema. Los colores se asignan a un esquema a través de tokens de diseño.
Roles de color terciario creados a partir de un rango tonal terciario y asignados a componentes.
5. Temas y tokens
Los tokens de diseño permiten flexibilidad y coherencia en un producto, ya que permiten a los diseñadores, por ejemplo, asignar el rol de color de un elemento en una IU, en lugar de un valor establecido. Los tokens actúan como un puente entre el rol asignado de un elemento y el valor de color elegido para un rol. Con la introducción del color dinámico, es más fundamental diseñar en función del rol de un color que del color específico.
Los temas contienen tokens de Material Design para el color y la tipografía, lo que garantiza que los diseños y el código tengan una sola fuente de verdad para representar la referencia, junto con paletas generadas por el usuario y valores personalizados.
En Figma, el complemento genera estos tokens como estilos, lo que significa que, si usas los estilos generados, usarás los tokens de MD.
Los colores de una paleta tonal se asignan a un esquema claro u oscuro a través de tokens de diseño.
El sistema de asignación asigna un tono a cada elemento de un componente.
Tokens de configuración
Para aplicar el color dinámico a tus diseños, deberemos configurar la maqueta según los tokens del tema de Material existente.
- Selecciona el marco del diseño y haz clic en swap para configurar todos los tokens (estilos de Figma) del diseño a la derecha para que utilicen este tema. Verás que el prefijo de estilo se actualiza en los colores de selección.
Haz clic en Intercambiar para actualizar el tema conectado que se usa en el diseño seleccionado.
- Ahora, suelta una imagen o selecciona una en el navegador de archivos. Los valores de la simulación adoptarán el color dinámico extraído de la imagen.
- Haz clic en el botón de reproducción aleatoria para aleatorizar el color inicial del que se extrapolará en lugar de extraerlo de la imagen. Esta es otra forma de ver rápidamente cómo el color dinámico puede afectar tus simulaciones de diseño.
Hacer clic en el botón de aleatorizar para cambiar el color de semilla de forma aleatoria
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.
6. Aplicación a la IU
Los diseños proporcionados se crearon con el kit de Material Design, que utiliza tokens de Material Design, pero hay algunos elementos personalizados que no se asignan.
- Selecciona las tarjetas de artículos. En el relleno, establece el estilo (ícono de cuatro puntos) en material-theme/surface. (También puedes buscar la superficie).
- En un proceso similar, selecciona el tipo en las tarjetas y configúralo como on-surface y las casillas de verificación como principal.
Son los estilos de Figma que se usan en las tarjetas del diseño.
A continuación, crearemos simulaciones adicionales para iterar el resto de los esquemas.
Crea temas y realiza iteraciones
Ahora conectamos por completo un simulacro para visualizar el color dinámico, pero también podemos crear varios temas y cambiarlos en simulacros separados para visualizar una variedad de colores dinámicos a la vez.
- En la ventana modal del complemento, haz clic en el menú desplegable y selecciona "Agregar tema nuevo".
- Crea un nombre de tema único y haz clic en "Crear tema". Esto también generará nuevos diagramas de color para cada tema creado.
Agregar un tema nuevo a través del menú desplegable
- Agrega una imagen o mezcla el color inicial.
- En la ventana modal del complemento, selecciona una simulación (componente de IU de la app) y haz clic en swap. Esto actualizará los valores de estilo al tema actual que se muestra en el menú desplegable.
- Duplica (CMD + D) la maqueta.
Haz clic en Intercambiar para actualizar el tema conectado que se usa en el diseño seleccionado.
- Repite los pasos del 1 al 5.
Ahora tienes varios diseños con diferentes iteraciones de color dinámico.
7. Felicitaciones
¡Hiciste un gran trabajo aprendiendo y aplicando el color dinámico! Material Theme Builder está aquí para ayudarte a que el color en Material Design sea más fácil para ti, ya que visualiza el color dinámico, crea temas personalizados y exporta al código.
Si tienes alguna pregunta, no dudes en consultarnos en cualquier momento mediante @MaterialDesign en Twitter.
Mira más instructivos y contenido de diseño en youtube.com/MaterialDesign.