For today’s web owners, the concept of design systems is nothing new. Tracing back to the days of print media and the early advent of graphic design, designers have been using design systems to build and develop consistent design experiences and visual uniformity. And with the rise of digital experiences, companies began adopting design systems to ensure brand guidelines were adhered to across experiences and as the organization scaled.

Nathan Curtis, a design systems consultant who wrote the book Modular Web Design in 2009, defines design systems as:

“…a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.”

This concept of modular design and design systems was further developed by Brad Frost, a design systems expert who introduced the concept of atomic design. In atomic design, systems are defined as a collection of atoms, molecules, and organisms, while the products of the system are templates and pages.

“…atomic design is a mental model for thinking about user interfaces as interconnected, hierarchical systems. Atomic design helps people consider the whole and the parts of that whole at the same time."¹

— Brad Frost, author of Atomic Design

‍

‍

Design systems have evolved over the past few decades, and have become increasingly critical for scaling web and brand experiences. Even with this rise in ubiquity, organizations still tend to struggle maintaining brand cohesion. So much so that 53% of today’s organizations report their website does not fully align with their brand identity.²

In the next chapter, we’ll walk through how design systems can play a larger role in addressing key business challenges, and how website owners can better leverage them to tackle business critical initiatives.

As today’s teams chase ambitious growth goals, it's essential to put teams, technology, and systems in place that can support core business initiatives. For website owners, this is especially true as companies race to keep up with consumer expectations — and rely on their websites to effectively do so. The problem, however, is that today’s websites are missing the mark: our research shows that 92% of marketing leaders believe they must improve their current website in order to fully deliver on their business goals. As a result, decision makers are focused on finding the right solutions to put them on a path toward success.

From how designers, developers, and their colleagues in marketing come together to how businesses can deliver better experiences to their end users, let’s take a look at how design systems offer a solution for website owners' critical business concerns.

Design systems are a key efficiency driver

As companies look for ways to eliminate tedious tasks, maximize the output of their teams, and deliver more stunning web experiences to their prospects and customers, finding and incorporating systems that drive efficiency is critical. Incorporating a design system drastically speeds up both the design and development processes. For the team Figma, for example, an internal experiment on design systems revealed designers could complete their objective 34% faster with a design system than without one.³

Instead of constantly reinventing the wheel, designers and developers can leverage an established library of components and patterns they can reuse and adapt. This means faster prototyping, fewer errors, and more time spent refining user experience rather than grappling with foundational design concerns.

Design systems serve as catalysts for speed and scale

As the needs of your business grows, so will your website and the number of initiatives it needs to support. In turn, this means more processes, projects, and people to manage. Designers and developers can seamlessly enhance your website’s functionality by utilizing components (reusable design structures) and guidelines, eliminating the necessity to start over with each new update. 

Furthermore, contemporary design systems are integrated across the growing number of tools with shared concepts like components and variables used by designers and developers. One example is the Figma to Webflow plugin, which allows for the direct synchronization of your design system between the two tools. This means designs in Figma reach the web sooner, and the design-to-development workflow can be much smoother. It’s these types of synergies that ensure a more integrated and efficient workflow between designers and development teams can become not just a reality, but the standard.

Reusability not only accelerates the development of new pages, layouts, and features, but also guarantees the site’s expansion adheres to a consistent framework. The design system approach avoids creating disjointed or inconsistent user experience as the website evolves. 

Today, consumer preferences can change quickly, and that means that your business’ ability to adapt becomes a competitive differentiator. An effective design system also allows organizations to quickly roll out updates, ensuring that experience is always improving, staying updated, and meeting the evolving needs and expectations of users. Furthermore, the consistency in design elements ensures that even with updates, the learning curve for users is minimal.

Design systems enable cross-functional collaboration

The average organization today has 67 people regularly working on their website — spotlighting how critical it is to get collaboration right. Design systems bridge the gap between designers and developers, creating a shared language and framework for them to reference. This not only minimizes misunderstandings but also fosters a more collaborative environment. A shared language between design and development means that designers and developers aren't talking about which hex color to use for a design in hand-offs, but upleveling the conversation to create a better user experience.

Design systems ensure brand coherence

Meaningfully engaging with potential customers at every touch point is critical to the overall user experience, and design systems ensure experiences remain consistent across your entire digital ecosystem. Design systems give designers a foundation for design consistency, and give helpful tools and constraints to developers when implementing designs.

