Revolutionising Design Systems: The Future of UI Design using Graphs & Node-based Design

Introduction

In the world of digital product design, there's always been this invisible wall. On one side, designers craft beautiful, intuitive interfaces. On the other, engineers build the code that brings these visions to life. For years, we watched teams struggle to communicate across this divide, losing time, efficiency, and often, the original design intent.

As consultants, we thought we'd cracked it with design tokens. Finally, a shared language that both designers and engineers could speak! We saw excitement spark in the eyes of front-end engineers, relieved from the tedium of endless CSS updates. We witnessed designers deploy updates directly to production, a feat previously unimaginable.

But here's the thing - we couldn't have done this without our Tokens Studio plugin (back then Figma Tokens). It was this tool that truly enabled designers to work with tokens effectively, bringing the power of dynamic design systems right into their familiar design environment.

This breakthrough led us to an even bigger idea: the headless design system. It was a game-changer. For the first time, we could create a design system that was fully semantic, its appearance controlled entirely by design tokens. Suddenly, swapping entire component libraries between brands and themes became possible, not just in code, but in design tools too. It's transformed the way many design systems are built today, opening up new possibilities for scalable, flexible design.

But as with many innovations, success bred new challenges. The more we relied on tokens, the more complex our systems became. We had solved one problem only to create another: an explosion of tokens that threatened to collapse under their own weight.

It was in this moment of crisis that we realized we weren't just facing a technical challenge. We were standing at the threshold of a new era in design system management. The question wasn't just how to manage tokens more efficiently, but how to preserve the very essence of design decision-making in a world of increasing complexity.

This realization drove us back to first principles. We asked ourselves: what if we could capture not just the what of design decisions, but the why and the how? What if we could create a system that understood the logic behind our design choices, not just the end results?

This thinking was the spark that ignited our most ambitious project yet: the Graph Engine. It's not just another tool - it's born from years of frustration, innovation, and our relentless pursuit of a better way to design and build digital products at scale.

We're not just trying to solve today's problems. We're reimagining how design systems can work, pushing the boundaries of what's possible when design and engineering truly speak the same language. The Graph Engine is our answer to the growing complexity of modern design systems, a way to manage scale without losing the nuance and intention behind each design decision.

In this post, we're going to dive into why we believe the Graph Engine is the next big leap in design system management. It's not just about making things easier or faster (though it does that too). It's about preserving the creative process, scaling design logic, and bringing designers and engineers closer together than ever before.

So, whether you're a designer drowning in a sea of tokens, an engineer tired of translating design intentions into code, or a leader looking to streamline your product development process, this one's for you. Welcome to the next chapter in the evolution of design systems.

The Future of UI Design using Graphs & Node-based Design

The world of digital product design is on the cusp of a paradigm shift. As design systems become increasingly complex and the demand for scalable, consistent user interfaces grows, traditional design tools are reaching their limits. Enter the Graph Engine & Node editor: a groundbreaking approach to design system management that promises to transform how we create, maintain, and scale digital products.

The Current State of Design Systems

Design systems have become the backbone of modern digital product development, enabling consistency, efficiency, and scalability. However, as companies expand their digital footprints across multiple brands, products, and platforms, the limitations of current tools and methodologies are becoming apparent.

• Arbitrary Decisions: Traditional design tools often lead to arbitrary choices in component anatomy and styling, resulting in inconsistencies and challenges during implementation.

• Limited Logic: Current systems struggle to capture the underlying logic of design decisions, making it difficult to trace and adjust these decisions over time.

• Tool Lock-in: Many teams find themselves locked into proprietary systems, limiting their ability to create truly agnostic, company-owned design data.

• Manual Processes: Adapting designs for multiple brands or creating dynamic UIs often involves time-consuming manual adjustments.

Introducing the Graph Engine & Node Editor

