Design Systems - Part 2

Congratulations! You’ve decided to build a design system. Now what?

Hopefully, you’ve followed the steps outlined in Design Systems- Part 1 and are ready to design and build your library. As you start, here are a few things to consider to make your design system successful!

Tech Stack

Consider what tech language you want to use to create your design system. Will it use web components or a framework? There are benefits for both.

Web Component Pros

• Built with web standards and is often lightweight
• Agnostic to frameworks so can be plugged in anywhere
• Vanilla Javascript so potentially a simpler learning curve

Framework Component Pros

• Rapid development with lots of built-in functionality
• Rich ecosystem of open source community
• Easier to plug into your existing framework

Web Component Cons

• Limited functionality out of the box
• You need to manage more boilerplate code
• Less ecosystem support when compared to the big frameworks

Framework Component Cons

• Locked-in to developing with the framework
• Steeper learning curve to understand rules and plugins
• Often have larger bundle sizes due to larger feature sets built into the system

Many organizations often use one of the major front-end frameworks such as React , Vue , or Angular . Developers may elect to stick with those frameworks when building their library. If web components seem right for you, Svelte and Lit have had great results and can be used within other frameworks.

Hosting

When creating your component library, the most common way to manage and host the library is through npm. You’ll want to consider whether to make it public (open source) or private (only internal use). Additionally, it’s important to maintain semantic versioning which leverages major, minor, and patch releases.

Design

If you’ve followed our advice from Design Systems- Part 1 you’ll have a good idea of what components you need to build and are ready to spend time defining functionality and visual styles. Product designers are valuable resources at this step in the process. They know where the new components fit into your applications and how they will be used. Work with them to define component variations, properties, usage guidelines, and visual style.

Don’t have a designer in your organization? Reference publicly available component libraries and design systems for inspiration. Try REI Cedar , the Atlassian Design System , Shopify Polaris , Salesforce Lightning , or Microsoft Fluent .?

Style

Modern design systems utilize design tokens to create consistent and reusable styles across applications. Design tokens are simply a way to manage design values and properties across a design system. Tokens typically include values for color, typography, spacing, border-radius, z-index, animations, and effects like box-shadow or blur.

Consider using a CSS preprocessor like Sass which allows developers to create variables for the design tokens you defined earlier. Now your tokens can be applied to components maintaining a clean and scalable approach to your UI.

Another option to consider is CSS frameworks like Tailwind CSS . Tailwind allows developers to use predefined utility classes to style components and can be configured with custom colors, spacing, and other token-level attributes.

Building your components

Now that you’ve chosen a tech stack and hosting solution, there are a few things to consider when building the components themselves. Here’s where reusability and a build pattern come into play.

• Craft Flexible Components: Aim for components that can be used across various applications in your organization. This maximizes their value and reach.
• Properties and naming: Carefully consider the properties you expose in your components and establish a clear naming convention. For example, a button component could have properties such as “text” or “type”. Boolean-based properties could be camelCased with “is” prefixed.
• Event handling: Design your components to emit generic events, when needed, that can be handled by any framework or application. This allows developers to integrate the component's functionality seamlessly.
• State Management: For components requiring state management (toggles, dropdowns, etc.), consider how state will be handled without framework-specific solutions.

Remember, reusability is key! Keep these principles in mind as you craft your components, paving the way for a robust and adaptable design system.

Testing

Testing is key! Often overlooked, testing is crucial for building a reliable design system. Regular testing throughout development ensures your components function as intended. Utilize both manual testing, to confirm components behave as expected from a user's perspective, and unit testing (using Jest, Mocha/Chai, or Karma/Jasmine depending on your framework) to prevent regressions and unintentional bugs. Integrating testing into your CI/CD pipeline automates testing with each code change, maintaining high code quality. Prioritizing testing lays the groundwork for a robust component library and design system.

Documentation

To ensure continued success with your design system, it’s important to have well-written and organized documentation. Consider the following when writing your documentation:

• Comprehensive Installation Guide: Provide clear instructions on how to install your library using a package manager like npm or yarn. Include code snippets and address any potential dependencies or configuration steps.
• Contribution Guidelines: Foster a collaborative environment by outlining how developers can contribute to your design system library. Specify preferred methods for submitting bug reports, feature requests, and pull requests.
• Detailed Release Notes: Maintain a dedicated release page with clear changelogs for each version update. Highlight new features, bug fixes, breaking changes, and any important updates developers should be aware of.
• Component-Specific Documentation: Dedicate sections to each component within your library. These sections should detail usage instructions, implementation guidelines, and code examples. Include visual aids showcasing different component variations.

Take your documentation to the next level by integrating Storybook . This powerful tool creates an interactive playground where developers can explore your components in real time. They can toggle properties, see responsive rendering updates, and even copy code snippets directly. Storybook seamlessly integrates with the mentioned frameworks and can be made publicly accessible for open-source libraries.

If you need help getting started, our team is ready to lend a hand, schedule time to chat with us.?