Brad Frost cited his experience working on a design system for United Airlines, explaining they had a different type of date picker for their homepage, booking page, and on the logged-in experience — creating a frustrating end-user experience. By creating a standard implementation for the date picker and other components, he was able to help create an experience that reduced friction for the user, and made booking a flight more efficient and enjoyable.

Making the right strategic investment in design systems

The power of design systems exceeds their ability to bring together design and development efforts. Rather, it lies in their ability to serve as a strategic asset that can generate and accelerate business results. By unlocking design inefficiencies in relation to scalability, collaboration, and brand coherence, they give today’s organizations the ability to meet the ever-evolving expectations of their customers — while remaining competitive. 

The adoption of a design system is more than a step toward website optimization, and it’s far more than a style guide. The modern design system is a strategic investment in the future of your business as a whole, as well as a commitment to continuously innovate. The successful adoption and implementation of a design system is a forward-looking strategic decision that will prepare your business to navigate the complexities of today’s digital-first landscape with agility and creative control. 

Now that we’ve explored the multi-faceted benefits and strategic importance of design systems, let’s take a look at the practical implementation and best practices for modern design systems. 

Delivering a seamless end-to-end experience on your website is critical, and while design systems have made impressive strides over the past decade, there’s still work to be done. 

We caught up with two leading design systems experts — Dan Mall, founder of Design System University, and Jon Quach, Staff Frontend Engineer at Webflow — to get their first-person perspective on how teams can build and refine their design systems. Below, hear their thoughts on what it takes to truly develop a design systems practice and why experimentation is critical to success.

The shift from project to practice

According to Dan Mall: “What I see most commonly in my work is that people approach design systems as a project.”

Instead, Mall emphasizes the significance of recognizing design systems as products, which requires a deep understanding of users’ needs — and is an intermediate step to establishing a design systems practice. Instead of going off on your own and creating the system you think other teams need, he encourages teams to engage in meaningful conversations with one another, understand their roadmaps and challenges, and align the design system's evolution with these insights.

Mall’s more empathetic approach to an otherwise rigid design system not only ensures that the design system remains relevant and useful, but also fosters a sense of ownership and collaboration across the organization. This process of engaging collaborators can massively improve overall stakeholder alignment as well. 

“The first place that I start when I work with a team is…let's just start talking to a bunch of people. We don't know yet if we should build cards first or footers first or, or headers first…so let's go talk to people about what's coming up over the next quarter or two on the roadmap.”

— Dan Mall, Founder, Design System University

For Mall, viewing design systems as a product works well in the early stages of a productized design system, but the problems begin when big changes — something like a rebrand, merger, or reorg — cause disruption. As he explains: “They’re often unplanned, so they bulldoze established roadmaps. Even when they are planned, they’re not trivial to pull off, much less pull off well.”

As your team starts looking to the future — one where you can support more complex builds and experiences — ensuring that your system can adapt becomes critical. And that ability is only unlocked when a design system practice is established. 

Design systems as a practice 

Mall explains that teams can quickly fall into the trap of assuming what each other does and advises technical and design teams to engage one another more meaningfully. To fully evolve your design system from a product to a successful practice, he says designers and developers need to truly understand what kinds of challenges each other faces — and explains how eye-opening this exercise can be. 

For example, designers may not understand the intricacies of how engineers use or configure design system components, and engineers might be unaware of the design process in tools like Figma. Mall suggests that the first step in fostering better collaboration is to sit together and show each other how each works, even if it's just a brief 15 to 30-minute demonstration.

Mall suggests that the first step in fostering better collaboration is to sit together and show each other how each works, even if it’s just a brief 15 to 30-minute demonstration.

The ultimate goal of this cross-disciplinary collaboration, and of attaining a design system practice, is not just to have designers and engineers working alongside each other, but to encourage them to dip their toes into each other's domains. When engineers start trying their hand at mockups in design tools like Figma, and designers begin experimenting with coding in tools like Storybook, it signifies a successful cross-pollination of skills — one that can help organizations not only successfully collaborate on design systems, but scale their impact.

Trading perfection for improvement: embracing experimentation

Some key elements of your design system practice is continuously refining and improving processes, collaboration, and implementation. Jon Quach, who goes by “Q,” is one of many members working behind the scenes at Webflow on our design system — and an evangelist of constantly improving a design system.  

