Construyendo un Sketch Design System: Consejos y trucos

Crear un Sketch Design System puede parecer demasiado desafiante y lento al principio, pero realmente vale la pena en el futuro. Es una necesidad si desea lograr soluciones consistentes y mejorar sus DesignOps.

Por lo tanto, hemos preparado algunos consejos y trucos útiles para guiarlo a través del proceso de construcción de un sistema de diseño en Sketch.

¿Qué es un Design System?

Los sistemas de diseño generalmente se describen como un conjunto de principios y activos de diseño que se traducen en coherencia en la forma de crear interfaces de usuario. Las tres ventajas principales de utilizar un sistema de diseño son:

• Se adapta a un contexto de uso y un dominio de aplicación específicos.
• Funciona como un inventario de patrones de diseño de UX y una guía de estilo de marca.
• Acelera el proceso de diseño y mejora significativamente la coherencia.

Ya hemos cubierto todo sobre los sistemas de diseño en "6 pasos para construir un gran Design System ", el artículo piloto de nuestra serie de blogs de 3 partes. Por lo tanto, puede echarle un vistazo para explorar el tema en profundidad antes de continuar con la construcción de un sistema de diseño en Sketch.

¿Qué es Sketch?

Es una de las plataformas gráficas vectoriales todo en uno más utilizadas para el diseño digital optimizado. Sketch permite a los creadores de productos digitales visualizar, presentar y transformar sus ideas en diseños móviles de aspecto moderno y prototipos básicos de una manera rápida y sencilla.

La plataforma de diseño de productos digitales equipa a los diseñadores con un conjunto de bibliotecas de interfaz de usuario, componentes flexibles y símbolos que se actualizan constantemente. De esta manera, los creadores digitales tienen el poder y las herramientas para experimentar con conceptos, versiones de diseño, flujos de usuarios e incorporar las últimas tendencias de UI y UX en lo que están creando.

¿Cuáles son las ventajas de Sketch?

• Puede construir y probar fácilmente diferentes versiones de diseño.
• Se siente intuitivo y es ideal para la creación de prototipos básicos o para mostrar historias de usuario.
• Ofrece una variedad de bibliotecas, símbolos y componentes que se actualizan constantemente.
• Incluye plugins útiles como Link Autolayout, Magic mirror y Git sketch.
• Proporciona una interfaz intuitiva que permite a los diseñadores realizar todo tipo de representaciones gráficas vectoriales.
• La fácil integración con otras herramientas, como nuestro App Builder de arrastrar y soltar WYSIWYG, reduce el tiempo de desarrollo y la implementación del diseño, y mejora la colaboración entre equipos funcionales.

¿Cuáles son las desventajas de Sketch?

• Muy poco espacio para la colaboración y la comunicación.
• No se pueden comparar los cambios en los diseños que se han realizado.
• Lacks basic image editing options.
• No free version.

¿Qué es un Sketch Design System?

Un sistema de diseño en Sketch servirá básicamente como tu única fuente de verdad, combinando todos los recursos que necesitas para comenzar con tu próximo proyecto, mientras mantienes la coherencia en tus diseños Sketch. Tener un sistema de este tipo realmente facilitará su trabajo como diseñador y lo ayudará a reducir aún más las discrepancias al adherirse a la marca, los requisitos y estándares generales de diseño, ya que introduce una paleta de colores consistente y fuerte, estilos de tipografía y mucho más.

¿Cómo construir una Design System en Sketch?

Vayamos directo al grano y veamos cómo construir un sistema de diseño Sketch y usar variables de color para crear la base de tus colores. Entonces, aquí están los consejos y trucos.

Paletas de colores

Si tienes el azul como color primario y el verde como acento, es muy probable que necesites más de un solo tono. Lo más probable es que un botón azul necesite un estado de desplazamiento, que suele ser un poco más oscuro y está en un estado deshabilitado que puede parecer descolorido. Sin embargo, hay un color base del que se derivan estos dos y debería existir como una variable de color. Hablaremos de los dos en el siguiente consejo cuando hablemos de paletas.

Para continuar, sugerimos usar un enfoque similar para los colores grises y para el color de fondo principal de la aplicación y los componentes, como listas y tarjetas. En Indigo.Design llamamos a ese color "superficie". Existe como una variable de color, lo que le permite cambiar fácilmente toda su aplicación de un tema claro a uno oscuro. Por supuesto, cambiar la superficie no es suficiente, ya que deberá actualizar los colores grises en consecuencia para garantizar un buen contraste.

Pero debido a que también forman una paleta en la mayoría de los casos, tendremos que profundizar un poco más en eso en el siguiente consejo junto con los colores primarios y de acento.

