Cómo construimos un sistema de diseño atómico con las bibliotecas de croquis @Capital Float

Lecciones aprendidas al configurar un sistema de diseño modular en una empresa FinTech.

Al estar en una startup con un par de diseñadores, ¡estábamos trabajando en diferentes productos y nunca tuvimos que cruzarnos! ¡Pero pronto nuestros productos comenzaron a verse diferentes! Ya se trate de paneles internos o de aplicaciones móviles orientadas al cliente, la mayoría de nuestros diseños dependían del marco para coincidir con nuestro rápido desarrollo de productos.

Pronto nos dimos cuenta de la necesidad de unificar nuestros productos. La única forma de hacerlo era definir una guía visual. ¿Pero cómo y por dónde empezar?

Pocas reuniones de lluvia de ideas y un mes después, definimos nuestra primera guía de estilo.

Nuestra primera guía de estilo

Estábamos usando la plantilla Sketch como nuestra plantilla, ¡todavía no hemos creado símbolos! Después de usar este archivo durante algunas semanas, comenzamos a enfrentar problemas. Al estar en una startup, estábamos trabajando en múltiples funciones y comenzamos a ver la inconsistencia en los diseños porque nuestros diseños eran mucho más que solo colores y tipografía. Además, era difícil mantenerse sincronizado a través del intercambio de archivos. Fue una pérdida de tiempo administrar tantos archivos. La dificultad de transmitir el diseño a los desarrolladores fue otro desafío. ¡Nuestro objetivo de construir un sistema de diseño no estaba funcionando!

Tiempo para ejecutar y construir el sistema de diseño real.

Siendo ingeniero informático convertido en diseñador de UX, conocía el poder de la modularidad. ¡Pero cómo hacerlo para el diseño, no tenía idea de por dónde empezar! Siendo un gran admirador del diseño de Google, comencé la ingeniería inversa y cuestioné su sistema de diseño de materiales. También exploré Bootstrap y Angular framework para comprender cómo han definido los componentes.

Objetivos de nuestra biblioteca

Para comprender algunas de las ideas que se tomaron en nuestras decisiones, aquí hay una breve descripción de lo que estábamos tratando de lograr con nuestro sistema de diseño:

  1. Elementos estandarizados y un sistema de diseño unificado para todos nuestros productos, independientemente de la plataforma.
  2. Crear una coincidencia 1: 1 en la medida de lo posible con nuestros componentes codificados y símbolos de croquis, tanto visual como estructuralmente.
  3. Facil de mantener. Las actualizaciones o adiciones de componentes deben ser simples para que los diseñadores y desarrolladores obtengan lo último sin esperar mucho.

Primero lo primero

Antes de saltar a lo que se agregará, tuvimos que definir ciertas reglas para hacer que los elementos sean reutilizables y atómicos en sentido verdadero. Así que decidimos buscar bibliotecas anidadas en lugar de un solo archivo fuente. Hacerlo nos permitió dividir cosas como colores e íconos en diferentes archivos de croquis y luego hacer referencia a símbolos en esos archivos. Si realiza una actualización de un símbolo en uno de los archivos, aún se propagará a los otros archivos que hacen referencia a ese símbolo. (¡Gran característica, Sketch! )

Hemos delineado ciertos patrones / reglas para mantener la "Higiene en el lugar de trabajo"

  1. Estructura de archivos y carpetas.
  2. Gestión de páginas y cuadros de arte (tablero de arte como variante de una pantalla, páginas como características)
  3. No te repitas (usa símbolos)
Estructura de archivos y carpetas.Gestión de páginas y mesas de trabajo

Nivel 0: Quarks y electrones.

Agregar una capa debajo del sistema Atómico puede parecer un movimiento extraño, pero hizo que el archivo fuera más fácil de usar. También nos ayudó a equilibrar entre los elementos de diseño preconstruidos y la reutilización. Considero que los colores y los íconos no son como átomos sino más bien como atributos de elementos como electrones y quarks. Los colores se pueden usar en todas partes, como fondos, texto, bordes, etc. Tratar los colores como elementos hace que los archivos de iconos sean más consistentes. Estos son símbolos, pero se utilizan principalmente como anulaciones en símbolos de nivel atómico.