With years of experience building and refining design systems, his advice to anyone building a design system practice is to shift their focus from perfectionism to elevating the overall quality of work. 

He likens the evolution of a design system to cooking, where you can’t create a recipe without first experimenting and understanding what needs improvement. It's about identifying areas that need standardization and establishing best practices through experience and iteration: “How can you create a recipe for meals you've never even cooked before?” he asks.

“I believe it's sort of like this wonderful, interesting, often chaotic symbiotic relationship you have between the two, where one influences the other… the design system side influences how product and UI should be tightened up and standardized.”

— Jon Quach, Staff Frontend Engineer, Webflow

For Q, the key to developing effective design systems lies in accepting imperfection and focusing on collective efforts toward improvement. By embracing the iterative process and focusing on standardization and improvement, he believes teams can chart a path toward building design systems that are more efficient and effective.

The power of accelerating feedback loops

If an iterative approach is important to developing a good design systems practice, then accelerating the feedback loop between product teams and design systems teams is critical. Q notes that interactions between these teams often occur when there's either a problem to be addressed or an idea to be explored. 

Once engaged, the design system team undertakes an analysis of the issue or idea to determine if it can be resolved within the design system: “We ask, ‘Can we solve this from a systematic approach?’ If the answer is yes, then there's usually some sort of triaging process. We look at when this can fit into timelines, etc.”

If the problem or idea presents a recurring pattern or potential for systemic improvement, it's considered for integration into the design system. This process involves evaluating its fit within current timelines and priorities.

Q acknowledges that due to the busy nature of teams, there's often a delay in addressing these requests. To prevent this from hindering progress, he suggests temporary solutions or workarounds:

“It's okay if it's not perfect…come up with a solution that is acceptable for everyone so that they can unblock themselves and then we can refine later.”

‍— Jon Quach, Staff Frontend Engineer, Webflow

These interim measures allow the product team to move forward without waiting for the design system team, avoiding bottlenecks. The understanding is that these solutions are good enough for the time being, and a more refined approach will be revisited later.

Design systems provide a foundation for sustainable growth

The journey from recognizing design systems as a project to embracing them as a dynamic practice sets the stage for the next evolution: scaling these systems to support business growth. And by looking at a real world examples, we can better understand how design systems can have a massive impact within an enterprise. 

In the next chapter, we delve into the insights of Diana Mounter, Github’s Head of Design, who shares her firsthand experience in scaling design systems. We’ll uncover practical strategies for ensuring design systems not only grow in size, but also capability and impact in a sustainable way. 

Diana’s story illustrates how the principles of shared ownership, flexibility, and importance of a shared language across design and development are pivotal in adapting designs systems to the expanding needs of fast-growing teams. 

As a company and its products mature, feedback and collaboration is not the end-all-be-all. Instead, the design system must be able to scale with the organization. Diana Mounter started her design systems journey as an individual contributor, eventually worked her way up to the role of Head of Design at Github, and has experienced design systems at all stages of maturity. She walked us through how her organization scaled its design system, sharing key lessons and considerations for all fast-growing teams.

Share ownership across design and engineering

Mounter explains that there are pivotal moments where significant evolutions are necessary. She strongly advocates for making the design system a shared responsibility between the design and engineering teams from the outset:

“I think one of the first things you need to do is really make it a shared problem, right? You really do need that engineering and design alignment and investment and collaboration from the start.”

A critical aspect of scaling design systems is fostering a sense of shared ownership, which accelerates broader adoption of the system across the organization. Doing so involves setting up effective mechanisms for input and contribution, which can be challenging and requires ongoing effort as the system evolves. This approach prevents the design system from being siloed as the responsibility of a specific team, and promotes the sense of shared ownership.

Ensure your system is flexible

Mounter warns against the temptation to use the design system as a one-size-fits-all solution, which can lead to rigid, less usable outcomes. Instead, she advocates for a balanced approach where the design system addresses common UI problems efficiently, allowing teams to focus on more complex, unique challenges:

“It's about reminding yourself why you're building the system in the first place …It's to make problems that we know how to solve easy… and to gain efficiencies so that we can spend time on those bigger problems.”

Mounter explains that maintaining flexibility within the design system is what actually drives success. The primary goal of a design system, as she points out, is to streamline solutions for known problems, thereby freeing up resources to address more significant challenges, as well as exploratory work. It's not meant to be a catch-all solution, but rather,  a tool to enhance efficiency and consistency, particularly in representing the brand and ensuring a consistent user experience. She recommends the 80/20 rule, where the system is designed to solve 80% of use cases, leaving room for tackling the more complex 20% that requires bespoke solutions. 