Utilice estilos de color para crear los derivados de sus colores primarios, de acento y grises, formando así paletas. Nuestro enfoque con Indigo.Design fue tener 500 variantes que se asignan al tono de la variable y crean las variantes más oscuras hasta 900 agregando rellenos que oscurecen y saturan el color base debajo. Para las variantes más claras que bajan hasta 50, hacemos lo contrario: desaturamos y aclaramos las capas de relleno añadidas al color base.

Aquí puedes experimentar con las propiedades de estos rellenos hasta que obtengas el resultado que deseas para cada tono. Sin embargo, tenga en cuenta que el objetivo final es tener una paleta completa de colores, en lugar de una sola. La mejor parte es que cuando la variable de color necesita actualizarse, todos los estilos de color se actualizarán, proporcionándole otra paleta con bastante facilidad y rapidez. O para decirlo en otras palabras, hazlo una vez para el color primario y luego simplemente duplica y cambia para usar el color de acento como base para tener una segunda paleta.

Ahora, dejé de lado los colores grises del consejo anterior porque merecen una sección por sí solos. Hay dos enfoques contradictorios cuando hablamos de los tonos de gris (juego de palabras) y, por lo general, de una discusión amistosa, se convierte en una discusión dolorosa. Un grupo de diseñadores defiende la percepción de que los colores grises deben ser como todas las demás paletas, con una base en el medio y derivados en tonos más oscuros y más claros. El grupo contrario coloca la base en un extremo de la paleta y extrae el resto de tonos jugando con la opacidad. Si la aplicación de destino es de un solo modo, la oscuridad o la luz no importan realmente. Lo que significa que ambos enfoques funcionarán bien en la mayoría de los casos.

Sin embargo, si está diseñando un sistema de diseño Sketch para ambos mundos, probablemente debería optar por el enfoque de opacidad. Esto significará que usará su variable de color gris que es negra o casi negra y aplicará diferentes opacidades a todas las variantes. Por ejemplo, 900 puede usar el 87%, 800 puede usar el 74% y así sucesivamente hasta 50, que puede tener solo el 2%. Con esto en su lugar, cambiar de un tema claro a uno oscuro es tan fácil como cambiar las variables de color de superficie y gris como mostramos anteriormente.

En su sistema de diseño Sketch, también puede considerar crear no solo uno, sino dos o tres grupos de estilos de color. Además de los rellenos, es posible que desee agregar contornos/bordes y la combinación de un relleno y un contorno/borde. Por supuesto, pospondría esta decisión hasta que surja un componente que realmente requiera dicho enfoque, de lo contrario, será una sobrecarga innecesaria. Y finalmente, un pequeño secreto de color para mí: crea un color transparente con 0% de opacidad en el relleno y el borde. Esto le permitirá sacar elementos de la vista, pero al mismo tiempo mantenerlos en su lugar si no desea perturbar sus diseños automáticos.

Tipografía

Pasando a la tipografía, que en Sketch se conoce con el nombre de "estilos de texto", notarás una similitud con los estilos de color comentados anteriormente. Ahora, las propiedades clave que deberían preocuparnos aquí son el tamaño y el peso de la fuente que describirán de manera única nuestros títulos, subtítulos y cuerpo de texto, por nombrar algunos. También puede tener estilos internos como los que tenemos en Indigo.Design para un botón con una transformación de texto, lo que lo convierte en mayúsculas en nuestro tema predeterminado inspirado en Material. O para el avatar y el hipervínculo con sus propios tamaños y tratamientos especiales.

La regla general aquí es incluir una tipografía como parte de su sistema de diseño Sketch que le permita organizar el texto en bloques significativos, por ejemplo, mientras escribe un artículo como este y tener suficientes opciones disponibles para que sus componentes logren lo que los usuarios de su sistema de diseño puedan tener en mente. En el panel izquierdo de la imagen a continuación, encontrará la matriz de estilos de texto de alto nivel que vienen incluidos con Indigo.Design kit de interfaz de usuario para Sketch.

A medida que construyas tus componentes, notarás que el texto no siempre fluye de izquierda a derecha. Una insignia numérica puede tener la necesidad especial de que su valor esté siempre alineado en el centro, mientras que un sufijo de texto puede fluir de derecha a izquierda a diferencia del prefijo que va en sentido contrario. Para facilitar todos estos escenarios, es útil dividir los estilos de texto de alto nivel en grupos con alineación a la izquierda, al centro y a la derecha.

