Cómo desarrollar un Design System en Adobe XD

Esta es la última de nuestra serie de 3 partes sobre arquitectura Design System. En el primero, explicamos todo sobre los Sistemas de Diseño, los beneficios que ofrecen y cómo construir uno en 6 sencillos pasos, y cómo realmente ayuda Indigo.Design el camino. En la segunda entrada del blog describimos cómo construir un Design System en Sketch y qué aspectos clave incluir en él. Ahora, el tercero se centra en cómo se puede desarrollar un Design System en Adobe XD para garantizar la coherencia en todos los proyectos de diseño, crear resultados más rápido y mantener activos y componentes actualizados que se puedan reutilizar fácilmente.

¿Qué es Adobe XD?

Adobe XD es una de las herramientas de diseño gráfico vectorial más populares que se utiliza para crear prototipos, diseño de interacción y una excelente experiencia de usuario. Con él, también puede diseñar wireframes y aplicaciones, colaborar entre equipos, configurar animaciones, recopilar comentarios y crear diseños 3D y reutilizables.

¿Cuáles son las ventajas de Adobe XD?

• Prototipos interactivos y wireframes
• Reusable design elements
• Funcionalidad de diseño enriquecida
• El software es gratuito
• Posibilidad de compartir entregas y recopilar comentarios

¿Cuáles son las desventajas de Adobe XD?

• No se puede transferir su prototipo o estructura alámbrica a un diseño oficial
• No genera código
• Few plugins 
• Muchas restricciones y limitaciones en la versión gratuita

¿Qué es Adobe XD Design System?

Para garantizar la coherencia del diseño de la experiencia de usuario y la interfaz de usuario para los proyectos actuales y futuros cuando se utilizan archivos de Adobe XD, es mejor tener un Design System. Un Design System de Adobe XD servirá como una única fuente de verdad, recopilando todos los patrones de diseño y las mejores prácticas de diseño para una transición más rápida de la ideación al diseño.

¿Cómo crear tu Design System en Adobe XD?

Pensemos por un momento en Mcdonald's como una de las marcas de mayor valor en el mundo desde la perspectiva del diseñador. A pesar de que el logotipo cambió hace unos años para transmitir un estilo de vida más saludable, la marca conserva sus conocidos y fácilmente reconocibles colores rojo y amarillo que la definen. Sin embargo, el diseño de un producto digital necesita algo más que un tono de un solo color. Y cuando se trata de construir un Design System en Adobe XD, tarde o temprano te darás cuenta de que necesitas paletas con tonos del mismo tono base para dos, tres o incluso más colores.

Color palettes

Para lograr una arquitectura rígida para sus colores en Adobe XD, comience dibujando un rectángulo, rellénelo con rojo vibrante o cualquier otro color para usarlo como base y cree un componente a partir de él. A continuación, cree tantas instancias como necesite. En Indigo.Design, cada color tiene diez variaciones: la base y 9 derivadas de él. Ahora extiende algunas de esas instancias a la izquierda del maestro para las variaciones más oscuras y a la derecha para los tonos más claros. Para cada símbolo de la izquierda, apila dos rectángulos por encima de la capa de color base con el mismo tamaño. La capa más cercana se utilizará para saturar y la otra para oscurecer con un relleno negro semitransparente. Puede ajustar las propiedades de estos dos rectángulos para lograr tonos cada vez más oscuros de su color base.

Para las instancias de la derecha, siga un patrón similar agregando rectángulos encima de cada una. La única diferencia es que debes asegurarte de desaturar y aclarar con un relleno blanco semitransparente, lo que te dará los tonos más claros. Una vez que esté todo listo, puede agrupar cada variante y nombrarla en consecuencia, por ejemplo, de 900 a 600 primario para la más oscura y de 400 a 50 para las más claras, manteniendo 500 reservado para el tono de color base como en Indigo.Design. Puede hacer lo mismo para un tono amarillo y verde, creando así los tonos de color secundarios y terciarios para la marca McDonalds también.

El segundo paso importante cuando se trata de colores nos lleva al panel de activos para agregar estos como "Colores" reutilizables. Dado que Adobe XD requiere el uso de un valor hexadecimal simple para el recurso de color, simplemente dibuje un rectángulo y elija con la herramienta cuentagotas la matriz de colores uno por uno, agregándolos a los activos de color con el ícono más que se encuentra a la derecha del encabezado "Colores" en la parte superior del panel. Esto puede ser algo tedioso, pero valdrá la pena a largo plazo.