Mounter’s approach to scaling design systems — promoting shared responsibility, maintaining flexibility, and focusing on efficiency and consistency while allowing room for unique, complex problem solving — has not only facilitated the growth of GitHub's design system, but has also provided a blueprint for other organizations looking to scale their own design systems effectively.

Create a shared language between designers and developers

Along with shared responsibility, Mounter emphasizes that one of the primary roles of design systems is to establish a shared language that both designers and developers can understand and use.

This shared language not only facilitates communication but also helps designers think in terms of software development, such as considering component APIs, and enables developers to delve deeper into the design aspects, thereby blurring the lines between these disciplines:

“The other really beautiful thing about design systems is…[they teach] designers how to think in engineering and software development terms…trying to construct components and thinking about the API, you start to think about things in the same way as engineers.”

Another key point Mounter makes is the importance of considering the end user's experience when designing components. She suggests a collaborative approach where designers and developers work together to define the component experience before building it.

Mounter’s experience at GitHub also highlights the role of hybrid professionals, such as design engineers, who possess both design and technical skills. These individuals play a crucial role in bridging the gap between design and development, making nuanced design decisions in code, and contributing to areas like performance and user experience.

Building better systems requires building better processes

The collaboration between designers and developers, as seen at GitHub, is not just about building a system but about building a culture of mutual understanding, respect, and shared goals. This approach not only improves the design and development process but ultimately leads to better products and user experiences.

As design systems continue to evolve in the decade ahead, organizations will need to continue to establish a strong foundation to unlock scale. This spans the processes driving these systems, the people building them, and the strategies implemented to continuously improve, iterate, and refine them. 

To look at the future and potential of design systems, we asked each of our guest experts about how they foresee one of today’s biggest emerging technologies, artificial intelligence (AI), will impact and shape design systems in the future — from the business impact it can have and what’s to how it may start transforming the roles of designers and developers.

Unlocking even greater efficiency

“In many ways, I think AI is what we’ve been missing and waiting for when it comes to design systems.”

— Dan Mall, founder of Design System University

There is little doubt amongst our experts that there are certain things that artificial intelligence (AI) already handles well, and will likely get better at quickly. Unsurprisingly, handling repetitive tasks with efficiency is high on the list.  Diana Mounter says that it will “enable you to do some…tedious tasks faster, and spend more time exploring those blue sky solutions.”

Mounter sees AI as a significant enabler in the design systems space. She anticipates that AI tools will accelerate the building and development of design systems, making it faster to generate new layouts and designs.

“You can imagine that it's just going to get faster to build with systems and create new layouts and explorations and really generate a lot of different designs very quickly.”

— Diana Mounter, Head of Design, Github

For Brad Frost, one of the main selling points of design systems is that they improve efficiency by freeing up teams to work on more challenging problems. So where does that efficiency and increased velocity come from? He explains, “Well, in large part by freeing up human beings’ brains and hands to focus on solving more interesting problems than ensuring a button is 44px tall instead of 43px tall.”

Integrating AI into design systems

Frost sees a future where AI becomes a consumer of design systems. He envisions AI not just as a tool within design systems but as an entity that can wield a design system effectively. This could involve AI making informed decisions based on the design system's guidelines and standards, as well as the capability to generate source code for new components. His observations point towards a future where AI significantly contributes to the efficiency of design production, creating a synergy between human creativity and machine scalability.

Furthermore, our experts believe the integration of AI with existing design tools can be a pivotal enhancement for driving greater efficiencies. For example, AI's ability to quickly process and apply design system rules and standards could drastically reduce the time spent on routine tasks like code generation, component resizing, and style consistency checks. These types of integrations can pave the way for a future where AI can learn and adapt to an organization's specific design language — further personalizing and optimizing the design process.

Where AI is already playing a role in design systems

Jon “Q” Quach highlighted how AI can be used to not only perform repetitive tasks but also to establish foundational elements of a design system. He emphasizes the advancements made in AI-driven design tools, which exemplify AI's capability to construct complex user interfaces from basic text prompts:

“You tell it, I want this particular look, or my [design system] currently looks like this, where it has these particular colors, these values for spacing, please generate for me the base level values for the spacing scale, typography scale, [etc].”

