Part 1: Unlocking the Semantic Power of Design Systems
Design Systems at Scale
Scaling Design Systems
Design Systems are now a fundamental element of modern digital product ecosystems, providing cohesive workflows, tooling, and design language for consistent and efficient product creation. However, as the scale of their impact grows, Design Systems can become increasingly complex, leading to confusion and difficulties in maintaining consistency across the organization.
To address these challenges, designers and engineers require a more scalable approach to Design Systems that is flexible to change and accommodates evolving contexts. This is where Design Contexts come in.
By providing a structured approach to design decisions, Design Contexts organize the work and make it easier to understand, communicate, and challenge the Design Language of a project. They allow designers to group design decisions together and make them easier to find and reason about, ensuring consistency within the Design Language. They also serve as a powerful communication tool with other disciplines, promoting deep alignment and enabling hyper-efficient automated end-to-end flows. In addition to Design Tokens, Named Composable Design Contexts represent a crucial element for successful design systems, streamlining workflows and ensuring that teams share not only the same mental model but the same semantic structures.
Hidden Contexts and Complexity
Although Contexts (contextual design concerns) already exist within Products and Design Systems, they are often concealed within other structures, such as naming conventions and variants. Hidden Contexts emerge every time something needs to look or behave differently in a particular circumstance, as opposed to behaving at the consuming team's discretion. These hidden contexts are the underlying structures that form a Design Language. Unfortunately, these hidden Contexts are easily overlooked during the documentation of the design system, resulting in design debt.
By revealing these hidden contexts, designers can better understand the structure of the Design Language and create more effective Design Systems.
The most important way teams can take control of their contexts is by naming them. Named Design Contexts can be used to group design decisions, making them easier to find, reason about, and challenge. They also provide an easier way to infer intentions and address inconsistencies, ensuring the Design Language is always cohesive.
We’ve seen Design Systems benefit from the reduction of tokens that comes with adopting Design Contexts. Hidden contexts often multiply the number of tokens making it challenging for teams to manage their token systems. Named Design Contexts can be critical in various situations, such as multi-brand applications, large-scale design teams, or complex product interfaces, to help reduce the complexity and the cognitive load of the Design Language.
Using both tokens and contexts to convey design decisions produces a model that not only scales better due to its reduced complexity but also matches the shape of the situations it is trying to solve.
Composable Contexts as a Communication Tool
Design Contexts can serve as a powerful communication tool between design and engineering teams, promoting a shared understanding of the design language and its underlying structures. At a basic level, Design Contexts can be categorized into two types: global themes and composable contexts.
Global themes are differences in design decisions that apply to the entire product or feature, such as brand identity or the overall design philosophy. Many design tools, such as Sketch or Figma, support using themes to apply design changes quickly and easily. However, while themes can effectively maintain consistency, they can limit flexibility and customization, making them less ideal for complex and varied use cases.
Composable contexts are more specific and modular, representing circumstances where groups of elements can look or behave differently in a cohesive yet flexible way. With this approach, each situation you encounter can be a potential new context, with its own design decisions, that can help communication and add flexibility to the system. Unlike themes, they can also be partially reused, requiring significantly smaller changes when adjustments need to be made.
Composable structures offer numerous advantages over global structures. By breaking down a complex system into smaller, independent structures, designers can create flexible and easily identifiable sets of decisions that can be easily modified and adapted to changing requirements. This modular approach allows for greater flexibility in design and development, enabling teams to iterate quickly and efficiently. Additionally, composable structures promote reuse, reducing development time and effort.
This approach puts the power in the hands of the designer, allowing them to create unique and compelling designs without being limited by the constraints of a global pre-defined system. Also, a modular approach helps designers create flexible and adaptable systems that allow for rapid iteration and experimentation.
Using Contexts to Create Deep Alignment
Composable Design Contexts can be an essential tool for bridging design and engineering teams. The impact is multiplied by storing explicitly named composable Design Contexts as Code. This way, it is possible for designers and engineers to establish a strong communication flow that ensures consistency and scalability. Design Contexts as Code can be used to explicitly map end-user concerns, audiences, and product topology in a way that unifies product, experience, and visual design perspectives. This process helps bridge the gap between design and engineering, making it easier to ensure that changes are communicated and validated correctly.
This technique offers a significant advantage by allowing teams to version and share structures easily. This means that changes can cascade automatically from design tools to engineering code, ensuring consistency across the entire system. Having the same structures with the same names makes changes become easier to communicate and validate, reducing the risk of errors and inconsistencies. It is a very powerful way of establishing a common language and structure across all teams, helping designers and engineers collaborate more effectively, enabling faster iterations and more accurate results.
Design Contexts as Code drives the much deeper alignment required on Design System teams, streamlining communication and increasing efficiency, empowering designers to create and maintain more sophisticated and consistent design languages while also allowing for greater flexibility and adaptability.
Working with Design Contexts
Simplified Heuristics
Design Contexts simplify design decisions by establishing clear rules for when certain visuals should go together and when they cannot be mixed and matched; this creates a more consistent user experience. Of course, not all decisions need to be consistent; in some cases, it may be better to leave them flexible. Design Contexts help identify when consistency is important and when flexibility is necessary, providing a clear framework for making design decisions. By organizing these rules within Design Contexts, designers can streamline the design process, making it more efficient and ensuring consistency across the entire system.
When a new element, such as a new variant of a component or a layout option, is added to the Design System, designers ask themselves a simple question: "When can this happen?" If the answer is not "at the product team's discretion," then they know they need a design context to hold this decision.
In the previous example, creating a distinction between business card users and personal card users for elements like Carrousel or Table triggers the need to distinguish between two situations in the Credit Card context, leading to the creation of a new context: Personal and Business Credit Card. This approach ensures visual consistency within the appropriate context, streamlines the design process, and maintains design coherence across all products and services offered by the institution.
Composable Experiences
Composable Design Contexts offer an effective solution for creating a consistent experience across different products and platforms. Unlike global themes, which require a significant lift of rewriting the entire theme, Composable Design Contexts enable designers to focus on the specific concerns of each context, connecting decisions to the appropriate levels. By creating these contexts, designers can group and organize visual decisions based on their respective use cases, making it easier to ensure that the design language is consistent across all products and services offered by the institution.
One of the key advantages of Composable Design Contexts is the ability to share global and semi-global decisions across products. For example, the color palette used in the mobile app can also be used on the website and the banking platform. However, spacing rules would be specific for each one of these scenarios, as their viewports and information density require special considerations. Designers can also leave room for flexibility, ensuring that decisions are connected to the appropriate levels and are relevant to specific scenarios.
In addition to organizing decisions, Composable Design Contexts allow teams to cascade multiple levels of decision-making into their respective use cases explicitly. Through the composition of these use cases with named contexts, designers can guarantee that decisions are clearly discussed and communicated across teams, promoting a consistent end-to-end design flow. This approach also encourages the reuse of design decisions, streamlining the design process and reducing the time and effort required to create new products and services.
This approach not only streamlines the design process but also ensures that the mental model is shared across different teams, like engineering, content and business, helping create design that is consistent and coherent across all products and services offered by the institution, ultimately resulting in a better user experience for customers.
Design Contexts as Code
As a technique, Design Contexts as Code greatly simplifies the communication between designers and engineers, allowing for a more scalable design system that can easily adapt to changing user needs and product requirements. Tokens change value in different contexts, so these contexts also need to be translated into code structure, stored and version-controlled.
One way to translate Design Contexts and Tokens into code is to render them as CSS Layers and Variables. This approach greatly simplifies the code of the components themselves -- since tokens always have the right values as you switch contexts, component code remains stable -- while changing contextual parameters becomes a matter of activating the appropriate layers. This technique can also be replicated using other programming languages such as JavaScript, Swift, or Kotlin.
This approach helps create a more scalable design system that is friendly to change for a number of reasons.
- It streamlines versioning and produces clarity end-to-end, as the same structures exist with the same names across disciplines.
- It manages complexity by reducing the number of tokens and by making adding a new context a non-breaking change.
- It simplifies component code, as components no longer need to know about changes that are triggered by context changes.
- It reduces the complexity of the overall system, as tokens carry all the relevant information inside themselves.
Moreover, since tokens are now responsible for carrying the correct value for each context and use case, they are the perfect target for automated testing. This improves the overall quality of the system and makes it easier to validate changes across different teams. By using Design Contexts as code, it becomes easier to bridge the gap between design and engineering and to promote a shared understanding of the design language and its underlying structures.
Using Design Contexts as code offers a powerful tool for creating a scalable design system that can easily adapt to changing user needs and product requirements while managing both system and code complexity, improving quality and allowing teams to deliver results faster.
Conclusion
Named Design Contexts and Design Contexts as Code (DCaC) can greatly simplify the process of creating a scalable design system that is easier to understand and more friendly to change. By providing a structured approach to design decisions and simplifying communication between design and engineering teams, DCaC can help maintain consistency and coherence in design language across an organization. In addition, DCaC can reduce the number of breaking changes and simplify versioning, validation and debugging, improving the system's overall quality and allowing teams to build better experiences for their end users.
Looking toward the future, there are many exciting possibilities for using Design Contexts as Code. DCaC can be integrated into automation, content management system data models, and domain-driven design, providing even greater benefits for large-scale projects.
At our company, we have successfully implemented Design Contexts as Code in some of our most complex projects. We encourage you to explore this approach and to contact us if you want to know more about this and other innovative ideas our teams are working on. If you are interested in design systems, look into Radius -- our design system accelerator, and check out how it can accelerate your journey toward a more efficient and consistent design system.
In the next article in this series, we will discuss how to use Design Contexts as Code to create a Multi-brand, multi-platform design system with accessible light and dark modes.