Beyond Systems Beyond Systems

Beyond Systems

Experience design

Beyond Systems represents a new approach to designing and developing digital products. In a world where technology advances rapidly and user expectations constantly evolve, it is crucial to adopt a more holistic and flexible approach to designing design systems.

One of the fundamental pillars is components, which we understand as a unit of information on its own. However, agnostic components are those that continue to function at a usable, aesthetic, and technical level independently of their context.

Component Driven Design: a transformative methodology

Component Driven Design stems from a methodology that originated in development, known as Component Driven Development. Designers apply the same logic as this development methodology but tailored to design.

Through CDD, all aspects of development are worked through these modular elements. However, we don't limit ourselves to the componentization of just buttons or simple elements; any element that repeats more than once becomes a component if it can function independently.

Furthermore, this methodology aims to minimize component dependencies as much as possible, thus avoiding coupled components. If a component needs another to function correctly, it signals that the dependent element should also be turned into an independent one.

Adopting this practice not only provides 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 appealing user experience.

Atomic Design vs. Component Driven Design

We have reflected on design methodologies and realized that we are increasingly internalizing the Component Driven Design approach. We began to question the use of Atomic Design, wondering about the differences with CDD. The answer lies in the time spent categorizing components with labels such as atoms, molecules, organisms, or templates when, essentially, everything is a component (whether small or large). The criterion for grouping these elements is based on their size and can vary significantly in each Design System, requiring debates and agreements on which elements belong to each group.

The significance of Component Driven Design lies in the idea that if all elements are essentially the same, the step of classification can be avoided, treating everything as components. This methodology seeks to bridge the gap between design and development, eliminating the need to carefully classify elements in the Design System if developers later implement them as separate components. This allows for logical groupings of components based on their function, not just their size (for example, foundations: the bases upon which we build, components, or patterns).

Therefore, we strive to get as close as possible to the development process since our product represented in Figma lacks value if what is eventually implemented on the frontend doesn't resemble what we've designed.

Anatomy of a component

Within components, we can find all brand elements such as logos, typography, icons, etc. It also includes product elements like forms, controls, or buttons, among others. It is important to note that custom content for each project should not be part of the Design System. If specific content is placed in a component and then there is a change in that content, it will be necessary to modify it again. Additionally, if the component is updated from the Design System, the changes will not apply to custom content.

Regarding singletons, these are components with a unique instance and a single use, not considered relevant to create as a component. However, when there are multiple instances of a component, development work is undertaken. The line between componentizing and overengineering is very thin, so finding the right balance is crucial.

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: Componentizing repeated elements avoids the need to customize each component on every page. If a change is made in the Design System, it will automatically reflect in all sites using those components, saving time and effort.
  • Organization: A component-based approach allows for a structured workflow. Being organized in Figma makes it easier to search, modify, and reuse components.
  • Scalability: Components are scalable by nature. Utilizing them provides flexibility to quickly and easily add, remove, or update elements, allowing us to adapt to project needs.

To sum up

Component Driven Design represents an advanced and flexible methodology for designing and developing digital products. Its collaborative, adaptable, and experimental approach aims to overcome the limitations of traditional design systems and provide more effective, 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 fits the product's needs.

The main focus is on systemic thinking when developing digital products, creating a robust system that can persist over time, especially crucial for generating consistency in global brands, where uniformity in spacing and recurring elements across pages is vital.

Beyond Systems invites us to leave behind conventional paradigms and embrace an avant-garde approach to designing and developing digital products, where innovation, collaboration, and adaptability become fundamental pillars.

06 Jul. 2023

Anna Rovira

UX/UI Designer

Let’s talk!