Le aconsejo que agrupe los activos de color con una base común y nombre estos grupos de paneles de activos en consecuencia para obtener un Design System de Adobe XD consistente y bien organizado. Esto se convierte en una necesidad si su sistema de diseño se escala como el nuestro para incluir casi 50 colores.

Los colores grises son muy distintos de otros colores y hay dos opiniones opuestas repartidas entre las comunidades de diseñadores. Algunos argumentan que los colores grises deben tratarse como cualquier otra matriz de colores con un tono base en el medio y derivados con tonos más oscuros y más claros. Otras ponen la base en un extremo de la paleta y logran el resto de tonalidades jugando con la opacidad. Ambos enfoques funcionan si piensas en un solo tema. Sin embargo, admitir variaciones de temas claros y oscuros con su Design System en Adobe XD significa que debemos considerar el segundo enfoque en lugar del primero.

En la práctica, deberíamos crear diez rectángulos para nuestras 900 a 50 variantes, rellenarlos todos de negro y comenzar a disminuir la opacidad a intervalos regulares. Nuestra variante 900 tendrá un valor del 87%, nuestra 800 usará el 74% y así sucesivamente hasta el 50, que será solo el 2%. Con un color especial adicional para la superficie, es decir, el fondo de la aplicación, así como el fondo para algunos componentes como tarjetas y listas, estamos listos para agregar estos colores adicionales como activos. Solo que esta vez podemos hacerlo directamente desde los rectángulos que dibujamos, ya que representan valores hexadecimales simples.

Con esto en su lugar y la opción de agregar algunos colores más para casos de uso de validación especiales y visualizaciones de datos, estamos listos. Lo que nos encanta de Adobe XD es cómo permite aplicar un color como relleno o como borde seleccionando la capa de destino y haciendo clic con el botón derecho del ratón en el color en el panel de activos. Esto significa que no necesitamos crear variantes de activos de relleno y borde para los 30+ colores que tenemos en este momento y nos ahorra algo de tiempo y repeticiones. Para terminar, con respecto a los colores, me gustaría compartir un pequeño secreto de color: cree un recurso de color transparente con 0% de opacidad para poder hacer que los elementos gráficos desaparezcan visualmente de sus componentes, pero mantenga su lugar y espacio si desea que el diseño persista.

Tipografía

El siguiente pilar de una marca es la tipografía. Piensa en la "M" de McDonalds, sea cual sea su color, seguirás reconociendo la marca. Las tipografías son también uno de los principales pilares de los sistemas de diseño escalables. En Adobe XD, al final acaban en el panel de activos siguiendo un enfoque similar al de los colores. Sin embargo, la arquitectura de la tipografía de tu Design System de Adobe XD significa que debes elegir las propiedades de la fuente para crear tantas escalas de tipo como necesiten tus componentes y los usuarios de tu sistema de diseño tendrán a su disposición para diseñar cualquier cosa relacionada con el producto, desde artículos de blog hasta interfaces de usuario complejas.

Hay dos propiedades de fuente clave en las que debes centrarte. Obviamente, el tamaño de la fuente es lo que da a los bloques de texto su estructura, pero a veces, cuanto mayor es el tamaño de la fuente, más delgado desea que aparezca. Otras veces, un texto debe ser más grueso para parecer más prominente y destacarse del resto de la oración. Con combinaciones de estas propiedades, puede crear un conjunto de encabezados, subtítulos y texto del cuerpo, por nombrar solo algunos. También tendrá la tentación de agregar algunos estilos de carácter específicos de componentes, pero hágalo con precaución. Por ejemplo, tiene sentido tener una tipografía de botón con transformación de texto que lo haga todo en mayúsculas como en Material, o para la inicial de un avatar sus propios tamaños y tratamientos específicos, pero introducir demasiados de estos puede disminuir la consistencia general de su sistema de diseño.

