Overview
components
component reusability
contents
01 Background
02 Problem Statement
03 Solution
a. Key Result 1
b. Key Result 2
04 Result & Effect
05 Metrics to Track
01 Background
Building a design system undoubtedly requires a significant amount of time.
For small-scale products, it may be faster to simply design and develop what is needed at the moment without a system.
However, as a product grows in scale, the cost of managing design and development increases.
Eventually, there comes a point where the management cost within a design system becomes lower than without one,
and 29CM aimed to reach that turning point.
For small-scale products, it may be faster to simply design and develop what is needed at the moment without a system.
However, as a product grows in scale, the cost of managing design and development increases.
Eventually, there comes a point where the management cost within a design system becomes lower than without one,
and 29CM aimed to reach that turning point.
02 Problem Statement
Designs have not been migrated from Sketch to Figma, leading to increased management costs.
Sketch + Zeplin, designs must be exported for developers, requiring repeated updates whenever UI changes.
Figma enables real-time collaboration, branch functionality, and simultaneous work on the same screen.
New designs are in Figma, but updates to existing designs are still in Sketch, forcing teams to use two tools and causing inefficiency.
This inconsistency slows down work and causes collaboration issues.
UI libraries aren’t connected in Figma, and importing Sketch files causes design breakages, lowering efficiency.
Migration is labor-intensive, so it’s been deprioritized.
Components will be created, managed, and handed off in Figma.
Delaying further increases design and development costs.
Multiple versions of components with the same function and behavior exist in both design and code.
Wastes time and resources
Designers are unsure which component to use
Minor design differences lead to repeated development work
Results in inconsistent UI and lower-quality user experience
New components created instead of reusing existing ones
Not added to the shared library, making them unmanageable
Small compromises accumulated over time
As with Issue 1, delays will increase design and development maintenance costs
03 Solution
Created Key Results supported by measurable, data-driven initiatives with clear evaluation standards and priorities.
After interviewing each squad, frequently used elements were identified, prioritized, and combined into a design plan.
The platform design timeline was structured quarterly and weekly based on these insights.
All design files created in Sketch will be fully migrated to Figma by the end of Q3.
Design files that are not live based on the current AS-IS status will be archived.
Identify and resolve the most fragmented components first based on usage and inconsistency.
Build components aligned with each squad’s project priorities.
04 Components
Icon naming
Bottom sheet
Tab
Search Bar
popup
Product List
04 Metrics to Track
Measure design system adoption rate separately for designers and developers
Conduct surveys to collect qualitative feedback on how the system impacts productivity
Check for detached components:
- Are there any?
- How many?
- Why were they modified or recreated? → Gather insights for improvement
Measure perceived efficiency gains and resource savings → Impact evaluation
Track time saved in design and development workflows → Impact evaluation
Assess whether teams expect more components to be launched, indicating reduced maintenance costs through the system