Explicación breve y concreta de lo que es un Design system
Il faut voir ça comme une sorte de bibliothèque de legos triés et ordonnés.
Es una biblioteca de componentes y elementos gráficos basada en código reutilizable. La idea es externalizar las recurrencias funcionales y gráficas de múltiples proyectos en un solo proyecto y convertirlo en una herramienta de referencia UI/UX.
Hay que verlo como una especie de biblioteca de legos ordenados y organizados.
Image par diogenes_3 de Pixabay
Esta herramienta tiene muchas ventajas y se dirige a desarrolladores, diseñadores o propietarios de productos y probadores.
Para los desarrolladores, facilitará el trabajo colaborativo (un solo componente para las diferentes necesidades de negocio de los proyectos), el mantenimiento (una sola base de código para mantener con un sistema de versionado) y la evolución técnica (menos dependencias y, por lo tanto, menos sujeto a la deuda técnica).
Para los diseñadores, les permitirá establecer una verdadera coherencia gráfica e interactiva en los proyectos de la empresa. Se encuentran las mismas reglas de interacción y la misma carta gráfica. Para garantizar la calidad y ergonomía deseada del producto.
Y, por último, para los otros participantes de proyectos como propietarios de productos o probadores, les facilitará todo el trabajo de verificación y concordancia con respecto a la demanda inicial.
Al aislar cada componente de forma independiente y sin asociarlo a una actividad, es mucho más fácil probar y garantizar que el resultado cumpla con las reglas de gestión y las pruebas de aceptación establecidas previamente.
Photo by Balázs Kétyi on Unsplash
¿Por qué Mindbaz encuentra esta necesidad?
En Mindbaz tenemos muchos proyectos y algunos tienen un historial bastante amplio. En estos proyectos encontramos diferentes componentes y, entre ellos, similitudes y diferencias.
¿Alguna vez lo has notado?
Cuanto más avanzamos en los proyectos, más complicado se vuelve conservar y mantener una homogeneidad. Ya sea desde el punto de vista interactivo (UX), gráfico (UI) o de mantenibilidad (calidad del código).
Cuando empiezas a trabajar en más y más proyectos al mismo tiempo, hay un momento en que las cosas se complican.
La deuda técnica puede acumularse, las fases de running se alargan y avanzar y sincronizar todo se convierte en un verdadero rompecabezas (¡Qué ya lo hemos vivido!).
Nos preguntamos cómo solucionar este problema y conseguir dos objetivos:
- Poder seguir desarrollando nuestros proyectos
- Garantizar la calidad y la resiliencia de lo existente
¡La implementación de un design sytem ha demostrado ser una buena solución!
Implementar un Design Sytem para tus proyectos web: el ejemplo de Mindbaz
Ya lo sabes, no hay un método único. Depende del entorno en el que se trabaje.
Investigando un poco, muy rápidamente nos hemos dado cuenta de que hay un montón de tutoriales y una multitud de técnicas.
En Mindbaz, los fronts se realizan en Reactjs y se combinan con Material UI para el renderizado de las interfaces.
Queríamos partir de esta base para construir nuestro Design System.
Nuestros recursos para crear un Design System
No se necesitan muchos recursos para empezar:
- Nuestro stack front favorito (React / TypeScript / Ecmascript*)
- Una tecnología que permite exponer nuestros componentes en nuestra librería (Storybook*)
- Una tecnología de gestión de paquetes para alojar y versionar nuestros componentes (Verdaccio*)
Y si queremos ir más allá:
- Un framework UI para ahorrar tiempo y evitar mantener demasiadas cosas (Material UI*)
- Una interfaz para diseñar nuestros componentes (Zeplin*)
- Y un techno para probar nuestros componentes (Jest*)
*: lo que usamos
Con esto, tendrás suficiente para crear un nuevo proyecto con la arquitectura más simple posible.
Lo que nos interesa es encontrar un directorio que contenga todos nuestros componentes clasificados por uso. Componentes ligeros y legibles.
No hay que dudar en crear varios archivos para aislar las diferentes capas como el renderizado, el estilo o las interfaces de tipado.
Cuanto más ligero sea el componente, más fácil será mantenerlo y hacerlo evolucionar sin causar errores o regresiones (especialmente porque algunos componentes más grandes pueden estar compuestos por otros componentes más pequeños (sí, como legos)).
Te recomendamos que hagas pruebas (unitarias y snapshots) si quieres evitar un susto cuando hagas modificaciones arriesgadas.
Tal vez un último consejo: proceder por etapas y comenzar con los elementos más pequeños primero.
Lo mejor es, antes de comenzar el desarrollo de componentes más grandes, definir los estilos a través de un tema personal (fuentes, colores, espacios,…) y determinar componentes nativos básicos (botones, campos de texto, formularios,…).
Esto evitará el ir y venir en futuros desarrollos y será suficiente para encontrar lo que necesitamos en nuestra librería.