Ayudando a los diseñadores a adherirse a un sistema de diseño con Sketch

En Walmart Labs en Bentonville, nuestro equipo de diseño interno crea aplicaciones para asociados (el nombre de Walmart para los empleados) en nuestras tiendas, centros de distribución y oficinas corporativas. Diseñamos todo, desde dispositivos portátiles hasta sistemas de escritorio, y los entornos de nuestros usuarios van desde oficinas con mucha luz hasta almacenes. Para ayudar a nuestros asociados a moverse rápidamente a través de múltiples herramientas digitales, creamos un sistema de patrones visuales e interactivos compartidos basados ​​en el diseño de materiales de Google. Nuestro sistema de diseño está construido en Sketch y esta publicación comparte los aprendizajes de nuestra experiencia en la gestión de este idioma.

Donde empezar

Si es un diseñador que necesita crear y administrar una biblioteca para ayudar a otros a adherirse a un sistema de diseño, siga leyendo. Hemos encontrado lo siguiente útil cuando diseñamos herramientas digitales que más de 1 millón de asociados usan en todo EE. UU.

La coherencia del diseño puede ser un desafío en un entorno empresarial, especialmente con audiencias diversas y contextos de uso variables. Memorizar y usar todas las especificaciones correctamente puede ser abrumador y llevar mucho tiempo. Los diseñadores, incluso los experimentados, pueden tener que hacer referencia continuamente a las especificaciones de diseño. Esto consume un tiempo valioso en un ciclo de diseño ya agresivo.

¿La respuesta? Lleve el sistema de diseño a los diseñadores, en su herramienta de diseño.
Crédito de la imagen: Walmart.

Nuestra biblioteca del sistema de diseño, conocida internamente como Ignite, está construida en Sketch. Seleccionamos Sketch para que los diseños no tengan que preocuparse por el cumplimiento del sistema de diseño, sino que pueden centrarse en diseñar la experiencia ideal. Nuestros diseñadores trabajan con mayor precisión, eficiencia y coherencia con esta herramienta. También permite a los diseñadores crear patrones reutilizables de la biblioteca, heredando actualizaciones cuando la biblioteca se actualiza.

Algunas características clave incluyen:

  • Símbolo configurable para cada componente en el sistema de diseño.
  • Pautas como símbolo anidado, que abordan el relleno y el tratamiento de fuentes
  • Texto adaptable con otros elementos que responden a la longitud del texto.
  • Posibilidad de agregar colores, fuentes y avatares personalizados sin modificar la biblioteca de símbolos

Anidando las especificaciones de diseño

Sketch no es un sistema de diseño. , pero es una de nuestras herramientas preferidas. Cuando se gestiona correctamente, Sketch puede ayudar a los diseñadores a seguir reglas y pautas sin problemas. Traemos las especificaciones del sistema de diseño al diseñador al anidarlas en cada símbolo. Los diseñadores pueden centrarse más en el flujo y menos en recordar las reglas.

Ejemplo de una guía horizontal y relleno anidado en un símbolo de pestaña. Crédito de la imagen: Walmart.

Guía vertical

Las guías pueden mostrar dónde cambiar el tamaño de los símbolos verticalmente. En el ejemplo a continuación, la altura de la barra de herramientas cambia para el modo horizontal y vertical. Esta técnica es útil para cambiar el tamaño de la altura del componente de diseño normal a denso.

Ejemplo de una guía vertical en un símbolo de barra de herramientas. Crédito de imagen: Walmart

Guía de referencia de texto

La línea de base de texto ayuda a los diseñadores a cambiar la altura de un símbolo para que coincida con la altura del texto. Los diseñadores cambian la altura del símbolo hasta que la línea base esté en la línea base de la última línea de texto, no se requiere medición.

Las guías de línea de base de texto se utilizan ampliamente para ayudar a los diseñadores a cambiar el tamaño de los símbolos para que se ajusten al texto. Crédito de la imagen: Walmart.

Texto adaptativo

Nuestros diseñadores insertan texto real e información en sus composiciones, y nuestro texto y elementos en símbolos responden a la longitud del texto vecino. Los símbolos se mueven a medida que cambia la longitud del texto para mantener el relleno. La decoración del texto y el relleno se establecen en el símbolo, lo que permite a los diseñadores centrarse más en el contenido.

