Learning from open design systems, without just cloning them
Veeresh Patil
UX/UI Design Lead | Human-Centered Approach, Exceptional User Experiences
Hi there,
In our last issue of Behind the Design: Unfiltered, we demystified what design systems truly are. Now that we're on the same page about their value, a common question arises: with so many fantastic public design systems out there, why not just pick one and run with it?
It’s a tempting shortcut. You see impressive systems – perhaps you've browsed the extensive lists on resources like designsystems.com and seen mature examples from Google (Material Design), IBM (Carbon), Shopify (Polaris), or Microsoft (Fluent UI). The thought of leveraging all that pre-existing work is powerful. And indeed, there's immense value in these open resources. But the key is learning from open design systems, without just cloning them.
Today, let's get unfiltered about how to strategically draw inspiration and knowledge from these public giants to build a system that's authentically and effectively yours.
Why Open Design Systems are Incredible Learning Tools
Public design systems from leading companies are a goldmine for any team building their own. They offer invaluable insights:
Masterclasses in Best Practices: These systems are battle-tested. Study how Google's Material Design (https://m3.material.io/) approaches motion and interaction for mobile, or how IBM's Carbon Design System (https://carbondesignsystem.com/) handles accessibility for complex enterprise data components. You're learning from teams who've invested heavily.
A Library of Solved Problems: Common UI challenges have been tackled extensively. See how Shopify Polaris (https://polaris.shopify.com/) structures its robust components for e-commerce settings, or how the Atlassian Design System (https://atlassian.design/) ensures consistency across its suite of productivity tools. This isn't about copying their visuals, but understanding the functional solutions they've arrived at.
Documentation Excellence: Many public company systems boast stellar documentation. Analyzing how Microsoft's Fluent UI explains component usage and provides guidelines, or how Audi's Design System - their system showcases strong brand integration translates brand principles into usable guides, is incredibly instructive.
Sparking Ideas & Overcoming the Blank Canvas: Staring at a blank Figma file can be paralyzing. Browsing how various systems, perhaps even one as specific as the Audi Design System with its distinct automotive context, approach their componentization can ignite creative solutions.
Benchmarking Industry Standards: These systems often reflect current best practices in usability, accessibility, and even developer experience from leading commercial entities.
The Cloning Trap: Why Direct Copying Fails Your Unique Needs
If these systems are so good, why isn't directly cloning them the answer? Because your context is king.
Brand Misalignment: Your organization has a unique brand. Trying to force it into the visual framework of, say, Material Design, if your brand is vastly different, will feel inauthentic. The Audi Design System is uniquely Audi; your system needs to be uniquely you.
User & Context Disconnect: The design decisions in a system built for broad public use (like Material) might not suit your specialized enterprise software users or the critical, focused tasks in a healthcare application.
Ignoring Your Goals & Constraints: Your business objectives and your development team's technical capabilities must drive your system. Forcing your team to adopt components or patterns from a system built for a different tech stack leads to friction.
The Frankenstein Effect: Pulling a button from Polaris, a card from Carbon, and a navigation pattern from Material without a unifying vision results in an incoherent user experience.
Shallow Ownership: If your team hasn't grappled with the why behind design decisions and tailored them, they won't truly own or effectively evolve the system.
Learning, Not Cloning: The Strategic Approach
The goal is to absorb the wisdom of open systems and apply it intelligently. Think "inspiration and adaptation."
Dissect the 'Why,' Not Just the 'What': When you see a component you like in a public system a table the Atlassian Design System, don't just look at the visuals. Ask: Why did they structure it this way? What user research informed this? What accessibility features are built in? Then, take those underlying principles and design a solution for your users.
Deconstruct to Understand, Then Reconstruct for Your Brand: Break down impressive components from systems like Carbon or Polaris. Analyze their structure, variants, and states. Then, use that understanding to rebuild those patterns using your own brand guidelines, design tokens, and within your technical possibilities.
Reference for Problem-Solving: When facing a specific UI challenge, look at how several different open systems from well-regarded companies (explore the variety on designsystems.com) have addressed it. Compare their solutions, understand the trade-offs, and then engineer your best approach.
Use as a Quality Benchmark: Let mature systems like Material Design or Shopify Polaris set a high bar. Is your component documentation as thorough? Are your accessibility considerations as robust?
Learn from Their System Operations: How do established commercial systems manage contributions, versioning, and communication? These operational insights are often as valuable as the UI itself.
Practical Steps to Learn Effectively Without Cloning
Solidify Your Foundations First: Before diving deep, have your own core brand guidelines, user understanding, and design principles clearly defined.
Critical Evaluation is Key: When you find something interesting, rigorously question if and how it truly solves your problem in your specific context.
Adapt, Theme, and Own: Never just lift pixels. Ensure any inspired element is fully re-skinned to match your brand and uses your tokens.
Document Your Rationale: Explain why you adapted a pattern and how your version serves your needs.
Iterative Learning: Focus on solving current challenges by learning from relevant examples.
Conclusion: Build an Authentic System, Informed by the Best
Open design systems from companies like Google, IBM, Shopify, Microsoft, Atlassian and many others are an invaluable part of our collective design knowledge. They offer a wealth of solutions and best practices.
The most effective path, however, is to approach them as a rich library for learning and inspiration, not a catalog for direct cloning. By dissecting their strategies, understanding their principles, and then thoughtfully adapting those insights to your unique brand, users, and goals, you create a design system that is not only robust and efficient but also truly authentic and purpose-built for your organization's success.
What open design systems from public companies do you find most inspiring for learning (not copying)? What's the smartest adaptation you've seen? Hit reply and share your "unfiltered" thoughts!
Visit my Website: www.veereshpatil.com
Connect with me on LinkedIn: https://www.linkedin.com/in/veeresh-p/
Reach out directly: hello@veereshpatil.com
Best,
Veeresh Patil