TikTok Design System
Overview
TikTok WebApp Design system is supporting central design team which including the LIVE design team (to C), LIVE design team (to B), commercialization design team, Core product UX team etc.
- Principal UX Engineer
- Design system / Visual design
- Cross platform
Context
The Lifecycle of an Element
A typical development process
To ensure the well-organized development of the design system, our designers must undergo the entire component design process, starting from scope definition to component testing, usability testing, further documentation, and usability validation. Components usually have a long lifecycle within a design team.
Design system scope
The TikTok Design System supports multiple teams and boasts a sophisticated workflow catering to their needs.
Basic rules
Build with variants & Adaptive components
Easier to find & efficient to manage components
Designers could find the components just in the variants and switch the same component faster and easier.
It will automatically revise components in all screens, if designers are using the components master piece.
Adjustable and responsive
The WebApp components should responsive on any size of device. Designer don't need to change the entire component.
Process
Components tracking doc & Documentation
To track the whole design system process is also a part of the work we do.
The tracking doc includes design status, priority, design Wiki, and development status. The components tracking doc are helping design team and front engineer team to have better knowledge about the whole design system process.
Structure of the document
Each components will have there own documentation to help our designer better understanding of all the components. The documentation have pretty similar structure: Anatomy, Type(size, functionality, interactions), Layout, and Motion.
Design file
Keeping it simple yet scalable
We've built 32 different components, all designed with responsive and adaptive rules, ensuring compatibility across various devices and viewport sizes.
