Building a Scalable Design System for a Multi-Platform Streaming Experience

Overview

I led the transition and management of the design system for a streaming video-on-demand platform, ensuring visual and functional consistency across iOS, Android, desktop, and tvOS apps. My role involved migrating from Sketch to Figma, refining components for cross-platform usability, and streamlining mockup creation to improve design efficiency.

The Problem

The platform’s design system was fragmented, with components scattered across different files in Sketch. This led to:

  • Inconsistencies in UI elements across devices.
  • Inefficient workflows when updating components.
  • Limited scalability, making future updates difficult.

Additionally, when we lost the license for our existing font, updating it across all platforms would have been time-consuming without a centralized design system.

The solution was to transition the design system to Figma, ensuring better organization, cross-platform consistency, and improved efficiency for both designers and developers.

Understanding the Existing System

Internal Research & Collaboration

To ensure a smooth transition, I worked closely with:

  • A senior co-designer who provided insights into how components were previously structured.
  • Developers to understand technical constraints and ensure feasibility.

By identifying common UI patterns across iOS, Android, and TVOS, I determined the best way to structure components in Figma while preserving platform-specific differences.

Design & Implementation Approach

Migrating to Figma

The first step was importing the existing Sketch file into Figma. This required:

  • Auditing components to determine what should be retained, updated, or removed.
  • Adapting UI elements for different platforms (e.g., text sizes, image dimensions).
  • Creating reusable components for efficiency and consistency.

Centralized Library Management

To maintain a single source of truth, I consolidated all components into one Figma file. This allowed for:

  • Quick updates across all platforms.
  • Reduced inconsistencies between mockups.
  • More effortless scalability for future design iterations.

Ensuring Platform Consistency

One of the biggest challenges was ensuring consistency in design across iOS, Android, and TVOS while respecting each platform’s native UI guidelines.

To address this, I:

  • Leveraged Figma’s component system to create base components that could be modified per platform.
  • Maintained a cohesive visual identity while adjusting for platform-specific differences (e.g., typography, spacing).

Collaboration & Feedback Loop

Cross-Functional Collaboration

Once the Figma library was established, I:

  • Presented it to my co-designer for feedback and refinement.
  • Worked with developers to ensure technical feasibility and smooth implementation
  • Iterated based on feedback, ensuring alignment with both design and engineering teams.

Challenges & Solutions

Biggest Challenge: Keeping Designs Consistent Across Platforms

Each platform had its own UI standards, which made it challenging to maintain consistency while following platform-specific guidelines.

Solution: A Scalable Component Structure

By using Figma’s component and variant system, I structured elements to:

  • Support platform-specific variations (e.g., different text sizes for tvOS vs. mobile).
  • Ensure universal updates while maintaining customization where needed.

Final Outcome

Impact & Implementation

  • Faster design iterations – centralized components made future mockups quicker to produce.
  • Improved efficiency for developers – organized Figma files provided clear component specs.
  • Seamless platform-wide font update – a once-complex task was completed in minutes.
  • Consistent UX across devices – users had a more cohesive experience, whether on mobile, desktop, or tvOS.

Key Takeaways

  • A well-structured design system reduces inefficiencies. Centralizing components in Figma streamlined updates and improved workflow.
  • Collaboration with developers is key. Understanding technical constraints early led to a smoother implementation.
  • Scalability matters. Structuring components from the start made platform-wide changes (like the font update) significantly more straightforward.

This project reinforced the value of maintaining a scalable design system that balances consistency with platform-specific needs. We set a strong foundation for future design enhancements across the platform by optimizing the workflow.