The Gradual Design System: How We Built Slack Kit

This post was co-written with Zack Sultan, Lead Product Designer at Slack In 2016, Slack was two years old and already used by millions of people. Our codebase had grown rapidly, and like many companies that focused on product/market fit, our code was built in a way that favored time-to-market over maintainability, consistency, or reusability. We…

Slack logo
Slack
•
Garrett Miller
•7 min read•intermediate•
--
•View Original
ChefReact

Overview

The article discusses the development of Slack Kit, a design system created to standardize components within Slack's rapidly growing codebase. It highlights the collaborative efforts of engineers, designers, and writers to enhance product consistency, accessibility, and efficiency in design and engineering processes.

What You'll Learn

1

How to establish a design system that enhances product consistency

2

Why collaboration between design and engineering is crucial for product development

3

How to modernize a codebase while maintaining development speed

Prerequisites & Requirements

  • Understanding of design systems and component-based architecture
  • Experience with cross-functional team collaboration(optional)

Key Questions Answered

What is Slack Kit and how was it developed?
Slack Kit is a design system created to standardize components within Slack's product. It was developed through a collaborative effort among engineers, designers, and writers, focusing on enhancing consistency, accessibility, and efficiency in the design and engineering processes.
What challenges did Slack face during the modernization of its codebase?
Slack encountered challenges when modernizing its codebase with React, particularly with legacy components that were not scalable. The team had to rebuild these components to ensure they could handle larger data sets and maintain performance without hindering overall development.
How does Slack ensure the accessibility of its components?
Slack ensures the accessibility of its components by adhering to strict design standards that include accessibility criteria. This involves documenting and sharing guidelines that help teams create components that are usable for all users, regardless of their interaction methods.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React
Used for modernizing Slack's codebase and building new components.

Key Actionable Insights

1
Establishing a design system like Slack Kit can significantly improve product consistency across teams.
By centralizing design standards, teams can reduce discrepancies and enhance user experience, leading to a more cohesive product.
2
Encouraging cross-functional collaboration between designers and engineers is essential for successful product development.
This collaboration helps clarify standards and best practices, ensuring that both design and functionality meet user needs effectively.
3
Modernizing legacy code requires careful planning to avoid disrupting ongoing development.
Teams should prioritize rebuilding components incrementally, ensuring that new implementations do not hinder the overall progress of product features.

Common Pitfalls

1
Failing to document design standards can lead to inconsistencies in product development.
Without clear documentation, teams may make arbitrary decisions that diverge from established guidelines, resulting in a fragmented user experience.

Related Concepts

Design Systems
Component-based Architecture
Cross-functional Collaboration