Las pestañas y el indicador activo responden a la longitud del texto. Crédito de la imagen: Walmart.El borde del cuadro de texto y el cursor se mueven a medida que cambia la longitud del texto. Crédito de la imagen: Walmart.

Color como símbolo

Walmart tiene múltiples divisiones y subsidiarias, cada una con su propia paleta de colores. Anteriormente, sería muy tedioso actualizar todos los colores de un diseño para otra área de la empresa. Necesitaríamos duplicar el archivo y tener dos copias principales para cualquier actualización.

Cada color en nuestra paleta es un símbolo, incluido el color primario y secundario, y se anidan en cualquier lugar donde se necesite color. Esto ha reducido en gran medida la necesidad de separar símbolos y proporciona flexibilidad de color.

Los diseñadores pueden cambiar el color y la opacidad de un símbolo desde el menú de anulación. Crédito de la imagen: Walmart.

Actualiza al instante el color de todos los símbolos

Los diseñadores pueden explorar los colores en toda la aplicación cambiando las opciones de color de la biblioteca. La página de personalización del color les permite ver los resultados en tiempo real a medida que cambian el color del texto primario, secundario y procesable, sin necesidad de complementos. Los símbolos que usan colores de símbolos se actualizan al instante. Los colores de texto procesables se gestionan a través del estilo de texto de Sketch. Esto permite que el color del texto se actualice mientras que los símbolos tienen texto adaptable.

El tema de color de la biblioteca se modifica al modificar los símbolos de color primario y secundario. Crédito de la imagen: Walmart.

Las actualizaciones también se simplifican. Se solicita a los diseñadores que actualicen la biblioteca cuando abren un archivo que usa la biblioteca. Cuando se acepta, se aplican los nuevos colores.

Esta técnica también permite a los diseñadores crear, guardar y aplicar bibliotecas personalizadas con temas de color a cualquier otro proyecto. También reduce en gran medida el número de símbolos para crear y mantener en la biblioteca de símbolos.

Símbolos configurables

El menú de anulación permite que los símbolos se configuren en cualquier estado o variación descritos en el sistema de diseño. Los diseñadores pueden personalizarlos aún más seleccionando imágenes, iconos y colores relevantes.

Un símbolo de lista de 1 línea está configurado para mostrar un avatar y una casilla seleccionada. Crédito de la imagen: Walmart.

Reducimos menús de anulación innecesarios haciendo un poco de trabajo extra en la biblioteca. Por ejemplo, los símbolos con fondo oscuro solo mostrarán la versión blanca de los iconos.

No es necesario seleccionar el color del icono en algunos símbolos. Se proporcionan iconos de color blanco para fondos oscuros e iconos de color negro para fondos claros. Crédito de la imagen: Walmart.

Plantilla de hoja de adhesivos

Usando los símbolos de la biblioteca, la hoja de calcomanías proporciona patrones comunes y una página mixins para que los colores, iconos y avatares personalizados aparezcan en los símbolos de la biblioteca relevantes. También contiene una página de resumen para proporcionar notas, comentarios y los colores primarios y secundarios utilizados en el diseño.

Mixins: agregar colores personalizados, iconos y avatares

A través de nuestras iteraciones, encontramos que los diseñadores necesitaban agregar íconos, colores y avatares personalizados. Separar un símbolo evitó que recibiera actualizaciones futuras y Elegir imagen solo funciona para una sola instancia del símbolo.

Sin modificar la biblioteca Ignite, los diseñadores pueden agregar iconos, colores e imágenes personalizados que aparecen en los símbolos Ignite. Sketch utiliza dimensiones de símbolo para rellenar menús de anulación. Los tableros de arte con las dimensiones apropiadas se proporcionan en la hoja de adhesivos.

Cuando los tableros de arte en la hoja de calcomanías se convierten en símbolos, aparecen en todos los menús de anulación relevantes. Crédito de la imagen: Walmart.

Para agregar un nuevo ícono, los diseñadores convierten el tablero de arte del ícono provisto en un símbolo. El símbolo ahora aparece en cualquier menú de anulación con los iconos existentes proporcionados por Ignite.

Ejemplos de configuración de símbolos

Un solo símbolo se puede configurar de varias maneras. La hoja de adhesivos muestra las diversas configuraciones para los símbolos más comunes.

Esta página en la hoja de calcomanías solo contiene 3 símbolos, pero muestra las diversas configuraciones que son posibles. Crédito de la imagen: Walmart.

Hoja de adhesivos como plantilla