Imagine a tool that combines the visual intuitiveness of Figma with the procedural power of Blender. The Graph Engine & Node editor is just that – a revolutionary design technology that allows designers, engineers, and other stakeholders to compose and style UI elements using a node-based editor. This approach brings several key advantages:

• Logic-Driven Design: Every design decision is captured as 'code through nodes', computing final values based on defined logic rather than arbitrary choices.

• Non-Destructive Editing: Changes can be made at any point in the decision tree without starting from scratch, enhancing flexibility and iteration.

• Procedural Generation: Components and styles can be generated based on schemas and logic, ensuring consistency and reducing manual work.

• Agnostic Format: By decoupling from proprietary systems, companies can own their design data in a centralized, agnostic format.

• Extensible: The graph engine is built on the idea that new nodes will need to be created, new data structures introduced, and new preview systems created. With this in mind we keep the core of the system as flexible as possible so that it can be adapted to a wide range of systems.
  
  

Real-World Applications

Let’s explore how the Graph Engine transforms common design challenges:

Multi-Brand Management:

• Traditional Approach: Designers manually adjust color schemes, typography, and component styles for each brand, a time-consuming process prone to inconsistencies.

• Graph Engine Approach: Create a single graph that takes brand colors as input and automatically generates entire color palettes, adjusts typography, and modifies component styles while ensuring accessibility and visual harmony.

Responsive Design:

• Traditional Approach: Designers create multiple versions of layouts and components for different screen sizes, often leading to inconsistencies and maintenance headaches.

• Graph Engine Approach: Define a spacing and scaling system as a graph, which automatically adjusts layout and component dimensions based on viewport size inputs, ensuring consistent proportions across all devices.

Accessibility Compliance:

• Traditional Approach: Designers manually check and adjust designs for accessibility, often as an afterthought.

• Graph Engine Approach: Build accessibility checks (like contrast ratios) directly into the design graphs, automatically ensuring all generated designs meet WCAG standards.

Design Token Management:

• Traditional Approach: Manually define and update hundreds of design tokens, struggling to maintain relationships between them.

• Graph Engine Approach: Create graphs that generate and manage design tokens based on a few key inputs, automatically maintaining relationships and consistency.

Image Creation

• Traditional Approach: Have an artist manually change images based on feedback, relying on them to replicate the same procedure each time 

• Graph Engine Approach:  Have a consistent graph that can be used to  bulk transform on images and automatically run these graphs on data

The Power of Community

The Graph Engine isn't just a tool; it's a platform. With a marketplace for sharing custom nodes and graphs, the community can extend the system's capabilities, solving unique challenges and sharing knowledge.

Further, the Graph Engine seamlessly integrates with existing tools and workflows:

• Real-time sync with Figma for immediate visual feedback

• SDKs for front-end and back-end integration, enabling real-time styling or pre-computation during server-side rendering

• Easy extensibility through SDKs, CLI, or websockets

Looking to the Future

As we stand on the brink of this design revolution, it's clear that the Graph Engine & Node editor has the potential to redefine how we approach digital product design. By bringing the power of procedural generation and logic-driven decision-making to UI design, we're not just improving our tools – we're expanding the possibilities of what can be achieved in digital design.

For companies looking to scale their design systems, manage multiple brands, or simply bring more consistency and logic to their design process, the Graph Engine represents a leap forward. It's more than just a new tool; it's a new way of thinking about design – one that promises to make our digital products more consistent, adaptable, and accessible than ever before.

Conclusion

The Graph Engine & Node editor is poised to disrupt the digital product design process in the same way node-based editing revolutionized the gaming industry. By providing a powerful, flexible, and logic-driven approach to design system management, it addresses the growing complexities of modern digital product development. As we move into an era of increasingly dynamic and personalized user interfaces, tools like the Graph Engine will be essential in helping companies maintain consistency, efficiency, and innovation in their digital products.

Are you ready to revolutionize your design process? Stay tuned for more information on how you can harness the power of the Graph Engine in your projects.

Try the playground here: https://graph.beta.tokens.studio
Join our slack