¿Cómo crear un sistema de diseño utilizando Atomic Design en Flutter?

En 2019 enfrentamos un desafío importante. Teníamos que resolver las siguientes preguntas: ¿Cómo podemos estructurar la implementación de nuestros componentes front-end para ser reutilizados en todas las experiencias digitales? ¿Cómo podemos unir las fuerzas de los equipos de desarrollo y diseño para hacer que los elementos se vean como queremos?
Respondimos estas preguntas. Aquí te contamos cómo fue nuestro viaje

Tener un sistema de diseño es importante

Cuando comenzamos con nuestro análisis la organización estaba trabajando con diferentes equipos los mismos elementos digitales. Por ejemplo, podríamos tener un grupo de desarrolladores y diseñadores trabajando en implementar el mismo botón. La forma de solucionar este inconveniente es teniendo un sistema de diseño. Pero ¿Que entendemos como un sistema de diseño?

Un sistema de diseño es un conjunto de elementos estandarizados que se pueden utilizarlos en diferentes combinaciones para dar como resultado un producto final. Teniendo presente esta definición podemos decir que todos los días utilizamos sistemas de diseño. Por ejemplo, al prepara un sándwich.

Nosotros podemos utilizar ingredientes similares, por ejemplo el pan, queso, proteína y obtener dos aperitivos diametral diferentes entre ellos.

Este concepto aplicado al mundo digital nos deja en claro que podemos estándarizar componentes sin perder la oportunidad de personalizar nuestras aplicaciones.

Atomic Design

Para construir algo debes escoger alguna metodología, em este caso decidimos utilizar la metodología de Atomic Design.
El creador de esta metodología es Brad Frost, el cual nos explica que debemos dividir nuestras experiencias digitales en los siguientes elementos:

Átomos

Los átomos son componentes que no pueden ser divididos en elementos más pequeños sin dejar de ser interactuadle con otros. Un buen ejemplo son las etiquetas HTML comunes<button>, <input>, <h1>, o en Flutter los elementos más simples(por ejemplo el IconButton).

Moléculas

Las moléculas son elementos constituidos por varios átomos, pero ellos no tienen múltiples responsabilidades. Por ejemplo un botón de búsqueda, o por ejemplo un modal.

Organismos

Los organismos son elementos compuestos por moléculas y átomos. Puede tener varias responsabilidades por ejemplo un header con elementos de búsqueda, enlaces y notificaciones, claramente son un modal.

Templates

Los templates definen el orden de los elementos en una pantalla.

Páginas

Son una instancia de un template.

Adicionalmente agragamos dos capas a nuestra solución

Tokens

Los tokens los definimos como todos los elementos base tales como colores, fuentes, sombras. Son las bases de todo el sistema de diseño por lo que los encargados de hacer definiciones en esta capa son el equipo de marca de la empresa.

Foundation

Los componentes de un sistema de diseño no deben depender directamente de la capa de tokens. Esto se debe a que debemos hacer fácil el cambio de diseño de los elementos. Por tanto, esta capa es un puente entre los tokens y los componentes del sistema de diseño.

Profundicemos en Flutter

Ahora que conocemos la teoría lo podemos aplicar en nuestros proyectos en Flutter. Para ello hice un pequeño ejemplo que nos resultará útil para comprender acerca de este tema.

Lo primero que debo decir, es que una muy buena práctica crear una librería independiente para contener en ella tu sistema de diseño. En Flutter podemos crear una librería de forma muy sencilla, tan solo ejecutando el siguiente comando:

flutter create --template=package orgname_design_system

Ahora comencemos a analizar como se puede construir cada una de las capas.

La capa de Tokens

Ahora podemos crear nuestra capa de tokens. En grandes empresas el equipo de diseño nos narraría cuales son las definiciones que deben ir en esta capa. Sin embargo, dado que esto es un ejemplo realicé unas definiciones y las ingresé dentro de la capa de tokens, como resultado vemos el siguiente contenido:

Veamos el contenido del archivo colors.dart :

Como puedes ver los nombres de las variables no están atados a ningún componente lo que significa que pueden ser aplicados a cualquier componente. Un ejemplo de una definición errónea es ButtonColor en ese escenario estíamos atando un token a algún componente que lo usa.

Para ver los demás archivos puedes ir al siguiente enlace.

Capa de Foundation

Como habíamos señalado más arriba, en esta capa relacionamos los componentes con los tokens.

Veámos el archivo foundation_colors.dart :

Como puedes observar existen nombres cómo colorButtonSecondary, bodyTextColor. Por lo tanto, evidentemente en esta capa realizamos las correlaciones existentes.

También en esta capa podemos crear temas de aplicación, por ejemplo veamos el archivo theme.dart :

Puedes consultar este enlace para observar los archivos que faltaron por revisar.

Capa de Átomos

Con todo listo podemos comenzar a crear nuestros átomos. En este caso debemos recordar que siempre debemos depender de la capa de foundation no de los tokens.

Por ejemplo, veamos el átomo de separación:

Para este artículo cree varios ejemplos de átomos, por tanto si quieres verlo puedes revisar el repositorio (enlace para ver los átomos).

Capa de moléculas

En está capa puedes utilizar los foundation y los átomos, recuerda que no debes utilizar nunca directamente los tokens. veamos un pequeño ejemplo:

Capa de organismos

En este caso veamos un pequeño ejemplo de como podríamos utilizar varios elementos para crear un organismo:

Capa de templates

Cuando poseemos elementos más complejos, en ocasiones será necesario implementar modelos que nos permitan mapear los elementos que componen a nuestra solución. Por tanto, no es mala práctica implementar entidades relacionadas a los componentes de nuestro sistema de diseño.
Veamos un ejemplo, de un template:

La capa de páginas

Finalmente, puedes crear páginas estándar. Por ejemplo, páginas que describan una transacción exitosa o fallida:

La importancia de tener un showcase

Cuan construyes un paquete de sistema de diseño, necesitas que los desarrolladores se enamoren de tu solución. Para ello es una muy buena práctica tener un Showcase (o una vitrina) digital, donde puedan ver que componentes están disponibles.

Para el ejemplo, que trabajamos en este artículo cree un pequeño ejemplo:

Si deceas ver el código de este showcase puedes observarlo aquí.

En grandes compañías como en Bancolombia, creamos un Showcase más robusto donde el desarrollador puede ver tanto el ejemplo como el código que puede utilizar para implementar algún componente de su interés.

Este es un pequeño pantallazo de nuestra solución:

Conclusión

Espero que hayas disfrutado este artículo. Atomic Design es una excelente metodología para construir nuestos sistamas de diseño. En Bancolombia, tener nuestra propia librería redujo en un 80% nuestro TTM. Es decir ha contribuido a que hagamos soluciones efinicientes para nuestros clientes. Por favor, regálanos unos👏 en este artículo y estrellas ✪ en el proyecto ejemplo de GitHub (enlace).