29CM Design System

Overview

Jul. 2022 - Sep. 2022

iOS, Android, Web

Roles

Platform Design Lead

Tools

Figma

Protopie

29CM is a curated e-commerce platform in South Korea that blends fashion and lifestyle discovery with storytelling-driven shopping experiences, targeting mostly 20–30-year-old consumers and achieving over 1 trillion KRW in annual GMV.

Overview

Migrating to Figma enabled real-time collaboration between designers and developers, supported by a centralized component library that reduced duplication and conflicts. Developers access specs directly in Figma, updates apply automatically across pages, ensuring consistent branding, lower maintenance costs, and quick integration of new features for growth.

0+

0+

components

0+

0+

variants

0%

0%

faster feedback cycles

0%

0%

component reusability

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.

Problem Statement

issue 1

Designs have not been migrated from Sketch to Figma, leading to increased management costs.

Why move to figma?

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.

Why Figma?

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.

Why migration is delayed

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.

Why fix it now

Components will be created, managed, and handed off in Figma.


Delaying further increases design and development costs.

issue 2

Multiple versions of components with the same function and behavior exist in both design and code.

Why it's a problem 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

Cause

New components created instead of reusing existing ones

Not added to the shared library, making them unmanageable

Small compromises accumulated over time

Why fix it now

As with Issue 1, delays will increase design and development maintenance costs

Solution

Created Key Results supported by measurable, data-driven initiatives with clear evaluation standards and priorities.

Key Result 1

Migrate 100% of the UX design workflow from Sketch to Figma.

initiatives

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.

Key Result 2

Increase the adoption rate of Figma UI library components in new design files from 0% to 30%.

initiatives

Identify and resolve the most fragmented components first based on usage and inconsistency.


Build components aligned with each squad’s project priorities.

Components

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