DESIGN SYSTEM
Tiktok Shop Design System
Year
2024 - 2025
Company
TikTok
Role
Product Design
Background
During TikTok Shop’s rapid U.S. launch, designers created patterns independently to meet aggressive deadlines. This resulted in:
• Inconsistent experiences across typography, color, iconography, CTAs, and layouts.
• Cluttered interfaces, hindering navigation and comprehension.
• Localization issues where designs broke during translation.
Goal: Create a scalable, cohesive design system for TikTok Shop that aligns with TikTok’s brand, accelerates global launches, and supports localization without compromising creativity.
Guiding Principles
Use TUX as Foundation: Align with TikTok’s core design system to ensure commerce components feel native.
Design for Scale: Build consistent, efficient systems for global teams.
Embrace Creativity: Deliver a commerce experience that embodies TikTok’s creative, entertaining, and joyful brand.
Component Craft & Optimization
Built 20+ master components with clear variants for consistent, scalable experiences.
Ensured global updates propagate seamlessly across surfaces.
Developed detailed anatomy and documentation for confident adoption and extension by teams.
-
![Order Center]()
Order Center
-
![]()
Order List
-
![]()
Order Details
-
![]()
New user empty state
-
![]()
Error Empty States
-
![]()
Half page empty state
-
![]()
Intro bottom sheet
-
![]()
Info bottom sheet
-
![]()
Action bottom sheet
-
![]()
Action bottom sheet
-
![]()
Promo Page header
-
![]()
Promo Page header
-
![]()
Marketing Page header
Motion & Interaction Patterns
Introduced expressive micro-interactions to add delight while maintaining usability.
Applied motion standards consistently across surfaces for cohesive experiences.
Impact
Reduced inconsistency across core shopping surfaces by aligning with TikTok’s brand system.
Improved Figma library adoption, component reuse, and design quality across teams.
Delivered 20+ scalable components with clear guidelines, driving consistency and efficiency.
Increased component reuse to 165k weekly inserts in Figma, a record-high for a quarter.
Provided 10+ reusable design patterns for core pages, unblocking designers and accelerating launches.
Supported localization at scale by designing flexible, translation-friendly components.
Conducted user testing and provided guidance and tools to streamline testing for system components.
Results
Enhanced design quality and consistency across global teams.
Unblocked designers during critical launches while ensuring brand alignment.
Strengthened TikTok Shop’s ability to scale commerce while maintaining its creative DNA.