Beyond Systems

Beyond Systems represents a new way of approaching the design and development of digital products. In a world where technology advances rapidly and user expectations constantly evolve, it is essential to adopt a more holistic and flexible approach to creating design systems.

One of the fundamental pillars is the components, and we understand them as a standalone unit of information. However, agnostic components are those that continue to function at a usable, aesthetic, and technical level regardless of their context.

Anatomy of a component

Within the components, we can find all brand elements, such as logos, typography, icons, etc. Product elements are also included, such as forms, controls, or buttons, among others.

It is important to highlight that the customized content of each project should not be part of the Design System. If specific content is placed in a component and then a change is made to that content, it will need to be modified again. Moreover, if the component is updated from the Design System, the changes will not apply to the customized content.

Regarding singletons, these are components that have a single instance and a single use, and they are not considered relevant to create as a component. However, when there are multiple instances of a component, its development is worked on. The line between componentizing and over-engineering is very fine, so it is crucial to find the right balance.

Component Driven Design: a transformative methodology

Component Driven Design comes from a methodology born in development, known as Component Driven Development. Designers use the same logic of this methodology but applied to design.

Through CDD, all aspects of development are worked on through these modular elements. However, we do not stop only at the componentization of buttons or simple elements; any element that repeats more than once becomes a component if it functions on its own.

Likewise, this methodology seeks to minimize component dependency as much as possible, thus avoiding coupled components. If a component needs another to function correctly, it is a sign that we must also convert that dependent element into an independent one.

The adoption of this practice not only provides us with greater flexibility and reuse of elements but also allows us to create more coherent and scalable systems. By working with components that can function independently and add value in different contexts, we achieve greater efficiency in the development process and a more consistent and attractive user experience.

Atomic Design VS. Component Driven Design

We have reflected on design methodologies and realized that we are largely internalizing the Component Driven Design approach. We began to question the use of Atomic Design by asking what difference there was with CDD. And, the answer lies in the time invested in categorizing components with labels; atoms, molecules, organisms, or templates, when in essence, everything is components (whether small or large). The criterion for grouping these elements is based on their size and can vary significantly in each Design System, which implies having to debate and reach agreements on which elements belong to each group.

The importance of Component Driven Design lies in the fact that if all elements are essentially the same, the classification step can be avoided and everything can simply be treated as components. This methodology seeks to unite design and development approaches, avoiding the need to carefully classify elements in the Design System if developers later implement them as separate components.

Allowing logical component groupings, not by their size, but by the function they fulfill (for example, foundations: which are the bases on which we build, components, or patterns).

Therefore, we try to get as close as possible to the development process, as our product represented in Figma will lack value if what is ultimately implemented in the frontend does not resemble what we have designed.

The benefits of working with components

• Consistency: By using components, it is possible to easily adapt them to ensure consistency in terms of position, spacing, variants, and properties. This ensures a uniform appearance across all applications.
• Efficiency: By componentizing repeated elements, there is no need to customize each component on each page. If a change is made in the Design System, it will automatically be reflected in all sites using those components, saving time and effort.
• Organization: A component-based approach allows maintaining a structured workflow. Being organized in Figma makes it easier to search, modify, and reuse components.
• Scalability: Components are scalable by nature. Using them allows us flexibility to add, remove, or update elements quickly and easily, enabling us to adapt to project needs.

In summary

Component Driven Design represents an advanced and flexible methodology for the design and development of digital products. Its collaborative, adaptable, and experimental approach seeks to overcome the limitations of traditional design systems and provide more effective and user-centered solutions in a constantly changing digital world. Each team has different ways of approaching it, and all are correct until finding the one that best suits the needs of their product.

The main focus of this approach is systemic thinking when developing digital products. This allows for the creation of a robust system that can persist over time. In our experience, it is especially key to generate consistency in global brands, where uniformity in spacing and recurring elements between pages is of vital importance.

Beyond Systems invites us to leave behind conventional paradigms and embrace a cutting-edge approach to the design and development of digital products, where innovation, collaboration, and adaptability become the fundamental pillars.