Design Systems + Sketch: cómo comenzar a preparar la biblioteca de componentes de la interfaz de usuario

Finalmente, Design Systems se convirtió en el estándar de la industria. Por eso es fundamental saber cómo prepararlos para nuestros proyectos. Si eres como yo y creas tus diseños digitales principalmente en Sketch, esta historia contiene un montón de consejos para preparar los componentes de la interfaz de usuario para tu sistema de diseño.

Nota:
Me gusta mantener las cosas claras. Como creador de UXMisfit.com, mi prioridad es ayudar a los diseñadores inspirándolos con una visión un poco diferente de UX y preparando herramientas que ahorren tiempo.

Los kits de herramientas UXMisfit están preparados principalmente para Sketch. Puede encontrar los que preparen los flujos de usuarios de manera eficiente o para garantizar una mejor calidad de los íconos de aplicaciones.

También puede encontrar el Kit de sistema de diseño: se llama Prime. Contiene más de lo que debería tener el sistema de diseño de interfaz de usuario moderno para Sketch. Excepto cientos de elementos personalizables, incluye sistema de ilustración, kit de interfaz de usuario web, gráficos y plantillas vectoriales de dispositivos principales.

Independientemente del Kit de sistema de diseño Prime, todos los consejos mencionados en la historia funcionan incluso si decide preparar los componentes de la interfaz de usuario por su cuenta.

Al principio, había caos ...

No importa si comienza a preparar componentes para Design System al comienzo de un nuevo producto, o si decide incluirlo en el proyecto existente de hace unos años. Siempre es una decisión desafiante si lo haces por primera vez porque tienes que convencer a otras personas (no solo a los diseñadores) de la idea de crear un sistema. Consideremos cómo puede hacer que diferentes personas estén más entusiasmadas con Design Systems:

Gente de negocios y administración: pueden tener miedo del tiempo y el costo de la creación, algo grande desde el principio (por supuesto, hay formas de acelerar el proceso). Obviamente, el costo inicial puede ser alto, pero debe convencerlos de que en el futuro el precio de la creación de nuevos componentes será mucho más bajo, la implementación será más rápida y la calidad del producto ... mucho mejor.

Desarrolladores: gracias al sistema de diseño, podrán preparar componentes antes y utilizar sus instancias en varias páginas. Mantener la consistencia del diseño será mucho más fácil. Los desarrolladores no tendrán que pensar si este botón azul debe tener una fuente en negrita o una sombra, solo usarán el componente correcto (Botón primario).

QA: muestre a los evaluadores que recibirán la única fuente de verdad. Gracias a esto no habrá ninguna duda si algo se hace bien.

OK, si tu equipo está listo, ¡tomemos una taza de café y lancemos Sketch!

¿Tienes un proyecto existente? Haz su inventario.

Si no preparó algún tipo de sistema de diseño o su propio kit de interfaz de usuario para su proyecto actual, el primer paso para hacerlo es verificar todos los elementos existentes. Probablemente encontrará varias instancias de elementos que difieren solo un poco, pero esto tendrá que repararse.

Si utiliza el Kit de sistema de diseño existente, obtendrá instantáneamente la lista de casi todos los elementos que debería tener su biblioteca de componentes. Además, ya están categorizados como símbolos. Puede ajustar los elementos existentes para que coincidan con los de su solución, y debería poder usarlos rápidamente.

Si decide crear una biblioteca desde cero, es bueno preparar primero la lista o una hoja de cálculo. Esto ayudará a establecer la estructura correcta. Desarrollar la arquitectura de documentos correcta puede ser difícil, pero vale la pena hacerlo para acelerar el trabajo posterior.

Pero ... ¿Las bibliotecas de croquis no son sistemas de diseño?

Esto puede sonar no tan obvio, pero es correcto. Estoy de acuerdo con Brad Frost. Sus bibliotecas de croquis no son un sistema de diseño, pero también lo recuerdan: son su parte fundamental.

Muchas bibliotecas son las chispas iniciales de Design Systems. También hay métodos para preparar sistemas vivos a partir de ellos, pero esto se tratará en los próximos capítulos.

Los sistemas de diseño son mucho más que componentes de interfaz de usuario. También deben incluir pautas de movimiento, principios de estrategia de contenido y estilo de redacción y, finalmente, componentes implementados, listos para ser utilizados en la plataforma en particular.