Debemos considerar cuidadosamente el impacto de agregar una escala de tipos, ya que no queremos que nuestros estilos de carácter exploten, o que sea fácil para los usuarios de nuestro sistema de diseño explotarlo y romper las pautas de diseño que tenemos establecidas. Una cosa que le encanta al equipo detrás de Indigo.Design para Adobe XD es cómo el programa nos permite combinar colores con estilos de personajes. Esto significa que no tenemos que crear variantes basadas en el color para las tipografías que hemos definido, lo que nos ahorra más tiempo y repeticiones.

Otra ventaja de Adobe XD es que la alineación del texto no forma parte del estilo de carácter y se puede seleccionar según el caso de uso de cada fragmento de texto. La siguiente imagen muestra la simplicidad de los estilos de carácter definidos en Indigo.Design para Adobe XD, que viene sin sacrificar la facilidad de uso y la flexibilidad.

La segunda mitad de los consejos para diseñar sistemas de diseño escalables y rígidos en Adobe XD están relacionados con los componentes, tanto en términos de elementos de la interfaz de usuario como de piezas atómicas que puedes usar y reutilizar en el contexto de XD.

Los componentes son el mecanismo para usar algo como un elemento independiente que es consistente con sus hermanos, ya que todos ellos están conectados a su única definición: el maestro de componentes. Empezando por algo pequeño y básico como un icono para empezar a montar tu conjunto de iconos, o una colección de sombras o ilustraciones y llegando hasta repetir elementos para crear una lista como ejemplo de una estructura más compleja.

Se puede argumentar que los iconos, las sombras y las ilustraciones no tienen por qué venir como componentes. Sin embargo, cuando creamos un componente de botón de icono en Adobe XD, queremos definirlo de forma amplia. Como lo usamos en un contexto determinado, generalmente necesitamos cambiar el icono predeterminado por otro. Lo mismo ocurre con la ilustración de estado vacío y una carta cuya sombra se hace más grande al seleccionarla para que parezca más cercana a ti.

Una vez que tenga los colores y estilos de carácter, póngase en marcha para crear componentes que alimenten sus iconos en el Design System de Adobe XD . Ya sea que esté utilizando un conjunto de terceros, como íconos de materiales, fuentes impresionantes o su propia colección personalizada, simplemente elija un tamaño predeterminado y cree componentes con los glifos de íconos. Indigo.Design para Adobe XD utiliza un cuadrado de 24px para la base de sus iconos.

Este es el momento de señalar que una de las cosas más importantes de los íconos es cómo nombra sus componentes representativos. Permítanme darles un ejemplo de Idngo.Design al observar cómo el componente del icono de configuración se llama "_Overrides/Material Icons/action/settings". Comienza con "_Overrides", que designa que el elemento solo debe usarse para anular una instancia de icono colocada en un componente. Luego tenemos "Iconos de materiales", que es el nombre del conjunto de iconos. Las dos últimas partes del nombre definen el nombre de la categoría opcional y el propio nombre del icono.

Las categorías son útiles para crear cierta organización en familias más grandes de iconos, como Material de Google y Material Extended de Infragistics. Dado que Adobe XD tiene un potente mecanismo para la búsqueda de activos, también puede pensar en palabras clave relacionadas con el icono y ponerlas entre paréntesis al final del nombre para que la búsqueda sea más flexible para los usuarios de su Design System en Adobe XD.

Ahora estamos listos para profundizar y hablar sobre la arquitectura de los componentes de la interfaz de usuario. Veremos algunos, pero comencemos con el botón como un ejemplo simple y común.

Lo primero que distingue a un botón de otro es su contexto de uso. Una o dos veces, mostrarás un CTA destacado en una pantalla. Luego, tendrá algunas acciones importantes, a veces también necesitará presentar acciones secundarias y, en ocasiones, es posible que necesite una acción contextual flotante. Por ejemplo, un botón que agrega elementos de lista a una lista.

Lo que esto significa para la arquitectura de un sistema de diseño en Adobe XD es que necesita anticipar diferentes tipos de componentes. Para el botón, estos serán contenidos, delineados, planos y flotantes. Si queremos tener un caso de uso súper simple con solo un ícono, podemos agregar una quinta variante. Lo que define a un botón, además del hecho de que desencadena una acción, es que cada uno de estos tipos tiene una estructura interna similar: fondo, borde, sombra, icono y etiqueta. Y para estas piezas aprovecharemos lo que ya hemos puesto las bases:

