Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/Introduction to Design Systems/Interface Inventory & Eliminating UI Debt/
Exercise #5

Migration Strategies: The Strangler Fig Pattern

Once canonical components exist, how do you replace thousands of legacy buttons and forms across a giant codebase?

The 'Big Bang' Fallacy: Attempting to rewrite the entire application in one giant PR always fails. It introduces hundreds of merge conflicts, delays feature releases, and causes production outages.

The Strangler Fig Pattern (Incremental Migration):

  1. New Features First: Any newly built screen or feature must strictly use the new design system components.
  2. High-Impact Flows Second: Migrate the most critical user journeys first (e.g., Login, Signup, Checkout).
  3. Leaf Components Upward: Migrate low-level atoms (Buttons, Badges) across the app before attempting complex organisms.
  4. Sunset the Old: Gradually 'strangle' legacy code until the old UI library can be safely deleted.

Topics

What Is an Interface Inventory?
Quantifying UI Debt: The Power of Embarrassing Numbers
Categorizing Discrepancies: Visual vs Functional
The Consolidation Workshop: Building Cross-Team Consensus
Migration Strategies: The Strangler Fig Pattern
Automating UI Debt Prevention with Linters
Design Linting in Figma: Stopping Debt at the Source
Tracking System Adoption Over Time
Challenge: Formulating an Interface Inventory Action Plan
design

From lesson

1

Interface Inventory & Eliminating UI Debt

Level 5 · Auditing & Multi-Brand Theming

Top contributors

Community contribution details will appear here once real learner activity is available.

Share