Las hojas de calcomanías pueden ensuciarse cuanto más se usan. Las cosas se mueven cuando se copian y pegan. Proporcionamos una manera fácil de agregar la hoja de calcomanías a la carpeta de plantillas de Sketch. Al igual que instalar aplicaciones en una Mac, los diseñadores arrastran el archivo a la carpeta.

Se proporciona un instalador para que las hojas de adhesivos estén disponibles fácilmente como una plantilla de Sketch. Crédito de la imagen: Walmart.

Nueva hoja de adhesivos de la plantilla

Después de instalar la hoja de calcomanías, los diseñadores pueden obtener una copia nueva para comenzar un proyecto seleccionando la hoja de calcomanías en el menú de la plantilla.

Se puede crear una copia nueva de la hoja de adhesivos desde el menú Plantillas. Crédito de la imagen: Walmart.

La hoja de calcomanías usa símbolos de la biblioteca, pero se puede actualizar de forma independiente. Esto permite agregar nuevos patrones a la hoja de calcomanías, sin esperar a la próxima versión de la biblioteca.

Administrar y publicar la biblioteca.

La biblioteca Ignite Sketch se trata como un producto con un ciclo de lanzamiento, funciones pendientes, versiones y notas de lanzamiento.

Numeración de versiones

Intentamos actualizar los símbolos de la biblioteca de una manera que no rompa los diseños al actualizar. El número de versión indica a los diseñadores el nivel de capacidad con la versión de biblioteca que están utilizando actualmente.

Crédito de la imagen: Walmart.

El número de versión aparece en la miniatura de la biblioteca de bocetos, lo que facilita ver qué versión se carga. La versión también se puede encontrar en el nombre del símbolo de las notas de la versión.

El número de versión de la biblioteca se puede encontrar en la miniatura de la plantilla en el nombre del símbolo de las notas de la versión. Crédito de la imagen: Walmart.

Distribución

GitHub no es solo para el código. Se puede usar para administrar archivos que no son de texto y proporciona una página de producto simple y fácil de crear.

La página de GitHub se utiliza para generar la página del producto. Crédito de la imagen: Walmart.

Los diseñadores descargan una carpeta comprimida que contiene la versión más reciente y las versiones anteriores. Si los diseñadores experimentan un problema, pueden volver rápidamente a una versión anterior.

Notas de lanzamiento

Es importante informar a los diseñadores sobre nuevas funciones y correcciones de errores. GitHub Releases se utiliza para publicar las notas de la versión, con el archivo de la biblioteca adjunto. Las últimas notas de la versión también se proporcionan en la biblioteca y se puede acceder desde el menú de símbolos.

Ejemplo de notas de la versión, utilizando las versiones de GitHub. Crédito de la imagen: Walmart.Las notas de la versión están disponibles en la biblioteca como un símbolo. Crédito de la imagen: Walmart.

Seguimiento de errores y solicitudes de funciones

GitHub Issues proporciona una manera fácil de enviar errores y solicitudes de funciones. Cada presentación es un hilo de discusión donde cualquiera puede participar en la conversación. Se pueden agregar etiquetas, proyectos, hitos y la persona asignada para el clavado.

Los errores y las solicitudes de funciones se pueden rastrear y discutir mediante problemas de GitHub. Crédito de la imagen: Walmart.

Se puede crear una página de proyectos para la próxima versión y todos los envíos de errores / funciones relevantes se pueden agregar a través de las etiquetas, lo que facilita el seguimiento de lo que será para la próxima versión.

Comunicación

Tenemos un canal dedicado de Slack para que los diseñadores puedan acceder y anunciar nuevos lanzamientos. Para cada versión, publicamos las notas de la versión y el enlace a la página del producto.

Ahora es tu turno

A través de la retroalimentación continua y la iteración, nos esforzamos por mejorar la biblioteca y ayudar a nuestros diseñadores a diseñar de manera más precisa, eficiente y coherente.

Puede valer la pena crear una biblioteca de símbolos de Sketch, si le resulta difícil la coherencia o si pasa demasiado tiempo recreando los mismos componentes.

Lograr el equilibrio correcto entre un símbolo bloqueado y extremadamente flexible puede ser difícil. Comience con poco, comparta con frecuencia con los diseñadores e itere rápidamente. Si la biblioteca ayuda a los diseñadores a ser más consistentes y moverse más rápido, no tendrá que venderla. Los diseñadores lo exigirán.