Selecting a framework for your design system is a crucial decision. This choice will significantly impact the system’s usability and maintainability as your component library grows and adoption increases. While often overlooked, careful consideration upfront can save time and resources in the long run.
Understanding Your Users
As a product designed for internal teams and projects, crafting an effective component library requires a deep understanding of your target audience. Identify the teams and projects that will be using the design system and tailor its components to their specific needs.
Assessing Your Tech Landscape
Take stock of the projects within your company and the technical stacks they employ. Don’t overlook these often-missed areas:
- Legacy Projects: Even projects in maintenance can benefit from your design system. By providing simple yet robust components, you can reduce maintenance costs and progressively improve the quality of these projects.
- Public Websites: Many companies have public websites built with CMS platforms like WordPress or Drupal. These sites, even if static for promotional purposes, should be factored into your design system strategy.
- Internal Tools and Plugins: Many companies have a collection of internal tools and plugins, some built on legacy stacks or by individual teams. Your design system can offer these tools a refresh and potentially reduce maintenance costs.
- Client Tools and Marketplace Plugins: For companies offering client-facing tools, robust components within your design system can ensure a positive user experience even in areas with less direct control. Shopify’s Solaris and Salesforce Lightning are successful examples of design systems facilitating clean and consistent user experiences for client extensions.
Considering Available Technical Skills
As you inventory your company’s tech stacks, you’ll likely discover a wider variety of technologies and skillsets than initially anticipated. Identify the frameworks and tools that your teams are already familiar with, especially those with strong expertise.
Framework Selection Strategies
- Single Tech Stack Scenario: In rare cases, a company might operate on a single tech stack. Here, the choice is straightforward: use that stack. While there’s a risk of future projects requiring different technology, the benefit is significant – immediate and widespread adoption with minimal training required.
- 2 Stacks Scenario: This is more likely, often involving a separate stack for the public website and the core app. This situation is trickier. Reusing components built for the app framework on the CMS website can be difficult. Web Components offer a potential solution, but require additional training and might face resistance from app developers. While Web Components are future-proof, if pushback is strong and champions for this approach are lacking, adopting the app’s framework can be a reasonable compromise.
- Multiple Stack Scenario (More Than 2): Unless one of these stacks is solely for legacy projects, Web Components become the most viable option. Maintaining multiple system versions for web products quickly becomes impractical. Balancing resources across various frameworks becomes difficult, potentially leading to inconsistencies and issues. This challenge extends to mobile app development, potentially requiring significant developer resources to manage numerous codebases.
The Power of Web Components for Design Systems
While the decision might not always be clear-cut, Web Components offer compelling advantages for building future-proof and adaptable design systems:
- Framework Agnostic: Unlike traditional frameworks that lock you into a specific technology stack, Web Components are framework-independent. This allows you to create components that can be seamlessly integrated into any project, regardless of the underlying framework (React, Angular, Vue.js, etc.) or even vanilla JavaScript. This flexibility ensures wider adoption and simplifies maintenance as your company’s tech landscape evolves.
- Lightweight and Performant: Web Components are built on standard web technologies like HTML, CSS, and JavaScript. This minimal footprint translates to faster loading times and a more performant user experience. This is especially beneficial for complex design systems with numerous components.
- Highly Customizable: Web Components when built using Design Tokens allow for a high degree of customization. You can define properties and methods that control a component’s behavior and appearance. This flexibility empowers developers to tailor components to specific project needs while maintaining a consistent design language within the system.
- Future-Proof Investment: Web Components are a standardized web technology actively supported by major browsers. This ensures they remain relevant and maintainable over the long term. As web development continues to evolve, your design system built with Web Components won’t become obsolete due to changes in popular frameworks.
By incorporating Web Components into your design system, you gain a future-proof solution that promotes flexibility, performance, accessibility, and developer efficiency. This translates to a more robust and sustainable design system that empowers your teams to create exceptional user experiences.
Conclusion
Unless compelling reasons dictate otherwise, Web Components are a strong choice for most design systems. They offer increasing robustness, improved development experiences, and a growing ecosystem of libraries and successful design system implementations. If this was interesting to you, then I suggest you take a look at a follow-up article I wrote about Exploring Web Components for Design Systems for a quick overview of the technical aspects of Web Components!
1 thought on “Choosing the Best Framework for Your Design System”