Al final, todo esto comienza con componentes hechos en herramientas de diseño como Sketch. Recuerde que los kits no son sistemas de diseño en sí, pero estas bibliotecas están aquí para ayudarlo a construir sistemas.

Creación de una biblioteca de componentes de la interfaz de usuario para el sistema de diseño

Veamos cómo preparar componentes para su sistema, desde las partículas más pequeñas hasta los organismos y plantillas grandes. La filosofía de diseño atómico es muy útil cuando prepara la biblioteca que debe usarse con frecuencia y ampliarse en el futuro.

Partículas

Hablando de diseño atómico. Antes de comenzar a crear los componentes fundamentales de la interfaz de usuario, es necesario establecer partículas.

Colores

Es bueno comenzar con los colores porque cada marca tiene su propia paleta. Recuerde establecer una buena convención de nomenclatura. Es bueno señalar qué tono es Primario, o Secundario y los de los elementos Éxito, Advertencia o Error. No permita que su sistema incluya solo "azul" o "púrpura", es crucial porque cada color tiene su significado. Un nombre apropiado permitirá a su equipo reconocer el propósito del color.

Sugerencia: para optimizar la personalización del estilo de relleno y borde. Cree una capa de forma con estilo compartido que contenga solo un relleno, luego cree una en exactamente la misma posición y tamaño que incluya solo el estilo compartido con borde. Relleno y Borde deben tener el mismo color. Si también agrega capas de forma con estilos que difieren solo con opacidad cercana o en la misma posición, podrá actualizar el estilo excepcionalmente rápido. Solo tendrá que seleccionar las capas de forma, actualizar dos parámetros (relleno y borde en el panel lateral derecho de Sketch) y actualizar Estilos compartidos.

Configuración de color en Prime Design System Kit

Gradientes y superposiciones

Algunos dicen que los gradientes son los nuevos colores. Si explora Dribbble o Behance, notará que muchas tomas las incluyen. Es por eso que su Biblioteca del sistema de diseño debe tener el conjunto preparado para el proyecto.

La misma situación es con las superposiciones. El tono y la opacidad deben definirse en el sistema para garantizar la coherencia.

Afortunadamente, desde Sketch 52+, no hay necesidad de preparar mesas de trabajo especiales para colores, degradados, etc. Todo se encuentra en los estilos de capa compartida y las anulaciones de símbolos.

Tipografía

El buen sistema de tipografía es una parte esencial de cada marco de UI que forma parte del sistema de diseño más grande. Cuando estaba creando el Kit, la preparación de este elemento tomó una gran cantidad de tiempo. Si decide crear su tipografía, recuerde incluir al menos los siguientes estilos:

  • Negro
  • Blanco
  • Gris
  • Primario (con color primario de su sistema)

Sería bueno tener también:

  • Éxito
  • Advertencia
  • Error

Estas variantes de color lo ayudarán a garantizar suficiente flexibilidad y consistencia en su trabajo posterior.

Ahora, vamos a sumergirnos en la escala y el tamaño. Existen varios métodos para definir esta propiedad a lo largo del sistema de tipografía. He decidido inspirar los que incluyen Prime by Apple's y expandirme con la tendencia web moderna (títulos enormes, etc.). Gracias a esta sólida base, puede estar seguro de que el sistema funcionará y la tipografía tendrá una buena legibilidad en dispositivos móviles y de escritorio.

Si desea tener una escala de tipografía del tamaño correcto, puede encontrar útil https://type-scale.com. Simplemente elija Tamaño base, Tipo de escala y configure una fuente de muestra y juegue alrededor de la configuración.

Cuando defina todos sus tamaños, agregue al menos opciones regulares y en negrita. Luego duplique todos los elementos dos veces. Alinearlos a la derecha, centro e izquierda. Ahora cree Estilo de texto para cada opción.

Para garantizar la mejor usabilidad de la tipografía, utilice la siguiente convención de nomenclatura:

[Nombre del tamaño] / [Alineación] / [Color] / [Estilo]

Si tiene más de una familia de fuentes en su sistema:

[Nombre de tamaño] / [Familia de fuentes] / [Alineación] / [Color] / [Estilo]

Por ejemplo:

Título / Centro / Negro / Negrita

Título / SF Pro / Centro / Primario / Izquierda