Los colores siguen un camino similar, y deberían ser la siguiente y última capa de personalización, simplemente porque es mucho más probable que los usuarios del sistema de diseño Sketch deseen un color diferente para el texto de las iniciales en un avatar que cambiar la alineación del texto. Ahora bien, la tipografía de avatar es un caso especial ya que solo es aplicable al componente. Por lo tanto, es probable que desee utilizar un principio de diseño inteligente llamado restricciones. La primera vez que lo leí fue en el libro de Don Norman "El diseño de las cosas cotidianas". La restricción establecida para el avatar es que su tipografía viene solo en una alineación centrada, evitando que los usuarios de su sistema de diseño en Sketch cometan errores involuntarios.

Para terminar con la tipografía, tenemos que mencionar que los estilos de texto pueden usar variables de color y así es como deben definirse. Después de todo, si mañana llega un nuevo director de arte y cambia los colores de la marca, no te gustaría pasar una semana actualizando tu sistema de diseño de Sketch, ¿verdad? Aprovechar las variables de color y el texto y los estilos de color que las usan reduce todo este esfuerzo a solo unos pocos clics.

Componentes

El último grupo de consejos estará relacionado con los componentes. Para hacer una oferta más amplia, usaré el término símbolos tal como se llaman en Sketch. Un símbolo puede ser cualquier cosa que no sea solo un estilo, como el texto y el color. Sin embargo, todavía se usa con bastante frecuencia y necesita un mecanismo para hacerlo independiente, consistente y conectado a su definición, es decir, el símbolo maestro en Sketch jerga.

Partiendo de algo tan simple como un conjunto de iconos, una sombra o una colección de ilustraciones y llegando a listas con sus elementos y cuadrículas con múltiples tipos de celdas como ejemplos de estructuras más complejas. Pero, ¿por qué deberían venir como componentes?, te preguntarás. Bueno, a medida que crea un componente de botón de icono en Sketch, es probable que lo defina ampliamente. Pero a medida que lo use en un contexto determinado, deberá cambiar el ícono predeterminado por otro. Lo mismo ocurre con una ilustración de estado vacío e incluso puede ser aplicable a algunos estados interactivos. Por ejemplo, cuando una carta está enfocada, su sombra crece para hacerla resaltar y parecer que sale a la superficie por encima del resto de la colección.

Por lo tanto, es una buena idea crear componentes de iconos para alimentar su colección de iconos en el sistema de diseño Sketch. 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. En el caso de nuestro sistema de diseño a código Indigo.Design, es de 24 por 24, creando símbolos con los glifos de los iconos. Tener todos los iconos con el mismo tamaño de símbolo permite a sus usuarios marcar la casilla de verificación "Intercambiar al tamaño original". Mientras que al usarlo como una anulación de símbolo en un componente, le dará solo los símbolos aplicables, es decir, todos los demás íconos para elegir.

Otra cosa importante es el nombre, y me gustaría que veamos un ejemplo de Indigo.Design. Tenemos el icono de configuración: "一/Overrides/Material Icons/action/settings" que comienza con un extraño símbolo especial "一". Su único propósito es empujarlo a la parte inferior del menú de inserción en Sketch lo que dificulta la inserción directa del glifo.

Indigo.Design tiene un componente de icono para representar el propio glifo de icono. Por lo tanto, mantenemos la colección de glifos en un lugar, lo que dificulta su inserción directa. La siguiente parte dice "Anulaciones" y se usa para designar que lo que viene en la línea solo debe usarse como una anulación de símbolo. Luego tenemos "Iconos de materiales" que es el nombre del conjunto de iconos. Las dos últimas partes del nombre del símbolo 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.

Las mismas estrategias son aplicables a las sombras y a la ilustración, con la única observación de que para las ilustraciones no es necesario que sean siempre del mismo tamaño. Otra cosa importante a la hora de diseñar un componente es asegurarse de que cambia de tamaño de forma responsiva. En otras palabras, si desea utilizar el icono de configuración en un área de 36 por 36, debe escalar correctamente desde su tamaño base.

Ahora estamos listos para sumergirnos en las profundidades y hablar sobre cómo diseñar componentes. Veamos qué define un botón como un ejemplo simple y común de un componente. Lo primero que distingue a los botones es su contexto de uso. Necesitarás un tipo de botones para tu CTA, otro tipo para otras acciones importantes, uno más para acciones secundarias, e incluso tal vez algo que flote sobre una lista y realice acciones contextuales en ella, como agregar otro elemento de la lista. Esto nos lleva a la necesidad de tener botones contenidos, delineados, planos y flotantes, por ejemplo. Ahora, si queremos tener un botón súper simple con solo un ícono, también podríamos tener una quinta variante.