— Jon Quach, Staff Frontend Engineer, Webflow

By interpreting and executing design ideas, AI tools can start to simplify the process of UI creation, marking a significant leap in design efficiency. Such AI-driven systems can rapidly generate the structural underpinnings of design elements, including spacing, typography, and color scales. 

This automated generation of components can drastically reduce the time and effort required for initial design setup, allowing designers to focus on more nuanced and creative aspects of their work. 

AI as a co-pilot: a complement to human creativity

While our experts cited the many recent advancements in generative AI that can handle simple requests with incredible speed — think platforms like Midjourney and DALL-E — they note that there’s plenty of room for innovation before these types of emerging tech can handle the nuance and complexity of contemporary design requirements and consumer expectations. 

Dan Mall explains that while these types of systems can certainly come up with hundreds or even thousands of drawings/paintings/sketches in the time it would take a human to do just one at high-fidelity, AI has not reached the point where it can judge what’s good and what’s not, what might be emotionally resonant with a human audience, and what might just be junk. 

“To date, AI has little criteria on understanding what’s meaningful to me, or you, or us. Because, as humans, we’re really bad about understanding what’s meaningful to us, and why. We laugh and cry at the oddest things. We sometimes find pleasure in the mundane, and we’re sometimes apathetic at the pleasurable.”

— Dan Mall, Founder, Design System University

So while AI can produce a multitude of concepts quickly, it is the human designer's task to sift through these ideas, refine them, and infuse them with quality and originality. “That’s exactly what generative AI is great at: remixing commoditized data into endless possibilities. And it’s even better than humans at transforming that data into combinations that may not have occurred to us,” he explains.

He concludes by explaining that if teams embrace AI as a co-pilot, “we can let it take care of the menial task of interface building — essentially, combining common components into a layout — with humans’ roles becoming the discernment of which interfaces best solve the problems in front of us.”

How designers’ and developers’ roles will start to transform

The roles of designers and developers will undoubtedly change in the coming months and years as emerging technology like generative AI continues to improve. For those willing to learn to embrace AI as a co-pilot — but retain ownership of the human-level decisions around quality, for example — Frost believes a positive shift will take hold. He foresees the jobs of designers and developers becoming ones that are less monotonous and filled with more worthwhile challenges.

“How many millions of hours of wasted human life energy is going into rebuilding a date picker? It's a tragedy.”

— Brad Frost, author of Atomic Design

At the end of the day, the responsibility lies with designers and developers to guide new technologies like AI in a direction that uplifts the human experience, respects ethical boundaries, and nurtures creativity. For our experts, AI is not the end of creativity in design systems. Rather, it is a new beginning, offering a path to explore uncharted territories and new possibilities for the next generation of design at scale.

Continuously improve your best ideas

Design systems embody a symbiotic relationship where design informs the website, and the website, in turn, informs the design. This connection highlights the critical importance of design systems: their power comes from bridging the gap between design and development.

Design systems serve as the foundation that helps businesses bring their best ideas to life. That’s why the future of building design systems is all about collaboration and innovation. This means creating collaborative workflows where designers and developers can input rich sources of data from their partners in marketing to inform, evolve, and enhance their existing system. This also means exploring new ways to build, such as using emerging tech to help implement solutions that streamline the design process and facilitate rapid iteration. 

This shift — one where traditionally siloed design, marketing, and development teams can come together and where businesses can leverage innovative technology — will uplevel how these systems are built, helping organizations remain agile in order to stay ahead of the competition. Additionally, it will begin to transform the role of the designer into one that is even more strategic and productive.

As teams look toward the future and explore new and nuanced methods that can enhance how design systems are created, managed, and maintained, it’s vital to recognize the expansive potential of these systems. Beyond their immediate applications, design systems are poised to provide a critical lever to deliver powerful digital experiences — marking a significant shift in how creativity is facilitated by technology and how we ultimately shape the future of design and development.

Ready to design at scale?

Trusted by teams at over 200,000 of the world’s leading organizations — including the New York Times, Orangetheory Fitness, Greenhouse, Discord, TED, and Upwork — Webflow Enterprise gives your teams the power to build, ship, and manage secure, scalable websites without relying on precious developer resources. 

Join the community

Check out our discussion forums, learn more at Webflow University, follow us on social, or reach out at contact@webflow.com.