También puede dividir los sistemas de tipografía en archivos separados y convertirlos en Bibliotecas Compartidas.

Consejo: para optimizar la personalización de la tipografía. Coloque todos los elementos (desde la configuración de un solo color) en una columna. Alinee las capas que contienen los diferentes estilos de alineación (izquierda, centro, derecha) una encima de la otra. Gracias a esto, obtendrás una sola columna con tipografía. Esto le permitirá cambiar el tipo de letra o su estilo seleccionando el grupo y actualizándolos juntos. Es mucho más rápido y más conveniente que preparar los parámetros para cada alineación por separado.

Configuración de tipografía en Prime Design System Kit

Cuadrículas y diseños

La preparación del sistema de cuadrícula no solo garantizará la coherencia, sino que también acelerará su trabajo posterior. Su cuadrícula debe ser universal: la opción más popular es configurar una cuadrícula de 8 puntos. Esto asegurará que su IU funcione bien en computadoras de escritorio, tabletas y dispositivos móviles.

Consejo: para acelerar su configuración de trabajo, empuje grande (Mayús + Flecha) en Sketch al tamaño de su cuadrícula (por ejemplo, 8 píxeles). Esto hará que tu trabajo sea mucho más rápido.

Componentes de la interfaz de usuario atómica

Antes de saltar directamente a la creación del símbolo específico. Tómese un tiempo para enumerar todos los componentes necesarios de la interfaz de usuario. Esta lista puede ser bastante larga, pero le ayudará a planificar la estructura de su Marco de UI.

Es evidente que el sistema de diseño atómico incluirá componentes como botones, entradas / campos de texto, iconos, casillas de verificación, interruptores y botones de radio, pero también hay elementos que no son tan obvios cuando piensas en el sistema por primera vez como el chat burbujas, chips o componentes de clasificación.

Incluso sus componentes atómicos pueden tener algunos símbolos de partículas en su interior. Por ejemplo, su botón puede incluir los siguientes símbolos: icono, sombra, forma, estado de componente o incluso texto (si decide preparar símbolos separados para ellos).

Estos átomos no solo serán las instancias de los controles de la interfaz de usuario en sus proyectos futuros, sino que también ayudarán a construir otros más complejos en su Biblioteca de croquis.

Consejo: lo que vale la pena mencionar, ya que Sketch 52 no tiene que preparar máscaras especiales para los colores de sus botones o íconos. Los estilos compartidos se encargan de eso con la función de anulación de símbolos. Esto significa menos símbolo y un flujo de trabajo más transparente y elegante.

Moléculas y Organismos

Entonces has creado todos los elementos atómicos. Ahora puedes combinarlos en moléculas.

Esto significa que su entrada, botón e icono básicos se pueden combinar en uno más complejo: el componente Buscar tarjeta de campo de texto para su sistema se puede crear a partir de formas o imágenes, superposición, iconos, botones o estilos de texto.

El uso de un conjunto de elementos esenciales en símbolos y capas con estilos compartidos le permite construir el sistema que se actualiza a sí mismo muy rápidamente.

El diseño atómico es perfecto para sistemas de diseño

UI Kit

El diseño atómico llama a los conjuntos complejos de átomos, moléculas y organismos predefinidos como Plantillas. Estas son partes grandes (como secciones del sitio web) de su solución que se pueden usar varias veces.

Es bueno diseñar plantillas con su propósito en mente. Hacerlos demasiado genéricos puede causar elementos que no encajan en casos particulares.

Prime incluye las siguientes categorías para plantillas:

  • Héroe
  • Características del producto
  • Galerías
  • Comercio
  • Orden
  • Precios
  • Noticias / Blog
  • Contacto
  • Testimonios
  • Cuenta
  • Tablero
  • Acerca de
  • Pie de página
  • Otro (para 404 y próximamente página).

Cuando cree su propio marco de interfaz de usuario, le recomiendo que prepare estas plantillas grandes con al menos estas categorías.

Elementos faltantes de muchos sistemas de diseño

Muchos diseñadores piensan en el Kit de sistema de diseño para Sketch como en la Biblioteca de controles de la interfaz de usuario. Pero los sistemas de diseño son mucho más; Sketch también puede usarse para muchos otros propósitos de diseño digital.

Cuando estaba creando el Kit, me di cuenta de que las Bibliotecas también deberían incluir gráficos y dispositivos vectoriales (en contorno, estilo plano y realista). Se usan con tanta frecuencia en sitios web modernos y soluciones que necesitan tener una representación consistente en el sistema.

