Magnet Design - An Internal Cross-Platform Design System

Magnet Design System is created by Kwai Design Team to help teams build high-quality digital experience for all business products in Kwai Technologies Co.,Ltd. It consists of developer resources, design guides, components, productivity tools and icons. Software engineers can use code blocks to build products faster, and product managers can quickly design a web page by dragging and moving the essential components, while designers can design composite components by quickly combining existing ones. We believe a good design system, combined with the intelligent technology and humanity concerns, have a deeper responsibility to make smarter business and better society.

Involvement

Interaction & UI Design

Front-end Development

Team

Zhiwen Qiu, Weiyuan Zhao, Liuliu Chang, C.W. Wang, Y. Wang, Kuaishou Engineering Team

Duration

My Role

2020.8 - 12

I am the only interaction designer and worked with UI/ visual designers and front-end engineering team to make sure the components cover all the scenarios for our business products. I researched and created wireframes, UI design guides and visual elements.

Design System Components

The KID Webkit covers a range of components of interface needs, including:

Foundation: defines general UI features such as color, typography and layout
Navigation: Allow users to move around digital spaces using components such as affix, navigation drawers, tabs and steps.
Input: Allow users to enter data information and make selections using components like text fields, radio buttons, checkbox and sliders.
Display: Organize and place information with components like cards, lists and tables
Feedback: Alerting users with key messages or errors using components such as pop confirm, message, banners and modals.