Beyond Systems

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 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.

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.

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.

• 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.