Desde que Brad Frost popularizó el uso de sistemas de diseño en el diseño digital En 2013se han convertido en un recurso valioso para organizaciones e incluso individuos que desean crear patrones de diseño reutilizables que se vean y se sientan consistentes.
Pero Brad no sólo popularizó los sistemas de diseño; También nos dio un marco Si bien no tenemos que seguir el marco exactamente para construirlos (la mayoría de las personas lo adaptarán a sus propias necesidades), una parte particularmente importante de la mayoría de los sistemas de diseño es Variantesellos son cambiar componentes. Las variaciones de componentes permiten diseñar componentes que son idénticos pero diferentes de otros componentes para que los usuarios los entiendan de inmediato y al mismo tiempo brinden claridad para contextos únicos.
Esto hace que las variaciones de los componentes sean tan importantes como el propio componente. Garantizan que no creemos demasiados componentes que deban gestionarse individualmente, incluso si son sólo ligeramente diferentes de otros componentes, y también garantizan una coherencia organizativa y visual ya que las variantes de los componentes se agrupan.
Ahora podemos usarlos tarro de plumauna herramienta de diseño web de código abierto donde el diseño se expresa como código. En este artículo aprenderá sobre las variantes y su lugar en ellas. sistema de diseñoy cómo utilizarlos eficazmente en Penpot.
Paso 1: organiza tus tokens de diseño
En la mayoría de los casos, la diferencia entre una variante y otra es ficha de diseño Está usado. Pero ¿qué son exactamente los tokens de diseño?
Imagine un color de marca, suponiendo que el valor del color es igual a hsl(270 100 42) en CSS. Guardamos esto como un «token de diseño» llamado color.brand.default De esta forma podremos reutilizarlo más fácilmente sin tener que recordar contenidos más engorrosos. hsl(270 100 42).
Desde allí, también podemos crear un segundo token de diseño llamado background.button.primary.default y configúrelo en color.brand.defaulthaciéndolos así iguales al mismo color pero con nombres diferentes para crear una separación semántica entre los dos. Esta referencia del valor de un token de otro token a menudo se denomina «alias».
Esta configuración nos brinda la flexibilidad de cambiar el valor del color en todo el documento, cambiar el color usado en el componente (tal vez cambiando a un alias de token diferente) o crear variaciones del componente que usan diferentes colores. En última instancia, el objetivo es poder realizar cambios en muchos lugares al mismo tiempo, en lugar de realizar cambios uno por uno, principalmente editando el valor de la etiqueta de diseño en lugar del diseño en sí, realizando cambios dentro de un alcance específico, en lugar de limitarnos a cambios de todo o nada. Esto también nos permite escalar nuestro sistema de diseño sin limitaciones.
Con eso en mente, aquí hay algunas ideas aproximadas para algunas marcas de diseño relacionadas con el color para botones principales con estados de desplazamiento y deshabilitados:
| Nombre del token | Valor del token |
|---|---|
color.brand.default |
hsl(270 100 42) |
color.brand.lighter |
hsl(270 100 52) |
color.brand.lightest |
hsl(270 100 95) |
color.brand.muted |
hsl(270 5 50) |
background.button.primary.default |
{color.brand.default} |
background.button.primary.hover |
{color.brand.lighter} |
background.button.primary.disabled |
{color.brand.muted} |
text.button.primary.default |
{color.brand.lightest} |
text.button.primary.hover |
{color.brand.lightest} |
text.button.primary.disabled |
{color.brand.lightest} |
Para crear un token de color en Penpot, cambie a la pestaña Tokens en el panel izquierdo, haga clic en el signo más (+) junto a Color y especifique un nombre, valor y una descripción opcional.
Por ejemplo:
- Nombre:
color.brand.default, - valor:
hsl(270 100 42)(Hay un selector de color si es necesario).
El proceso para otros tipos de tokens de diseño es casi el mismo.
No te preocupes, no te explicaré todos los tokens de diseño, pero te mostraré cómo crear uno. Alias. Simplemente repita los pasos anteriores, pero para los valores, observe cómo acabo de citar otra etiqueta de color (asegúrese de incluir las llaves):
- Nombre:
background.button.primary.default, - valor:
{color.brand.default}
Ahora, si el valor del color cambia, el fondo del botón también cambia. Y si queremos desacoplar el color del botón, todo lo que tenemos que hacer es hacer referencia a una etiqueta o valor de color diferente. Mikołaj Dobrucki lo detalla en otro artículo Maravilloso artículopero vale la pena señalar aquí que los tokens de diseño de Penpot son independientes de la plataforma. siguen la estandarización Formato W3C DTCGlo que significa que son compatibles con otras herramientas y se pueden exportar fácilmente a todas las plataformas, incluidas la web, iOS y Android.
En los próximos pasos, crearemos un componente de botón y sus variantes, mientras insertamos diferentes marcas de diseño en las diferentes variantes. Aprenderá por qué esto es tan útil y cómo el uso de tokens de diseño en variaciones beneficia al sistema de diseño general.
Paso 2: crear el componente
Debe crear lo que se llama un componente «maestro», que luego actualizará según sea necesario. Los otros componentes (los que realmente insertarás en el diseño) serán copias (o «instancias») del componente principal, y ese es el punto, ¿verdad? Actualice una vez y los cambios se reflejarán en todas partes.
Esto es lo que hice antes, sin los colores:
Para aplicar un token de diseño, asegúrese de estar en la pestaña Tokens y de tener seleccionada la capa relevante, luego seleccione el token de diseño al que desea aplicarlo:
No importa qué variante cree primero, pero es posible que desee utilizar la variante predeterminada como punto de partida, como lo hice yo. De cualquier manera, para convertir este botón en un componente principal, seleccione el objeto del botón a través del lienzo (o la pestaña «Capas»), haga clic derecho sobre él y seleccione la opción «Crear componente» en el menú contextual (o simplemente presione teclas de control / ⌘ + k después de la selección).
Recuerde también nombrar sus componentes. Puede hacerlo haciendo doble clic en el nombre (también a través del lienzo o la pestaña Capas).
Paso 3: crear variaciones de componentes
Para crear una variación, seleccione el componente principal y haga clic teclas de control / ⌘ + k Método abreviado de teclado, o haga clic en el icono que muestra la información sobre herramientas Crear variaciones (ubicada en la pestaña Diseño en el panel derecho).
A continuación, con la variante aún seleccionada, realice los cambios de diseño necesarios a través de la pestaña Diseño. Alternativamente, si desea intercambiar sus tokens de diseño por otros tokens de diseño, puede hacerlo a través de la pestaña Tokens de la misma manera que comenzó a aplicarlos. Enjuague y repita hasta que todas las variaciones estén diseñadas en el lienzo:
Después de eso, como habrás adivinado, debes nombrar tu variante. Pero evita hacer esto a través del panel Capas. En su lugar, seleccione una variante y reemplace «Atributo1» con una etiqueta que describa los diferentes atributos de cada variante. Dado que las variaciones de los botones en este ejemplo representan diferentes estados del mismo botón, las llamé «estados». Esto funciona para todas las variaciones, por lo que sólo tienes que hacerlo una vez.
Junto al nombre de la propiedad verá «Valor 1» o algo similar. Edite el nombre de cada variación, como el nombre del estado. En mi caso, los nombré Predeterminado, Flotar y Desactivado.
Sí, puede agregar más propiedades al componente. Para hacer esto, haga clic en el signo más cercano (+) diagrama. Sin embargo, pronto discutiré en detalle las variaciones de componentes a gran escala.
Para ver el componente en acción, cambie a la pestaña Activos (ubicada en el panel izquierdo) y arrastre el componente al lienzo para inicializar una instancia del mismo. Nuevamente, recuerde seleccionar los valores de propiedad correctos en la pestaña Diseño:
Si ya tienes Sistema de diseño de tarros de bolígrafos.combinar varios componentes en uno con variaciones no solo es simple y a prueba de errores, sino que si está utilizando un sistema de nombres de propiedades sólido que utiliza barras diagonales, probablemente ya sea bueno (/). Penpot ha puesto Una guía muy sencillapero la siguiente imagen lo resume muy bien:
Cómo funcionan las variantes de componentes a escala
Los tokens de diseño, los componentes y las variantes de los componentes (la triple amenaza de los sistemas de diseño) trabajan juntos para crear no sólo un sistema de diseño potente y flexible, sino también un sistema de diseño escalable y sostenible. Esto es más fácil de lograr cuando se piensa en el futuro, comenzando con el diseño de sus tokens y usando alias de tokens para separar el «qué» del «qué», aunque puede parecer detallado al principio.
Por ejemplo, he usado color.brand.lightest Para el color del texto de cada variante, pero en lugar de insertar la etiqueta de color directamente, creé un alias, por ejemplo. text.button.primary.default. Esto significa que luego puedo cambiar el color del texto de cualquier variante sin tener que profundizar en la variante real en el lienzo ni forzar un cambio. color.brand.lightest Esto puede afectar a muchos otros componentes.
Porque recuerda, si bien los componentes y sus variaciones nos brindan la reutilización de botones, Las etiquetas de color nos permiten reutilizar coloresque puede usarse en docenas, si no cientos, de otros componentes. Un sistema de diseño es como un ecosistema vivo que respira, algunas partes están conectadas, otras no están conectadas, algunas partes están conectadas y pueden no estar conectadas, pero pueden estar conectadas en el futuro, y debemos estar preparados para eso.
La buena noticia es que Penpot hace que todo esto sea muy manejable siempre que planifiques un poco de antemano.
Considere los siguientes puntos:
- Marcado de diseño (por ejemplo, color, tamaño de fuente, etc.) que reutilizará.
- Diseñar etiquetas donde se reutilizarán los alias (por ejemplo, botones, títulos, etc.),
- Organizar el marcado de diseño en colocar,
- Organiza la colección en tema,
- Organizar temas en grupo,
- los diferentes componentes que necesita, y
- Se requieren diferentes variantes y propiedades de variante para cada componente.
Incluso los botones que estoy diseñando hoy aquí se pueden ampliar mucho más allá de lo que ya he simulado. Piense en todas las posibles variaciones que podrían surgir, como el color del botón secundario, el color terciario, el color de confirmación, el color de advertencia, el color de cancelación, diferentes colores para los modos claro y oscuro, sin mencionar más atributos para más estados, como los estados activo y de enfoque. ¿Qué pasaría si quisiéramos una matriz completa de variaciones, como dónde se puede colocar el cursor sobre un botón deshabilitado y dónde se pueden enfocar todos los botones? ¿O algunos botones tienen íconos en lugar de etiquetas de texto, o ambas cosas?
Los diseños pueden volverse muy complejos, pero una vez que los organizas en marcas de diseño, componentes y variaciones de componentes en Penpot, en realidad parecen muy simples, especialmente cuando puedes verlos en el lienzo, y más aún cuando puedes realizar cambios significativos en tan solo unos segundos sin romper nada.
en conclusión
Así es como hacemos que las variaciones de componentes funcionen a escala. El beneficio que obtenemos es reutilización mientras se mantiene flexibilidad Bifurca cualquier aspecto de nuestro sistema de diseño, grande o pequeño, sin romperlo. Y las herramientas de diseño como Penpot no sólo pueden construir un sistema de diseño, sino también expresar su marcado y estilo de diseño como código.
(gg, yk)
