How to Build an Efficient Design System: Lessons from a B2B Tool

Why Build a Design System

A verified, effective design system helps teams produce consistent outputs quickly, improves collaboration, and frees designers from repetitive work.

Shufang Design System

Shufang is a B‑to‑B marketing tool with high component reuse and multi‑person collaboration. Existing assets were scattered; the goal was to organize them into a "toolkit" that supports iteration, lets the team focus on user and business insights, and ultimately builds a strong product reputation.

Leverage Tools: Build a solid design infrastructure and improve the toolkit.

Focus on Business: Dive deep into user and business needs to boost team innovation.

Establish Presence: Refine product experience, earn user praise, and secure industry standing.

The series will share three articles; this first piece covers the foundational infrastructure and the step‑by‑step process used in Shufang.

Leverage Tools – Assemble the Essentials

We start by studying existing references such as Microsoft Fluent, Shopify, and the book "Design Systems: A Systematic Approach to Digital Product Design." Combining these with product‑specific needs guides our implementation.

First, assess current assets and improve them. Then compare with exemplary design systems to fill gaps. Finally, anticipate future product growth and expand accordingly.

Leverage Tools – Refine the Toolkit

Shufang’s design system is built in Sketch, leveraging its variable, style, and component libraries.

1. Color Palette: As the product scales, a comprehensive color system is needed. Methods include manual stacking, formula calculation, or tool generation.

2. Base Styles: Consistent line thickness, colors, and spacing create a unified visual tone across the UI.

3. Icon Library: Icons are stored as documents, then transformed into fonts or Symbols; deeper integration can use configurable solutions like iconpark.

4. Componentization: Standardized components accelerate product goals; reference UI libraries such as Tetrisly, which provide Sketch and Figma components.

5. Global Rules: In large‑scale products, separate teams handle modules, so global guidelines ensure overall consistency.

6. Brand Language Exploration: Developing a brand voice supports future growth, internal alignment, and external promotion, becoming a key reference for product redesigns.

Conclusion

The foundational part of a design system is a long‑term effort requiring continuous maintenance and improvement. While tools are essential, they should serve the work, not become an end in themselves. Striving for excellence can turn designers into true craftsmen.

We hope these insights help you; feel free to share suggestions. The next article will cover "How to Focus on Business" once the efficient tools are in place.