Beyond Systems

Beyond Systems representa una nueva forma de abordar el diseño y el desarrollo de productos digitales. En un mundo donde la tecnología avanza a pasos agigantados y las expectativas de los usuarios evolucionan constantemente, es fundamental adoptar un enfoque más holístico y flexible en la creación de sistemas de diseño.

Uno de los pilares fundamentales son los componentes y los entendemos como una unidad de información por si sola. Sin embargo, los componentes agnósticos son aquellos que siguen funcionando a nivel usable, estético y técnico independientemente de su contexto.

Component Driven Design proviene de una metodología que nació en desarrollo, conocida como Component Driven Development. Los diseñadores utilizan la misma lógica de esta metodología pero aplicada al diseño. 

Mediante el CDD, todos los aspectos del desarrollo se trabajan a través de estos elementos modulares. Sin embargo, no nos detenemos solo en la componentización de botones o elementos simples; cualquier elemento que se repita más de una vez se convierte en un componente si funciona por sí solo.

Asimismo, esta metodología busca minimizar en la medida de lo posible la dependencia entre componentes, evitando así los componentes acoplados. Si un componente necesita de otro para funcionar correctamente, es una señal de que también debemos convertir ese elemento dependiente en uno independiente.

La adopción de esta práctica no solo nos brinda una mayor flexibilidad y reutilización de elementos, sino que también nos permiten crear sistemas más coherentes y escalables. Al trabajar con componentes que pueden funcionar de forma independiente y aportar valor en distintos contextos, logramos una mayor eficiencia en el proceso de desarrollo y una experiencia de usuario más consistente y atractiva.

Hemos reflexionado sobre las metodologías de diseño y nos hemos dado cuenta de que estamos interiorizando en gran medida el enfoque del Component Driven Design. Empezábamos a cuestionar el uso del Atomic Design preguntándonos que diferencia había con CDD. Y, la respuesta radica en el tiempo que se invierte en categorizar los componentes con etiquetas; átomos, moléculas, organismos o plantillas, cuando en esencia, todo son componentes (sean pequeños o grandes). El criterio para agrupar estos elementos se basa en su tamaño y puede variar significativamente en cada Design System, lo cual implica tener que debatir y llegar a acuerdos sobre qué elementos pertenecen a cada grupo.

La importancia del Component Driven Design radica en  que, si todos los elementos son esencialmente iguales, se puede evitar el paso de clasificación y simplemente tratar todo como componentes. Esta metodología busca unir los enfoques de diseño y desarrollo, evitando la necesidad de clasificar cuidadosamente los elementos en el Design System si luego los desarrolladores los implementan como componentes separados. 

Permitiendo hacer agrupaciones de componentes lógicas, no por su tamaño, si no por la función que cumplen (por ejemplo, foundations: que son las bases sobre las que construimos, componentes o patrones).

Por lo tanto, intentamos acercarnos lo máximo posible al proceso de desarrollo, ya que nuestro producto representado en Figma, carecerá de valor si lo que finalmente se implementa en el frontend no se parece a lo que hemos diseñado. 

Dentro de los componentes, podemos encontrar todos los elementos de marca, como logos, tipografías, iconos, etc. También se incluyen elementos de producto, como formularios, controles o botones, entre otros.

Es importante destacar que el contenido personalizado de cada proyecto no debe formar parte del Design System. Si se coloca contenido específico en un componente y luego se realiza un cambio en ese contenido, será necesario modificarlo nuevamente. Además, si se actualiza el componente desde el Design System, los cambios no se aplicarán al contenido personalizado.

En cuanto a los singletons, son aquellos componentes que tienen una única instancia y un único uso, no se consideran relevantes para crearlos como un componente. Sin embargo, cuando existen varias instancias de un componente, se trabaja en su desarrollo. La línea entre componentizar y realizar sobre-ingeniería es muy fina, por lo que es crucial encontrar el equilibrio adecuado.

• Consistencia: Al utilizar componentes, es posible adaptarlos fácilmente para garantizar la coherencia en términos de posición, espaciado, variantes y propiedades. Esto asegura una apariencia uniforme en todas las aplicaciones.

• Eficiencia: Al componentizar elementos repetidos, se evita tener que personalizar cada componente en cada página. Si se realiza un cambio en el Design System, se reflejará automáticamente en todos los sitios que utilizan esos componentes, ahorrando tiempo y esfuerzo.

• Organización: Un enfoque basado en componentes permite mantener un flujo de trabajo estructurado. Al estar organizados en Figma, resulta más fácil buscar, modificar y reutilizar los componentes.

• Escalabilidad: los componentes son escalables por naturaleza. Hacer uso de ellos nos permite flexibilidad para agregar, quitar o actualizar elementos de manera rápida y sencilla, permitiéndonos adaptarnos a las necesidades del proyecto.