• El fondo y el borde utilizarán los recursos de color.
• La sombra y el icono serán componentes primitivos.
• La etiqueta usará un estilo de carácter típico de un botón.

Sin embargo, esto no es todo lo que es un botón y también debemos tener en cuenta estados de interacción como el desplazamiento, el enfoque o aparecer en un estado deshabilitado hasta que se cumpla una determinada condición. Por suerte, Adobe XD ofrece soporte para los estados de los componentes, y funcionan a las mil maravillas. No solo los diseñadores que utilicen su Design System de Adobe XD podrán elegir el estado deshabilitado para un botón en tiempo de diseño, sino que para uno habilitado, el desplazamiento vendrá como un estado interactivo. Esto significa que cuando un usuario presenta un diseño y pasa el cursor sobre un botón, se ajustará para mostrar su estado de desplazamiento.

Debido a que los botones siempre muestran su contenido centrado y pueden tener algunas reglas de espaciado además de eso, debe usar la función de diseño automático para definirlo. Coloque el icono y la etiqueta en un grupo y conviértalo en una pila horizontal con un margen que respete la cuadrícula de diseño que haya elegido. Por ejemplo, 4px o 8px si estás usando una cuadrícula de diseño de 4px. También puede establecer el relleno si siempre desea tener su contenido relleno desde los bordes del botón. Una cosa que debe recordar con el diseño automático es que si tiene texto, su ancho debe configurarse para ajustarse automáticamente de acuerdo con el contenido del texto.

Exploremos ahora el campo de entrada. Viene con una mayor complejidad dado el hecho de que hay tres tipos de entradas en el tema predeterminado de Indigo.Design: línea, cuadro y borde. Una entrada puede venir con una sugerencia o sin una, que también se ha mostrado en el panel de activos. Esto da a los usuarios de su sistema de diseño una elección total de 12 opciones insertables. En un campo de entrada, es posible que tenga componentes anidados para representar cosas como el prefijo y el sufijo que se pueden usar para guiar al usuario sobre la información que se espera que se complete.

Componentes

Finalmente, echemos un vistazo a dos componentes más: grupo de botones y tarjeta. El grupo de botones tiene un componente horizontal y otro vertical que ofrecen arreglos a juego para un conjunto de siete botones. Aplica la pila horizontal o vertical en instancias de componentes de botón, cada uno de los cuales tiene una pila horizontal interna para su contenido. En palabras simples, construimos pilas de pilas y componentes de componentes.

En la imagen de abajo, notarás que tenemos pilas definidas:

• para el grupo interno de botones que está enmascarado
• en el componente maestro general

Esto garantiza que si los usuarios de Indigo.Design eliminan un botón, el fondo, el borde y la sombra del grupo de botones se ajustarán en consecuencia.

La carta puede parecer significativamente diferente, y lo es cuando nos fijamos en las piezas de contenido que contiene. En su esencia, la arquitectura es muy similar al grupo de botones verticales.

Las secciones especiales de una tarjeta se realizan como componentes separados con diferentes variantes. Se pueden anular fácilmente cuando arrastra elementos desde el panel de activos encima del que desea anular. Esto le permite cambiar la pieza multimedia predeterminada de una imagen a un mapa estilizado o jugar con el diseño automático del encabezado para insertar y eliminar elementos con todo adaptándose a estos cambios. Con todo, la tarjeta es solo una pila vertical de áreas específicas, que responde a una gran variedad de posibles actualizaciones.

Para resumir todo hasta este punto, Adobe XD permite no solo establecer una base sólida de colores y estilos de carácter, sino también mezclarlos, estableciendo sus componentes básicos con pilas y acolchados para crear un diseño verdaderamente fluido. A continuación, puede seguir utilizando estos principios fundamentales para diseñar organizaciones de diseño más complejas en tantos niveles como necesite.

Puede ensamblar componentes complejos o patrones de diseño que permitan a los usuarios de su sistema de diseño en Adobe XD diseñar pantallas mucho más rápido. Si alguna vez necesitas cambiar los colores de la marca o pasar de una interfaz de usuario clara a una oscura, sólo tienes que dirigirte a los paneles de activos, actualizar tus colores y estilos de carácter y ¡voilá! Las aplicaciones creadas con tus Design System en Adobe XD se tematizarán en consecuencia.