Unlocking Creativity within Design System Constraints

When building a design system, we're tasked with striking a balance between what should be modifiable and what must remain fixed. For example, we might want to allow for modifications in a button's position and margin, but maintain strict control over its background color or padding. This approach ensures consistency across components, enabling designers to rapidly construct views without second-guessing how elements should work together.

Embracing Constraints

You may wonder if such constraints stifle creativity. Let's consider the work of architect Bjarke Ingels. In his book Yes is More, Ingels discusses a project for the Tøjhus site in Copenhagen. The building code specified an equation governing the maximum height of buildings concerning their distance from neighboring structures. Rather than circumventing or complaining about the rules, Ingels embraced them:

Instead of ignoring the rules (or just complaining about them), we chose to see what the rules looked like if you took them literally.

Instead of going above and beyond the rules, we decided to push to the edge of the regulations - to inflate our building until it hit the invisible immaterial boundaries to discover the hidden beauty of the bureaucracy

Design boundaries and limitations are inherent in design. When designing for a large brand like Shopify, your work must align with their company while avoiding resemblance to competitors. Instead of perceiving these constraints as handcuffs, use them to challenge your thinking.

Navigating Intentional vs Unintentional Divergence

When a new design deviates from the established design system, we must ask: was this an intentional or unintentional decision?

There are three kinds of deviations that come up in a design system:

• Unintentional divergence typically happens when designers can’t find the information they’re looking for. They may not know that a certain solution exists within a system, so they create their own style. Clear, easy-to-find documentation and usage guidelines can help your team avoid unintentional variation.
• Intentional but unnecessary divergence usually results from designers not wanting to feel constrained by the system, or believing they have a better solution. Making sure your team knows how to push back on and contribute to the system can help mitigate this kind of variation.
• Intentional, meaningful divergence is the goal of an expressive design system. In this case, the divergence is meaningful because it solves a very specific user problem that no existing pattern solves.

We want to enable intentional, meaningful variation.

- Yesenia Perez-Cruz

As you develop your design system, ensure you strike a balance between expressive patterns and necessary constraints. When a design diverges from an expected pattern, it can offer valuable insight depending on the intention of the design.

Finding that sweet spot between constraints and creative freedom in your design system requires experimentation, open communication, and continuous feedback loops. By embracing this process, you can unlock the hidden beauty within your design system's constraints like Ingels.