Lo que es común para estos botones es que tienen algunas propiedades de estilo, donde los estilos de color y texto de los que hablamos anteriormente juegan su papel. Pero también podemos querer considerar algunos estados de interacción como pasar el mouse, enfocar o deshabilitar un botón antes de que se cumpla cierta condición. Para los elementos que se usan dentro del botón para proporcionar su contenido, piense en formas útiles de usar diseños inteligentes como los que se muestran a continuación, que le permiten mostrar y ocultar partes del mismo, como el ícono antes, la etiqueta y el ícono después.

Antes de pasar a cómo debes diseñar los estados de interacción de un botón, hay dos cosas con las que debes tener mucho cuidado al configurar el diseño inteligente. En primer lugar, el texto de la etiqueta del botón debe configurarse para establecer su ancho automáticamente. Y en segundo lugar, debe asegurarse de que los elementos separados del diseño no se superpongan ni siquiera una fracción de píxel y estén en su tamaño original.

Con esto, su diseño inteligente funcionará tan bien que nunca necesitará cambiar nada al respecto. Deben definirse por la forma en que vemos un botón y te aconsejo que los dividas en dos. Primero viene el hecho de que cuando aparece un botón en la pantalla, puede estar habilitado o deshabilitado. Por lo tanto, en Indigo.Design lo mostramos de la misma manera que lo hacemos, ya sea que esté insertando un botón contorneado o plano. El segundo es el estado desencadenado por la interacción del usuario, ya sea que el botón esté en reposo o cuando se enfoca con el teclado o se desplaza junto al mouse.

Dado que estos son los estados verdaderamente interactivos cuando se ven desde el punto de vista del usuario final, hemos decidido definirlos como símbolos separados, lo que permite a los diseñadores del sistema de diseño Sketch alternarlos desde el panel de anulaciones de símbolos.

Echemos un vistazo a otro átomo del sistema de diseño Sketch con mayor complejidad: la entrada. Además de los tipos de entradas en el tema predeterminado de Indigo.Design (línea, cuadro y borde), hay algunas características distintivas adicionales. Como, por ejemplo, si viene con una pista o sin ella, que también ha aparecido en el menú de inserción. Esto era necesario debido al hecho de que tenemos un prefijo que empuja no solo el valor, sino también la etiqueta y la sugerencia.

Si ese no es su caso, puede usar un diseño inteligente para la pista y matar dos pájaros de un tiro. Sin embargo, algo que no podría evitar son los estados de validación. Además del estado inactivo, completado y enfocado que define algún grado de interacción del usuario que se ha completado o se está llevando a cabo, también tenemos estados de éxito, advertencia y error para admitir los diversos escenarios de validación de formularios.

Por último, echemos un vistazo al grupo de botones y a la tarjeta. En muchos sentidos, muestran los principios utilizados para construir componentes y patrones más complejos. El grupo de botones se presenta como dos símbolos insertables, que representan una colección horizontal y otra vertical de siete botones cada una.

No hay nada especial en el grupo de botones, aparte del hecho de que tiene un diseño inteligente horizontal o vertical general que afecta no solo a los botones, sino también al estilo del borde, el fondo y la sombra de todo el grupo. Si el usuario del sistema de diseño oculta uno o más botones mientras establece sus anulaciones de símbolo en ningún símbolo, todo lo que queda fluye. Como cabría esperar de un verdadero componente.

La tarjeta puede parecer muy diferente, pero esencialmente sigue la arquitectura de un grupo de botones vertical. La única diferencia real es que no es una colección de elementos repetidos. En su lugar, tiene sus propias secciones especiales realizadas como componentes separados con diferentes variantes configurables como anulaciones.

La pieza multimedia puede representar una imagen o un mapa estilizado. El encabezado utiliza un diseño inteligente para permitir que se eliminen elementos del mismo y el resto se adapte. Las acciones vienen con anulaciones para diferentes contenidos y alineaciones. Esencialmente, es solo una pila vertical de áreas específicas que responden, por ejemplo, a que el contenido del párrafo es innecesario para un escenario determinado. Al ocultarla, todo lo demás se adaptará y la carta cambiará de tamaño.

En conclusión, Sketch tiene un poder inigualable. Y esta es la posibilidad de establecer una base sólida de colores, tipografías, así como algunos componentes básicos y luego anidarlos en organizaciones de diseño más complejas tanto como sea necesario. De esta manera, puede lograr los resultados deseados mientras cualquier modo y configuración están a solo unos clics de distancia en el panel de anulaciones de símbolos.

Con componentes más complejos, es probable que también seleccione el maestro y administre sus reemplazos, que use las restricciones sabiamente una vez más y haga que ciertos escenarios sean imposibles para los usuarios de su sistema de diseño Sketch.