Además, hoy en día los sitios web y las aplicaciones están llenos de hermosas ilustraciones. Es por eso que también incluí un sistema de ilustración personalizable que contiene componentes para construirlos y diseñarlos rápidamente.

Ilustración de muestra realizada en 5 minutos en Prime

Si decidió diseñar su propio conjunto de bibliotecas para Design Systems, considere agregarles estos elementos.

Colaboración en equipo

Los sistemas de diseño son la fuente de la verdad para los miembros del equipo. Esto significa que sus bibliotecas de croquis deben estar preparadas para ser utilizadas por todos los diseñadores involucrados en el proyecto. La forma más fácil de compartir archivos con su equipo es subirlos a Sketch Cloud

Mientras prepara el marco de la interfaz de usuario como biblioteca, recuerde garantizar una denominación coherente y adecuada. Construir una estructura lógica y clara ayudará a sus colegas a descubrir todas las posibilidades del kit.

Separando archivos

Además, debe considerar hacer algunas partes del Sistema de diseño de interfaz de usuario de Sketch como archivos separados. Excepto la biblioteca principal, puede pensar en preparar un archivo para un conjunto de iconos, kit de ilustración, plantillas de dispositivos o gráficos.

¿Cuándo separar estas cosas? Debería pensar en hacerlo cuando está claro que hay un gran conjunto de elementos particulares (como iconos) o solo algunos diseñadores de su equipo los crean (esto puede aplicarse a las ilustraciones) y el resto solo está usando sus creaciones.

Controla el historial de tus bibliotecas

La mejor manera de administrar los archivos de Sketch Library con el equipo es usar la solución de Control de versiones como Abstract. Gracias a esto, podrá explorar el historial de cambios de la biblioteca, revisar las modificaciones de sus compañeros de equipo, comentarlas y permitir agregarlas al maestro (versión principal de la Biblioteca).

Construyendo un sistema de diseño vivo de Sketch

Algunas herramientas como InVision Design System Manager le permiten crear la documentación del sistema de diseño y la fuente de la verdad no solo para los diseñadores sino también para los desarrolladores, los especialistas en control de calidad y otros miembros del equipo.

El uso del Invision DSM es sencillo, puede encontrar una introducción rápida aquí. Puede crear rápidamente la documentación del sistema de diseño, administrar versiones y permisos de usuario para ver o editar el sistema.

Esta herramienta hace que su Sketch Library sea el verdadero sistema de diseño vivo.

Finalmente: rompa la consistencia, si es necesario

Si bien la estrategia consistente es fundamental, debe recordar que, como diseñador de experiencia de usuario, debe preparar la solución que resuelva las necesidades de los usuarios de una manera encantadora y cumpla con los requisitos comerciales. Es por eso que debe estar listo para romper su sistema de diseño consistente si hay un propósito más elevado para eso.

"Debe desaprender lo aprendido."
- Maestro Yoda

Si hay un caso en el que ese elemento en particular simplemente no funciona, debe validarlo. Si las pruebas muestran que romper la consistencia de la interfaz de usuario hará que los usuarios estén más contentos, considere modificar. Solo recuerde tener en cuenta estas "excepciones" en el sistema, para que los demás sepan que no fue un error, sino una decisión estratégica.

Resumiendo

Sketch es la herramienta adecuada para crear componentes de interfaz de usuario de Design System. Es la herramienta que contiene múltiples funciones como símbolos, capas y estilos de texto con capacidades de anulación que hacen que el flujo de trabajo sea extremadamente fácil. Gracias a la filosofía de la Biblioteca, puede compartir rápidamente sus archivos, y con complementos adicionales, puede convertirlos rápidamente en los Sistemas de Diseño reales.

Si planea comenzar a construir Design System u organizar su Biblioteca de IU, no pierda su tiempo creando todo desde cero. Siéntase libre de usar el Prime - Design System Kit.

Para que sea más fácil, hay un regalo Use el código de oferta MEDIUM10 para obtener un 10% de descuento.

Si disfrutaste la historia no olvides to.

También te puede interesar Sketch Plugins que ayudan a mantener el sistema de diseño de la interfaz de usuario:

¡Gracias por leer, buena suerte con su sistema de diseño!