Descargar archivo de muestra: https://goo.gl/9WdLYR
Definimos el símbolo de fórmula para generar la variación de un color y reutilizarlo para generar la paleta. Para que solo tengamos que preocuparnos por los colores base. Las fórmulas no son más que una superposición en un color base y funcionan de la misma manera que Shades & Tint.

Nivel 1: átomos

Los átomos representan elementos singulares del diseño de la interfaz de usuario que tienen una funcionalidad única. Al definir los átomos también consideramos cómo se comportan estos elementos en HTML.

Todo lo que se puede definir y usar individualmente son átomos. Por ejemplo, tarjeta, información sobre herramientas, sombra, divisor, botón, logotipos, cursores, etc.

Muchos de estos elementos tienen diferentes estados y variaciones entre los cuales el diseñador puede elegir. Todos estos estados se nombran exactamente cómo se usa en el desarrollo. También es probable que los átomos se usen como anulaciones a menos que esté creando una IU personalizada.

Nivel 2: Moléculas

¡Esta es la sección donde sucede la mayor parte de la magia! Las moléculas nos ayudan a reducir nuestro trabajo repetido y nos permiten aportar consistencia en el diseño. Cada molécula está construida para ofrecer contenido intercambiable, p. los estados de los botones cambian, eliminando / ocultando algunos elementos.

Toda la idea de las moléculas es pensar genérico.
Variaciones de un componente genérico.

La molécula generalmente consta de múltiples elementos (texto, imágenes, símbolos) pero está diseñada para ser abstracta y reutilizable. Tienen un nivel intermedio de complejidad, como pestañas, barra de estado, barra de acción, filas de lista, modales, mensajes de alerta, etc.

Nivel 3: organismos y páginas

En este momento, este nivel contiene muy pocos elementos como encabezados de página, tablas, maquetas de Play / App Store, selectores de fecha, teclados, etc. La razón de esto es que me resulta difícil dar sentido al proporcionar organismos preconstruidos, Como el diseño de este nivel a menudo depende del proyecto en el que estamos trabajando y de las características y el contenido que deben mostrarse.

Por supuesto, todo proyecto tiene organismos repetidos en páginas, pero a menudo se derivan de necesidades y requisitos individuales. Así que mejor usar símbolos aquí.

Las páginas o plantillas son el resultado real de un proceso de diseño, por lo que decidimos no incluir estos niveles en el sistema de diseño Atomic.

Ultimas palabras

Las bibliotecas de croquis definitivamente cambiarán la forma en que diseñamos hoy. Aquí hay algunas otras cosas que aprendimos al construir un sistema atómico.

  1. El orden de las capas en su símbolo es importante. Como aparecerán en el mismo orden en el panel Anulación. También puede bloquear algunas capas para evitar el desorden.
  2. Use Sketch Runner para buscar e insertar símbolos, ya que tiene una mejor vista previa que la que tiene actualmente Sketch.
  3. Use Sketch Styles Generator para generar texto compartido y estilos de capa.
  4. Si no tiene experiencia en programación y quiere saber cómo ven los desarrolladores los elementos de diseño, use el complemento Sketch Measure para exportar sus diseños. También ayuda a facilitar la transferencia del diseño.
Indudablemente, el boceto está mejorando nuestro proceso de diseño, pero todavía faltan algunas características importantes como ...
  1. ¡El texto compartido y los estilos de capa no se pueden compartir fuera de su archivo!
  2. ¡Exportar activos desde símbolos con anulaciones es una molestia! Mira este hilo para más información.
  3. Control de versiones para bibliotecas. (A diferencia del control de versiones del desarrollador, Sketch permite pasar solo a la versión más alta / más reciente de un componente)
  4. Símbolos como una máscara

Registro de cambios

¡Por favor considere el comentario a continuación como mi carta abierta!

Me gustaría mencionar / señalar aquí que el artículo anterior está destinado a mostrar nuestros aprendizajes y el proceso para lograr el Diseño Atómico. ¡No implica ser mi propia creación! Este es un humilde intento de implementar el concepto de "diseño atómico" de Brad Frost.

Un enorme agradecimiento a Alexandre Trimoulet, Brad Frost y Oliver Jahn por inspirarme a comenzar con Design System.

El artículo anterior está cubierto bajo CC0 - Sin derechos reservados. Renuncio a todos los derechos de autor y derechos relacionados en la mayor medida permitida por la ley.

Si tiene comentarios / preguntas para la implementación de un sistema de diseño o desea discutir otras cosas, no dude en comentar.